/*Variables*/

:root{
  --loader-bg:#f4f1e8;
  --cancion-bg:rgba(255,255,255, 0.8);
  --icono-color:#580f13;
  --icono-bg:#ffeaae;
  --bg:#fff5e9;
  --text: #580f13;
  --countdown-bg: #580f13;
  --countdown-text:#fff5e9;
  --btn-bg:#580f13;
  --btn-text:#fff5e9;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:50px;
  --accordion-bg:#fff5e9;
  --accordion-text:#580f13;
  --accordion-btn-bg:#580f13;
  --accordion-btn-text:#fff5e9;
  --scrollbar-color:#f7cacf;
  --footer-bg:#901d33;
}

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

body{
  font-family: 'Roboto Slab Regular';
  background-image: url('bg/c09a.webp');
  background-size: 120%;
  font-size: 21px;
}

.portada img{
  width: 95%;
  margin: auto;
}

#countdown, .frase{
  box-shadow: var(--box-shadow);
}

.frase, .date, .asistencia{
  position: relative;
  padding: 50px 15px;
  color: var(--text);
  background-color: var(--bg);
}

.borde{
  padding: 60px 15px;
  border: 4px solid var(--countdown-bg);
}

.d1{
  position:absolute;
  width: 150px;
  height: auto;
  top:-70px;
  left:150px;
}

.d2{
  position:absolute;
  width: 200px;
  height: auto;
  top:-70px;
  left:100px;
  transform: rotate(-10deg);
}

#timer{
  font-weight: bolder;
}

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

div.scroll-container img{
  border:10px solid var(--countdown-bg);
}
@media screen and (min-width: 768px){
  .portada img{
  width: 60%;
  margin: auto;
}
}