/*fuentes para las letras */
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
/*color de fondo*/
body{background-color: bisque;
}


/*Caracteristicas de la letra */
h1{
    font: size 60px;
    text-align:center;
    color:black;
    font-family: "Libre Bodoni", serif;}

    .inicio{
        display:flex;/* Flexibiliza el contenedor */
        flex-direction: row; /* Alineado */
        justify-content: space-between; /* Separa los ítems */
        margin-top: 9vh;
        font-family: "Libre Bodoni", serif;/* Fuente de la l */
        align-items: center;
    }
    /* botones personalizados */

    button {
        transform: rotate(-25deg) skew(25deg);
        transform-style: preserve-3d;
        position: relative;
        list-style: none;
        width: 100px;
        height: 32px;
        border: none;
        background: transparent;
        font-family: inherit;
       }
       
       button:before {
        content: '';
        position: absolute;
        bottom: -10px;
        left: -5px;
        width: 100%;
        height: 10px;
        background: #2a2a2a;
        transform: skewX(-41deg);
       }
       
       button:after {
        content: '';
        position: absolute;
        top: 5px;
        left: -9px;
        width: 9px;
        height: 100%;
        background: #2a2a2a;
        transform: skewY(-49deg);
       }
       
       button span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #2a2a2a;
        color:bisque;
        font-size: 25px;
        transition: 1.1s ease-out;
       }
       
       button:hover span {
        z-index: 1000;
        transition: .3s;
        color:bisque;
       }
       
       button:hover span:nth-child(5) {
        transform: translate(40px, -40px);
        opacity: 1;
       }
       
       button:hover span:nth-child(4) {
        transform: translate(30px, -30px);
        opacity: .8;
       }
       
       button:hover span:nth-child(3) {
        transform: translate(20px, -20px);
        opacity: .6;
       }
       
       button:hover span:nth-child(2) {
        transform: translate(10px, -10px);
        opacity: .4;
       }
       
       button:hover span:nth-child(1) {
        transform: translate(0px, 0px);
        opacity: .2;
       }
       
       button:active span:nth-child(5) {
        transform: translate(20px, -20px);
        opacity: 1;
       }
       
       button:active span:nth-child(4) {
        transform: translate(15px, -15px);
       }
       
       button:active span:nth-child(3) {
        transform: translate(10px, -10px);
       }
       
       button:active span:nth-child(2) {
        transform: translate(5px, -5px);
       }
       
       button:active span:nth-child(1) {
        transform: translate(0px, 0px);
       }
       
       button:nth-child(1):hover span {
        background: black;
       }

/* Tamaño de la imagen */
img{
    width: 60%;

}
/* Posición de la foto y el texto */
.presentacion{

    width: 70vw;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content:space-between;
    align-items: center;
    font-family: 'Varela Round', sans-serif;
    margin: auto;
    margin-top: 10vh;
}

    /* Formato de cabecera */
header{

    width: 100%;
    background-color:black;
    color: bisque;
    font-family: "Libre Bodoni", serif;
    position: fixed;
    top:1vh;
    display: flex;
    justify-content: center;
}

    /* Formato del pie de pagina */
footer{
  width: 100%;
  background-color:black;
  color: bisque;
  font-family: "Libre Bodoni", serif;
  position: fixed;
  bottom: 1vh;
  display: flex;
  justify-content: center;
      }