/* Formatos para página principal */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@700&display=swap');



*{
    margin: 0;
    padding: 0;
}

.cuerpo{
    background-color:#556b2f ;
    width: 100%;
    height: 100vh;
}


/* css exclusivo botones */
.botonera{
    padding-top:2%;
    height: 5vh;
    width: 50%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.custom-btn {
/*alto y ancho*/
    width: 150px;
    height: 40px;

/*formato del texto*/
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;   
    
    outline: none;

    display: inline-block;
    justify-content: space-around;
    flex-direction: row;
    align-content: space-around;
   }
   
   .btn-1 {
    background: #496D4C;
    background: linear-gradient(0deg, #496D4C 0%, #314F34 100%);
    border: none;
   }
   
   .btn-1:hover {
    background: rgb(0,3,255);
    background: linear-gradient(0deg, #607E63 0%, #77977A 100%);
   }

.titulos{
/*alto y ancho*/
    margin-top: 5vh;
    margin-bottom: 5vh;
    height: 25vh;
    width: 100%;
    background-color: #1d4d22;
    padding-bottom: 2vh;
    line-height: 0,2px;
 

/*formato del texto*/
    font-size: 70px;
    text-align: center;
}

.hearts {
    >.particle {
       opacity:0;
       position: absolute;
       background-color:rgba(204,42,93,1);
       animation: hearts 3s ease-in infinite;
       &::before, &::after {
          position: absolute;
          content: '';
          border-radius:100px;
          top:0px;
          left:0px;
          width:100%;
          height:100%;
          background-color:rgba(204,42,93,1);
       }
       &:before {
          transform:translateX(-50%);
       }
       &:after {
          transform:translateY(-50%);
       }
    }
 }

@keyframes hearts {
0% {
 opacity: 0;
 transform:translate(0, 0%) rotate(45deg);
}
20% { 
 opacity: 0.8;
 transform:translate(0, -20%) rotate(45deg);
}
100% {
 opacity: 0;
 transform:translate(0, -1000%) rotate(45deg); 
}
}

#tituloprinuno {
    font-family: 'Epilogue', sans-serif;
    color: rgb(225, 5, 89);
    letter-spacing: 0.3em;
}

#tituloprindos {
    font-family: 'Homemade Apple', cursive;
    color: rgb(255, 159, 196);
 
}
@keyframes hearts {
    0% {
       opacity: 0;
       transform:translate(0, 0%) rotate(45deg);
    }
    20% {
       opacity: 0.8;
       transform:translate(0, -20%) rotate(45deg);
    }
    100% {
       opacity: 0;
       transform:translate(0, -1000%) rotate(45deg);
    }
 }

.info{
 /*alto y ancho*/
    height: 40vh;
    width: 80%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
}

.texto{
/*alto y ancho*/
    height: 100%;
    width: 40%;

/*formato del texto*/
    font-size: 25px;
    font-family: 'Rubik', sans-serif;
    color: rgb(236, 236, 165);
    margin-left: 5em;
    margin-right: 2em;
}

.foto {
/*alto y ancho*/
    width: 25%;
    height: 70%;
}

.foto img{
/*ancho*/
    width: 100%;
}