/*Variables*/
:root{
  --loader-bg:#f2f2ed;
  --cancion-bg:rgba(14, 50, 86, 0.8);
  --icono-color:#c59a42;
  --icono-bg:#f7edd7;
  --bg:#fffdfa;
  --text: #212121;
  --countdown-bg: #90acba;
  --countdown-text:#212121;
  --btn-bg:#f7edd7;
  --btn-text:#c59a42;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:60px;
  --accordion-bg:#fffcf5;
  --accordion-text:#0f283a;
  --accordion-btn-bg:#ffeaae;
  --accordion-btn-text:#0f283a;
  --scrollbar-color:#ffeaae;
  --footer-bg:#90acba;
}

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

body{
  font-family: 'matcha';
  font-size: 24px;
}

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

.main h1{
  font-size: 80px;
}
.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(--icono-color);
  border-bottom: 5px solid var(--icono-color);
}

.icono-bg, .boton{
  border:5px solid white;
}

#frase{}

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

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