/*Variables*/

:root{
  --loader-bg:#f4f1e8;
  --cancion-bg:rgba(255,255,255, 0.8);
  --icono-color:#021726;
  --icono-bg:#ffeaae;
  --bg:#f4f1e8;
  --text: #021726;
  --countdown-bg: #b49de1;
  --countdown-text:#7350c9;
  --btn-bg:#ed815d;
  --btn-text:#252525;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:50px;
  --accordion-bg:#f4f1e8;
  --accordion-text:#021726;
  --accordion-btn-bg:#ed815d;
  --accordion-btn-text:#252525;
  --scrollbar-color:#f7cacf;
  --footer-bg:#b49de1;
}

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

body{
  font-family: 'Lora';
  font-size: 21px;
}

.main img {
  width: 90%;
  height: auto;
  margin: auto;
}

.countdown{
  padding: 40px 15px;
  border: 4px solid var(--countdown-text);
}

.boton{
  border-radius: 15px;
  text-transform: uppercase;
  box-shadow: var(--box-shadow);
  font-weight:700 ;
}

.custom-container.bg, .date, .asistencia{
  border-top-left-radius: 9999px;
  border-top-right-radius:9999px;
  border-bottom-left-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.custom-container.bg{
  background-color: var(--scrollbar-color);
}
.date, .asistencia{
  padding: 100px 20px;
  border:4px solid #ff5576;
}

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

.galeria{
  border-top: 4px solid #e05332;
  border-bottom: 4px solid #e05332;
}

.asistencia{
  height: 500px;
  width: 320px;
}

@media screen and (min-width: 768px){
  .date, .asistencia{
    padding: 30px 50px;
  }
}