/*Variables*/
:root{
  --loader-bg:#ffffff;
  --cancion-bg:rgba(255, 255, 240, 0.7);
  --icono-color:#b90504;
  --icono-bg:#ffffff;
  --bg:#ffffff;
  --text: #b90504;
  --countdown-bg: #b90504;
  --countdown-text:#ffffff;
  --btn-bg:#b90504;
  --btn-text:#ffffff;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:60px;
  --accordion-bg:#ffcde4;
  --accordion-text:#b90504;
  --accordion-btn-bg:#b90504;
  --accordion-btn-text:#ffffff;
  --scrollbar-color:#d3ae8c;
  --footer-bg:#ffcde4;
}

@font-face {
  font-family: 'Cormorant Garamond Light';
  src: url('../../fonts/CormorantGaramond.ttf') format('truetype');
}

body{
  font-family: "Cormorant Garamond Light", serif;
  font-size: 25px;
}

main{
  background-color: var(--bg);
}
.portada img, .asistencia img{
  width: 300px;
  height: auto;
  margin: auto;
}


#countdown{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/*Deco*/
.d1, .d2, .d3, .d4{
  position: absolute;
  height: 75px;
  width: 75px;
}

.d1{
  top: -50px;
  left: 15px;
}

.d2{
  bottom: -50px;
  right: 10px;
}

.d3{
  top: -30px;
  right: 50px;
}

.d4{
  bottom: -50px;
  left: 10px;
}
/*Boton*/
.boton{
  border-radius: 10px;
}

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

#date, #extra{
  background-color: var(--footer-bg);
}