/*Variables*/
:root{
  --loader-bg:#cbb8ce;
  --cancion-bg:rgba(255, 255, 255,0.8);
  --icono-color:#ce403e;
  --icono-bg:#acb564;
  --bg:#cbb8ce;
  --text: #0f283a;
  --countdown-bg: #b69bbc;
  --countdown-text:#eef2cd;
  --btn-bg:#ce403e;
  --btn-text:#eef2cd;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:40px;
  --accordion-bg:#fffcf5;
  --accordion-text:#0f283a;
  --accordion-btn-bg:#ce403e;
  --accordion-btn-text:#eef2cd;
  --scrollbar-color:#acb564;
  --footer-bg:#b69bbc;
}

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

body{
  font-size: 20px;
  font-family: 'Fraunces Variable';
}

main{
  background-image: url('bg/b08a.webp');
  background-size: cover;
  color: var(--countdown-text);
}

.portada img{
  max-width: 75%;
  height: auto;
  margin: auto;
}

.portada h1{
font-size: 75px;
line-height: 0.8;
text-shadow: 1px 1px 0px rgba(0,0,0,0.6);
}

#countdown{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.frase{
  border-radius: 30px;
  background-color: var(--countdown-text);
}

.date{
  color: var(--countdown-text);
  padding: 25px;
 border-left:10px double var(--countdown-text);
  border-right:10px double var(--countdown-text);
}

#asistencia{
  background-color: var(--countdown-text);
}
.asistencia{
  padding: 25px;
 border-left:10px double var(--scrollbar-color);
  border-right:10px double var(--scrollbar-color);
}

#galeria{
  background-color: var(--countdown-text);
}

#extra{
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

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

.boton p, .boton a{
  font-weight: 800;
}