body {
    margin: 0;
    font-family: arial, "Microsoft YaHei";
    background-color: #131313;
    color: #FEFEFE;
}

img {
  vertical-align: middle;
  border-style: none;
}

@font-face {
      font-family: "led_counter-7_0";
      src: url("https://leon-belmont.github.io/fonts/led_counter-7_0.ttf");
}

@font-face {
      font-family: "Sams_Town";
      src: url("https://recursos-web-radiosigma.github.io/fonts/Sams_Town.ttf");
}

@font-face {
      font-family: "Bauhaus_Medium";
      src: url("https://recursos-web-radiosigma.github.io/fonts/Bauhaus_Medium.otf");
}

@font-face {
      font-family: "DotcirfulL_Regular";
      src: url("https://recursos-web-radiosigma.github.io/fonts/DotcirfulL_Regular.otf");
}

@font-face {
      font-family: "Ink_Free";
      src: url("https://recursos-web-radiosigma.github.io/fonts/Ink_Free.ttf");
}

@font-face {
      font-family: "Suffolk_Punch";
      src: url("https://recursos-web-radiosigma.github.io/fonts/Suffolk_Punch.ttf");
}

.degradado_fondo {
  background: linear-gradient(#E3DAC9, #731a16);
}
    
.reloj { font-family: "led_counter-7_0", serif }

.titulo_secciones { font-family: "Suffolk_Punch", serif }

.frases { font-family: "Ink_Free", serif }

.wrap {
  position: relative;
  margin: 0 auto;
  padding: 0px;
  width: auto;
  max-width: 1366px;
}

.body_modo_oscuro {
  color: #E4E6EB;
  background-color: #0f0f0f;
}

.titulo {
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr fit-content(60%) 1fr;
}

.espacio img{
  display: block;
  margin: 0 0;
  width: 100%;
}

.titulo_lesbo img{
  display: block;
  margin: 0 0;
  width: 100%;
}

.titulo_principal {
  font-family: "Suffolk_Punch", serif;
  font-size: 12em;
  margin-top: 30%;
  margin-bottom: -40px;
  text-align: center;
}

.titulo_principal_movil {
  font-family: "Suffolk_Punch", serif;
  font-size: 6em;
  margin-bottom: 0px;
  text-align: center;
}

.titulo_frase {
  font-family: "Ink_Free", serif;
  font-size: 3em;
  color: black;
  text-align: center;
}

.titulo_frase_movil {
  font-family: "Ink_Free", serif;
  font-size: 2em;
  margin-left: 0px;
  color: black;
  text-align: center;
}

.neon {
  color: #fff;
  text-shadow:
    0 0 5px #ff8a00,
    0 0 10px #ff8a00,
    0 0 20px #ff8a00,
    0 0 40px #ff8a00,
    0 0 80px #ff8a00,
    0 0 90px #ff8a00,
    0 0 100px #ff8a00,
    0 0 140px #ff8a00,
    0 0 180px #ff8a00;
}

.dinamica img{
  display: block;
  margin: 0 0;
  width: 100%;
}

.albumes {
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: fit-content(33.33%) fit-content(33.33%) 1fr;
}

.album img{
  display: block;
  margin: 0 0;
  width: 100%;
  border-radius: 10px;
}

.borde_animado{
  margin: 0 auto;
  padding: 0.7em 0.9em 0.5em 0.9em;
  width: 560px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  position: relative;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.borde_animado::after, .borde_animado::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}

.borde_animado::before{
  filter: blur(1.5rem);
  opacity: 0.5;
}

@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}

.texto {
  font-size: 1.5em;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 1.75;
  text-align: justify;
}

.burbuja_texto {
  margin-top: 10px;
  border-radius: 10px;
  padding: 5px 10px;
  background: rgb(33, 33, 33, 0.7);
}

.burbuja_contenedor_comentarios {
  border-radius: 10px;
  background: rgb(33, 33, 33, 0.7);
}

.microblog_discos {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.microblog_menu_discos {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.microblog_info_disco {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
  height: auto;
  padding: 0 50px 0 100px;
}

.microblog_comentarios {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  height: auto;
  padding: 0 100px 0 50px;
  min-width: 303px;
  max-width: 100%;
}

.selector_discos {
  vertical-align: middle;
  width: 100%;
  font-size: 1.0em;
  display: table-cell
}

.propuestas {
  display: grid;
  grid-template-columns: 50%;
  justify-content: center;
}

.dinamicas {
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: fit-content(33.33%) fit-content(33.33%) 1fr;
}

.marco_contenedor {
  border-radius: 10px;
  background: #131313;
}

.componente_modo_oscuro {
  color: #E4E6EB;
  background-color: #0f0f0f;
  border: 1px solid rgb(133, 133, 133);
}

.boton_normal {
  background: #234A8B;
  background-image: -ms-linear-gradient(top, #4FA2E8 0%, #234A8B 100%);
  background-image: -moz-linear-gradient(top, #4FA2E8 0%, #234A8B 100%);
  background-image: -o-linear-gradient(top, #4FA2E8 0%, #234A8B 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4FA2E8), color-stop(1, #234A8B));
  background-image: -webkit-linear-gradient(top, #4FA2E8 0%, #234A8B 100%);
  background-image: linear-gradient(to bottom, #4FA2E8 0%, #234A8B 100%);
  padding: 0.55em 1em 0.55em;
  width: auto;
  text-align: center;
  color: #ffffff;
  line-height: 1em;
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 0.2em;
  border: #4FA2E8;
  -o-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
}

form input[type=submit],
form input[type=submit]:active,
button,
button:active{
  background: #234A8B;
  background-image: -ms-linear-gradient(top, #4FA2E8 0%, #234A8B 100%);
  background-image: -moz-linear-gradient(top, #4FA2E8 0%, #234A8B 100%);
  background-image: -o-linear-gradient(top, #4FA2E8 0%, #234A8B 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4FA2E8), color-stop(1, #234A8B));
  background-image: -webkit-linear-gradient(top, #4FA2E8 0%, #234A8B 100%);
  background-image: linear-gradient(to bottom, #4FA2E8 0%, #234A8B 100%);
  padding: 0.55em 1em 0.55em;
  width: auto;
  text-align: center;
  color: #ffffff;
  line-height: 1em;
  font-size: 1.5em;
  font-weight: bold;
  border-radius: 0.2em;
  border: #4FA2E8;
  -o-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
}

form input[type=submit]:hover,
button:hover {
  background: #214361;
  background-image: -ms-linear-gradient(top, #4FA2E8 0%, #214361 100%);
  background-image: -moz-linear-gradient(top, #4FA2E8 0%, #214361 100%);
  background-image: -o-linear-gradient(top, #4FA2E8 0%, #214361 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4FA2E8), color-stop(1, #214361));
  background-image: -webkit-linear-gradient(top, #4FA2E8 0%, #214361 100%);
  background-image: linear-gradient(to bottom, #4FA2E8 0%, #214361 100%);
}

form input[type=submit]:disabled,button[disabled],
button:disabled {
  background: #d3d3d3;
  background-image: -ms-linear-gradient(top,#FFFFFF 0%,  #d3d3d3 100%);
  background-image: -moz-linear-gradient(top, #FFFFFF 0%,  #d3d3d3 100%);
  background-image: -o-linear-gradient(top, #FFFFFF 0%,  #d3d3d3 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1,  #d3d3d3));
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%,  #d3d3d3 100%);
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #d3d3d3 100%);
  color: GrayText;
  cursor: inherit;
}

/* Tamaño del scroll */
.scroll_body::-webkit-scrollbar {
  width: 10px;
}

 /* Estilos barra (thumb) de scroll */
.scroll_body::-webkit-scrollbar-thumb {
  background: #134D86;
  border-radius: 0px;
}

.scroll_body::-webkit-scrollbar-thumb:active {
  background-color: #999999;
}

.scroll_body::-webkit-scrollbar-thumb:hover {
  background: #134D86;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

 /* Estilos track de scroll */
.scroll_body::-webkit-scrollbar-track {
  background: #B9CEDE;
  border-radius: 0px;
}

.scroll_body::-webkit-scrollbar-track:hover, 
.scroll_body::-webkit-scrollbar-track:active {
  /*background: #d4d4d4;*/
}

/* Tamaño del scroll */
.scroll_propuestas::-webkit-scrollbar {
  width: 5px;
}

 /* Estilos barra (thumb) de scroll */
.scroll_propuestas::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 0px;
}

.scroll_propuestas::-webkit-scrollbar-thumb:active {
  background-color: #999999;
}

.scroll_propuestas::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

 /* Estilos track de scroll */
.scroll_propuestas::-webkit-scrollbar-track {
  background: #FFFFFF;
  border-radius: 0px;
}

.scroll_propuestas::-webkit-scrollbar-track:hover, 
.scroll_propuestas::-webkit-scrollbar-track:active {
  /*background: #d4d4d4;*/
}