/*Variables*/
:root{
  --loader-bg:#faaca3;
  --cancion-bg:rgba(255, 255, 255,0.8);
  --icono-color:#0d0b0b;
  --icono-bg:#f67157;
  --bg:#cbb8ce;
  --text: #ffffff;
  --countdown-bg:#d12d21;
  --countdown-text:#ffc3a8;
  --btn-bg:#fff08e;
  --btn-text:#a31c23;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:40px;
  --accordion-bg:#;
  --accordion-text:#ffffff;
  --accordion-btn-bg:#fff08e;
  --accordion-btn-text:#a31c23;
  --scrollbar-color:#acb564;
  --footer-bg:#0d0b0b;
}

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

body{
  font-size: 20px;
  font-family: 'Archivo SemiBold';
  background-image: url('bg/b09a.webp');
  background-size: contain;
}

h1{
  font-size: 60px;
}

.glass{
  border-radius: 24px;
  background: rgba(253, 244, 227, 0.08);
  backdrop-filter: blur(8px) saturate(100%);
  -webkit-backdrop-filter: blur(8px) saturate(100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 4px 4px 20px 0 rgba(120, 53, 15, 0.1),
    inset 0 0 150px rgba(245, 158, 11, 0.05),
    inset 0px 0px 4px 2px rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.boton{
  box-shadow: var(--box-shadow);
  border-radius: 10px;
  height: 40px;
}

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

#countdown, #galeria{
  border: 1px solid var(--countdown-text);
  border-radius: 24px;
}

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