/*Variables*/
:root{
  --loader-bg:#809077;
  --cancion-bg:rgba(248, 215, 147, 0.6);
  --icono-color:#f4ecdf;
  --icono-bg:#111a19;
  --bg:#274239;
  --text: #f8d793;
  --countdown-bg: #1e1e1e;
  --countdown-text:#f4ecdf;
  --btn-bg:#f8d793;
  --btn-text:#111a19;
  --box-shadow:;
  --timer-fontsize:40px;
  --accordion-bg:#e9e5ca;
  --accordion-text:#1e1e1e;
  --accordion-btn-bg:#f8d793;
  --accordion-btn-text:#111a19;
  --scrollbar-color:#f8d793;
  --footer-bg:#809077;
}

@font-face {
  font-family: 'Dream Orphans Regular';
  src: url('../../fonts/DreamOrphans-Regular.ttf') format('truetype');
}

body {
  font-family: "Dream Orphans Regular";
  font-size: 18px;
}

main{
   background-image: linear-gradient(rgba(25, 24, 38, 0.2), rgba(25, 24, 38, 0.6)), 
   url('bg/b12a.webp');
   color: var(--bg);
   border-radius: 0px 0px 9999px 9999px;
   border-bottom: 2px solid var(--text);
}

.portada img{
  width: 85%;
  margin: auto;
}
#date{
  background-image: linear-gradient(rgba(22, 50, 45, 0.4), rgba(22, 50, 45, 0.4)), 
   url('bg/b12b.webp');
   background-size: cover;
   border-top: 2px solid var(--text);
   border-bottom: 2px solid var(--text);
}

.boton{
  border-radius: 15px;
  box-shadow: var(--box-shadow);
  height: 40px;
}

div.scroll-container img{
   border-radius: 15px;
   border: 2px solid var(--text);
}

.asistencia{
  background-color: var(--accordion-btn-text);
  border: 2px solid var(--text);
}