/*Variables*/
:root{
  --loader-bg:#fffff5;
  --cancion-bg:rgba(255, 255, 240, 0.7);
  --icono-color:#184689;
  --icono-bg:#f9f8dc;
  --bg:#fffff5;
  --text: #184689;
  --countdown-bg: #fffff0;
  --countdown-text:#184689;
  --btn-bg:#386dcd;
  --btn-text:#fffff5;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:60px;
  --accordion-bg:#f9f9ef;
  --accordion-text:#386dcd;
  --accordion-btn-bg:#386dcd;
  --accordion-btn-text:#fffff5;
  --scrollbar-color:#d3ae8c;
  --footer-bg:#184689;
}

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

body{
  font-family: 'Caveat';
  font-size: 30px;
  line-height: 0.9;
}

main, #asistencia{
  background-image: url('bg/b03b.webp');
  background-size: 75%;
  background-position: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.portada img{
  width: 320px;
  height: auto;
  margin: auto;
}

#frase{
  background-image: url('bg/b03c.webp');
  background-size: cover;
}

.frase{
  width: 95%;
  height: 250px;
  margin: auto;
  padding: 30px;
  border-image-repeat: stretch;
  border-image-slice: 30 30 30 30 fill;
  border-image-source: url('marcos/b03a.webp');
  border-image-width: 10px;
}


#date, #countdown{
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-bottom: double;
  border-top: double;
  border-color:var(--text) ;
  border-width: 15px;
}

#galeria{
  background-image: url('bg/b03d.webp');
  background-size: 75%;
  background-position: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.boton{
  border-radius: 10px;
}

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



.asistencia{
  width: 95%;
  height: 300px;
  padding:30px;
  border-image-repeat: stretch;
  border-image-slice: 40 40 40 40 fill;
  border-image-source: url('marcos/b03c.webp');
  border-image-width: 20px;
}