/*Variables*/

:root{
  --loader-bg:#f7f7f7;
  --cancion-bg:rgba(255, 255, 255, 0.6);
  --icono-color:#845f34;
  --icono-bg:#f7f7f7;
  --bg:#fffaf3;
  --text: #000000;
  --countdown-bg: #fffcf8;
  --countdown-text:#000000;
  --btn-bg:#252525;
  --btn-text:#ffffff;
  --box-shadow:rgba(0, 0, 0, 0.35) 0px 5px 15px;;
  --timer-fontsize:40px;
  --accordion-bg:#fffaf3;
  --accordion-text:#000000;
  --accordion-btn-bg:#252525;
  --accordion-btn-text:#fdf2e0;
  --scrollbar-color:#fdf2e0;
  --footer-bg:#d5ab63;
}

@font-face {
  font-family: 'Alex Brush Regular';
  src: url('../../fonts/AlexBrush-Regular.ttf') format('opentype');
}
@font-face {
  font-family: 'Cinzel Decorative Regular';
  src: url('../../fonts/CinzelDecorative-Regular.ttf') format('truetype');
}

body{
 font-family: 'Cinzel Decorative Regular';
  font-size: 20px;
}

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

.boton{
  border-radius: 15px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.portada h1{
  font-family: 'Alex Brush Regular';
  font-size: 75px;
}

/*Deco*/

.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9, .d10, .d11, .d12, .d13, .d14{
  position: absolute;
}
.d1{
  width: 80px;
  left: 50px; 
  top: 0px; 
}

.d2{
  left: 0;
  bottom: 0;
  width: 100px;
}

.d3{
  width: 150px;
  bottom:-100px;
  right: 35px;
}

.d4{
  width: 100px;
  top:-100px;
  right: 35px;
}

.date{
  border-image-repeat: stretch;
  border-image-slice: 10 10 10 10 fill;
  border-image-source: url('marcos/c07a.webp');
  border-image-width: 5px;
  position: relative;
  padding: 30px 20px  30px 20px;
}

.d5{
  width: 120px;
  left: 0px; 
  top: 0px; 
}

.d6{
  right: 0px;
  top: -50px;
  width: 125px;
}

.d7{
  width: 90px;
  bottom:-100px;
  left: 0px;
  transform: rotate(-20deg);
}

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

#galeria{
  box-shadow: var(--box-shadow);
  background-color: var(--scrollbar-color);
}

.accordion-button{
  text-transform: none;
}

#asistencia{
  height: 75dvh;
  display: grid;
  place-items: center;
}
.asistencia{
  padding: 100px 25px;
  background-color: var(--scrollbar-color);
}

.d9{
  width: 250px;
  top:0px;
  right: 85px;
}

.d10{
  width: 250px;
  bottom:-0px;
  left: 85px;
}

.d11{
  width: 170px;
  top:-150px;
  left: 10px;
}


.d12{
  transform: scaleX(-1);
  width: 80px;
  top:-150px;
  right: 0px;
}

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

.d14{
  width: 120px;
  bottom:-80px;
  right: 0px;
}

@media screen and (min-width: 768px){
  .date{
    border-image-source: url('marcos/c07b.webp');
  }

  .d9{
  width: 250px;
  top:-20px;
  right: 30%;
}

.d10{
  width: 250px;
  bottom:-20px;
  left: 30%;
}

}