.body{
    background-color:  #C39BD3 ;
}

.navegacion{
    display:flex;
    justify-content: space-around;
    align-items: center;

    position: sticky;
    top: 0;
}
    
/* ---------------------------- From uiverse.io  ---------------------*/
button {
    padding: 1.3em 3em;
    font-size: 2vh;
    font-family: 'Times New Roman';
    text-transform: uppercase;
    text-decoration: blink ;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: aliceblue;
    background-color: #8459D3;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
  }
  
button:hover {
    background-color: white;
    box-shadow: 0px 15px 20px (46, 229, 157, 0.4);
    color: #8459D3;
    transform: translateY(-7px);
}
  

button:active {
    transform: translateY(-1px);
}

/* ---------------------------- From uiverse.io  ---------------------*/
.navegacion h1{ 
   
    text-align: center;
    color: #8459D3 ;
    font-size: 5vmax;
    background-attachment: white;
}

.principal {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 90%;
    
    gap: 5%;
} 

.contenedor_foto{ 
    width: 50%;
    height:auto;
}

.foto{
    max-width: 100%;
    height: auto;
 margin-top: 4%;
    margin-left: 5vw;
}

.principal p{ 
   
    color: #4B0BC4;
    letter-spacing: normal;
    text-align: justify;
    font-size: 1.85vmax;
    padding-top:0%;
    margin-left: 2vw;
    width: 50%;
    /* height:auto; */
    margin-top: 2%;
   
}

.abajo {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

   position: sticky;
   bottom: 0;

}
.footer{ 
  /*   max-width: 100%; */
    /* height: auto; */
    color:white;
    text-align: center;
    font-size: 4vmax;
    background-color:#8459D3;
    width: 100%;
    margin: 0;
}