/*Variables*/

:root{
  --loader-bg:#9dadce;
  --cancion-bg:rgba(249, 244, 237, 0.85);
  --icono-color:#021726;
  --icono-bg:#ffffff;
  --bg:#142e49;
  --text: #e7e7e7;
  --countdown-bg: #081d30;
  --countdown-text:#f2e9d7;
  --btn-bg:#9dadce;
  --btn-text:#021726;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:40px;
  --accordion-bg:#f2f0e3;
  --accordion-text:#550609;
  --accordion-btn-bg:#9dadce;
  --accordion-btn-text:#021726;
  --scrollbar-color:#700d14;
  --footer-bg:#081d30;
}

@font-face {
  font-family: 'against-Regular';
  src: url('../../fonts/against-Regular.otf') format('opentype');
}

body{
  font-family: 'against-Regular';
  font-size: 20px;
}

main{
  background-image: url('bg/c06a.webp');
  background-size: cover;
  box-shadow: var(--box-shadow);
}

.boton{
  border-radius: 15px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

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

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

.frase{
  padding: 50px 20px;
  background-color: var(--countdown-text);
  color: var(--countdown-bg);
}

/*Deco*/
.d1, .d2{
  left: 0; 
  right: 0; 
  margin-inline: auto;
  position: absolute; 
  width: 200px;
  z-index: 20;
}

.d3, .d4{
  position: absolute;
  width: 120px;
  height: auto;
}

.d1{
  top: -5px;
}

.d2{
  bottom: -5px;
}

.d3{
  top: 20px;
  left: 30px;
  transform: rotate(2deg);
}

.d4{
  right: 40px;
  bottom: 20px;
  transform: rotate(-2deg);
}


#galeria{
  background-color: var(--footer-bg);
}

#asistencia{
  background-image: url('bg/c06b.webp');
  background-size: cover;
  box-shadow: var(--box-shadow);
}