#loader {
  background-color: #3a0517;
}

#cancion{
background-color: rgba(45, 4, 20, 0.6);
}

lord-icon {
  --lord-icon-primary: #f2e2e2;
  --lord-icon-secondary: #f2e2e2;
}

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

@font-face {
  font-family: 'Noto Serif';
  src: url('fonts/NotoSerif.ttf') format('truetype');
}

body{
  font-family: 'Noto Serif';
  font-size:22px;
  background: #3a0517;
  color: #f9c2c2;
}

.boton{
   border-radius: 15px;
  background-color:#f2e2e2 ;
}

.boton a, .boton p{
  color: #2d0414;
}

#main{
  color: #dab8b7;
  align-items: center;
}


.portada{
  height: 70vh;
  padding: 30px 15px 15px 15px;
  border-image-repeat: stretch;
  border-image-slice: 10 10 10 10 fill;
  border-image-source: url('marco_boda/marcob02a.webp');
  border-image-width: 3px;
}

.portada h1, .galeria h3{
  font-family: 'Girassol Regular';
  font-size: 60px;
}

.portada p{
  font-size: 30px;
}

.icono{
  border-radius: 50%;
  background-color: #2d0414;
  box-shadow: rgba(0, 0, 0, 0.65) 0px 2px 5px -1px, rgba(0, 0, 0, 0.65) 0px 1px 3px -1px;
}

span{
  font-size: 40px;
}

.frase{
  padding: 25px;
}

#countdown, #galeria{
  background-color: #e2aaaa;
  color: #3a0517;
}

#lugar{}

.lugar{
  padding: 25px 10px 25px 10px;
}

/*Accordion*/
.accordion{
  --bs-accordion-bg:#efdada;
  --bs-accordion-color:#300a10;
  --bs-accordion-btn-bg: #d6aaaa;
}

.accordion-button:not(.collapsed) {
    background-color: #d6aaaa;
    color: #300a10;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
}

#asistencia{
  color: #dab8b7;
  background-color: #300a10;
}
.asistencia{
  padding: 50px 10px 50px 10px;
}

/*Padding*/
#frase, #countdown, #lugar, #galeria, #extra, #asistencia, footer{
  padding: 50px 0px 50px 0px;
}

footer{
  background-color: #dab8b7;
}

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
  border-radius: 8px;
  background-color: #7f545c;
}

@media screen and (max-width: 340px){
  .portada{
    padding-top: 45px;
  }
  .portada h1{
  font-size: 45px;
  }

  .portada p{
  font-size: 26x;
  }

  #number{
    width: 23%;
  }

  span{
  font-size: 35px;
}
}

@media (orientation: landscape){
  .portada{
    width: 70%;
    margin: auto;
    padding-top: 10px;
  }
  .portada h1{
  font-size: 30px;
}

.portada p{
  font-size: 15px;
}

}

@media screen and (min-width: 1024px){

  .portada{
    height: 80vh;
    padding-top: 30px;
}

.portada h1, .galeria h3{
  font-family: 'Breavenheart';
  font-size: 60px;
}

.portada p{
  font-size: 30px;
}
}