/*Variables*/

:root{
  --loader-bg:#8e6164;
  --cancion-bg:rgba(251, 248, 242, 0.85);
  --icono-color:#d99195;
  --icono-bg:#f8c6d9;
  --bg:#f6f5ed;
  --text: #8e6164;
  --countdown-bg: #d99195;
  --countdown-text:#f6f5ed;
  --btn-bg:#d99195;
  --btn-text:#f6f5ed;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:40px;
  --accordion-bg:#f2f0e3;
  --accordion-text:#8e6164;
  --accordion-btn-bg:#f2f0e3;
  --accordion-btn-text:#8e6164;
  --scrollbar-color:#ffcf33;
  --footer-bg:#8e6164;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../../fonts/PlayfairDisplay.ttf') format('truetype');
}

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

main{
  background-image: url('bg/c04a.webp');
  background-size: cover;
  box-shadow: var(--box-shadow);
}

.main.container{
  overflow: hidden;
}

.main h1{
  font-size: 70px;
}
main, #frase, .frase, #asistencia{
  display: grid;
  place-items: center;
}

.icono-bg{
  border: 5px solid #f6f5ed;
}

.date{
  padding-top: 150px;
  padding-bottom: 150px;
}

/*Decoracion*/
.frase, .countdown, .date, .info, .asistencia{
  position: relative;
}

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

.d1, .d2, .d3, .d4{
  left: 0; 
  right: 0; 
  margin-inline: auto; 
  max-width: 100%;
}

.d5, .d6, .d7, .d8{
  position: absolute;
  max-width: 80px;
}

.d1, .d3{
  top: 0;
}

.d2, .d4{
  bottom: 0;
}

.d5{
  right:0px;
  bottom: 0px;
}
.d6{
  top: 20px;
  left: 0;
}

.d7{
  top:-100px;
  left: 25px;
}

.d8{
  bottom:-50px;
  right: 25px;
}

/**/
.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);
}

@media screen and (min-width: 768px){
  .d1, .d2{
  max-width: 50dvw;
}
}