/*Variables*/
:root{
  --loader-bg:#f9f9ef;
  --cancion-bg:rgba(255, 255, 255, 0.8);
  --icono-color:#d3ae8c;
  --icono-bg:#f7f7e8;
  --bg:#ecedd9;
  --text: #3f3f31;
  --countdown-bg: #f9f9ef;
  --countdown-text:#3f3f31;
  --btn-bg:#f9f9ef;
  --btn-text:#3f3f31;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:40px;
  --accordion-bg:#f9f9ef;
  --accordion-text:#623a76;
  --accordion-btn-bg:#f9f9ef;
  --accordion-btn-text:#3f3f31;
  --scrollbar-color:#d3ae8c;
  --footer-bg:#83844e;
}

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

body{
  font-family: 'Playfair Display';
  font-size: 20px;
}

main{
  background-image: url('bg/b02.webp');
  background-size: cover;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.portada img{
  width: 300px;
  height: auto;
  margin: auto;
  border-radius: 30px 15px;
}

.portada h1{
  font-size: 60px;
  line-height: 0.9;
}
#countdown{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#date{
background-image: url('bg/b02a.webp');
  background-size: cover;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#extra{
background-image: url('bg/b02c.webp');
  background-size: cover;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.boton{
  border-radius: 10px;
  height: 40px;
}

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