/*Variables*/

:root{
  --loader-bg:#f7f7f7;
  --cancion-bg:rgba(255,255,255, 0.8);
  --icono-color:#af0004;
  --icono-bg:#f7f7f7;
  --bg:#f7f7f7;
  --text: #333333;
  --countdown-bg: #ffffff;
  --countdown-text:#252525;
  --btn-bg:#af0004;
  --btn-text:#ffffff;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:40px;
  --accordion-bg:#ffffff;
  --accordion-text:#333333;
  --accordion-btn-bg:#af0004;
  --accordion-btn-text:#ffffff;
  --scrollbar-color:#ffcf33;
  --footer-bg:#333333;
}
@font-face {
  font-family: 'matcha';
  src: url('../../fonts/matcha.ttf') format('truetype');
}

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

main, #frase, .frase, #asistencia{
  display: grid;
  place-items: center;
}

.texto-portada h1{
  font-size: 65px;
}
/*Decoracion*/
.frase, .date, .info, .asistencia{
  position: relative;
}

.s1, .d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8{
  position: absolute;
}

.s1{
  width: 150px;
  top: -120px;
  left: 5px;
}

.d1{
  width: 150px;
  right: 0;
  top: -100px;
}

.d2{
  width: 90px;
  left: 0;
  top: -20px;
}
.d3{
  width: 100px;
  right: 0;
  bottom: -100px;
}

.d4{
  width: 100px;
  left: 0;
  bottom: -100px;
}

.d5{
  transform: scaleY(-1);
  width: 250px;
  left: 0;
  top: 0;
}
.d6{
  width: 280px;
  transform: scaleX(-1);
  right: 0;
  bottom: 0;
  z-index: 0;
}

.d7{
  width: 120px;
  right: 0;
  top: -50px;
  z-index: 0;
}

.d8{
  width: 100px;
  right: 0;
  bottom: 0;
}

/**/
.main{
   height: 100%;
  display: flex;
  flex-direction: column;
}

.top img, .bottom img{
  max-width: 100%;
  height: auto;
  display: block;
}

.top{
  align-self: flex-start;
}

.texto-portada{
  margin: auto 0;
  text-align: center;
}

.bottom{
  align-self: flex-end;
}

.icono-bg{
  box-shadow: var(--box-shadow);
}

.boton{
  border-radius: 15px;
  box-shadow: var(--box-shadow);
}

.date{
  border-radius: 30px;
  background-color: var(--countdown-bg);
}


@media screen and (min-width: 1024px){
.top img{
  display: none;
}
}