/*Variables*/
:root{
  --loader-bg:#c3caba;
  --cancion-bg:rgba(255, 255, 255, 0.8);
  --icono-color:#2a401b;
  --icono-bg:#ffffff;
  --bg:#f3f3f3;
  --text: #2a401b;
  --countdown-bg: #ebebeb;
  --countdown-text:#2a401b;
  --btn-bg:#a1ae96;
  --btn-text:#2a401b;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:40px;
  --accordion-bg:#fffcf5;
  --accordion-text:#0f283a;
  --accordion-btn-bg:#ffeaae;
  --accordion-btn-text:#0f283a;
  --scrollbar-color:#ffeaae;
  --footer-bg:#dddddd;
}

@font-face {
  font-family: 'DM Serif Text';
  src: url('font/DMSerifText.ttf') format('truetype');
}

body{
  font-family: 'DM Serif Text';
  font-size: 20px;
}

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

.main h1{
  font-size: 75px;
}
.main img{
  width:120px;
  margin: auto;
}


.boton{
   border-radius: 20px;
   box-shadow: rgba(59, 94, 130, 0.4) 0px 5px 15px;
   font-weight: 800;
}

#frase{
  border-top: 5px solid var(--btn-bg);
  border-bottom: 5px solid var(--btn-bg);
}

/*Animacion*/
@keyframes rebote {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.rebote {
  animation: rebote 2s infinite ease-in-out;
}

.asistencia, .frase{
  background: var(--cancion-bg);
  border-radius: 20px;
}