/*Variables*/

:root{
  --loader-bg:#0c0405;
  --cancion-bg:rgba(25,25,25, 0.8);
  --icono-color:#ffffff;
  --icono-bg:#ffeaae;
  --bg:#0d0e10;
  --text: #ffffff;
  --countdown-bg:;
  --countdown-text:#ffffff;
  --btn-bg:#0d0e10;
  --btn-text:#000000;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:50px;
  --accordion-bg:#0c0405;
  --accordion-text:#ffffff;
  --accordion-btn-bg:;
  --accordion-btn-text:#0c0405;
  --scrollbar-color:#f7cacf;
  --footer-bg:#0c0405;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../../fonts/Fraunces-Variable.ttf') format('truetype');
}

body{
  font-family: 'Fraunces';
  font-size: 18px;
  text-transform: uppercase;
}

main {
  background-image: url('bg/c11a.webp');
  background-position: center;
  background-size: cover;
  font-size: 25px;
}

.portada h1{
  font-size: 100px;
}

.boton, .accordion-button{
  border-radius: 15px;
  background: linear-gradient(0deg, #f2f2f2 0%, #d9d9d9 100%);
}

#frase, #galeria, #asistencia{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  background-position: center;
  background-size: cover;
  min-height: 75dvh;
}

#frase, #galeria{
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('bg/c11c.webp');
}

#asistencia{
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url('bg/c11d.webp');
}
#date{
  background-image: url('bg/c11b.webp');
  background-position: center;
  background-size: cover;
}