/*Importo fuentes*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&family=Raleway:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');

header {
font-family: 'Raleway', sans-serif;
font-size: 2.8vh;
color: black;
text-align: center;
}

html{
    background: rgb(37,198,198);
background: linear-gradient(90deg, rgba(37,198,198,0.969625350140056) 1%, rgba(15,218,198,1) 58%, rgba(0,212,255,1) 96%);
}

h1 {
    font-family: 'Playfair Display', sans-serif;
    font-size: 10.5vh;
    color: whitesmoke;
    font-weight: 600;
    text-align: center;
    text-shadow: black 1px 1px;
}

main {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 2.3vh;
}

/*Organizo la barra de navegación*/
nav {
    font-family: 'Courier New', Courier, monospace;
    font-size: 3.2vh;
    display: flex;
    justify-content: space-around;
}


/*Elaboro botón N1*/
/* From uiverse.io by @gagan-gv */
.button {
    width: 7vw;
    bottom: -4vw;
    height: 4.6vh;
    font-size: 1.2vw;
    background: transparent;
    border: none;
    position: relative;
    color: black;
    z-index: 1;
}
.button::after,
.button::before {
    content: '';
    position: absolute;
    bottom: 0vw;
    right: 0;
    z-index: -99999;
    transition: all .4s;
   }
.button::before {
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background: #f39ff3;
    border-radius: 0.7vw;
   }
.button::after {
    transform: translate(0.7vw, 0.7vw);
    width: 2.6vw;
    height: 5.5vh;
    background: #f39ff3;
    backdrop-filter: blur(5px);
    border-radius: 3.7vw;
   }
.button:hover::before {
    transform: translate(5%, 20%);
    width: 110%;
    height: 110%;
   }
.button:hover::after {
    border-radius: 0.7vw;
    transform: translate(0, 0);
    width: 100%;
    height: 100%;
   }
.button:active::after {
    transition: 0s;
    transform: translate(0, 5%);
   }

/*Elaboro botón N2*/
/* From uiverse.io by @gagan-gv */
.button {
    width: 7vw;
    bottom: -4vw;
    height: 4.6vh;
    font-size: 1.2vw;
    background: transparent;
    border: none;
    position: relative;
    color: #f0f0f0;
    z-index: 1;
   }
   
   .button::after,
   .button::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -99999;
    transition: all .4s;
   }
   
   .button::before {
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background: #28282d;
    border-radius: 0.7vw;
   }
   
   .button::after {
    transform: translate(0.7vw, 0.7vw);
    width: 2.6vw;
    height: 5.5vh;
    background: #f10acb15;
    backdrop-filter: blur(5px);
    border-radius: 3.7vw;
   }
   
   .button:hover::before {
    transform: translate(5%, 20%);
    width: 110%;
    height: 110%;
   }
   
   .button:hover::after {
    border-radius: 0.7vw;
    transform: translate(0, 0);
    width: 100%;
    height: 100%;
   }
   
   .button:active::after {
    transition: 0s;
    transform: translate(0, 5%);
   }


/* A continuación, se establece estructura Flexbox para contenido*/

.presentacion {
/*Flexbox*/
display: flex;
justify-content: center;
align-items: center;
width: 70vw;
margin: auto;
}

.informacion {
    width: 90%;
}

.foto {
    width: 85%;
}

.foto img {
    width: 70%;
}

/* Formato de cabecera */
header {
    width: 100vw;
    background-color: aliceblue;
    position: fixed;
    top: 1;
    left: 0;
}

/*Formato de pie de página*/
footer {
    width: 100vw;
    background-color: aliceblue;
    text-align: center;
    font-size: 1.6vmin;
    position: fixed;
    bottom: 2%;
    height: 3.2vh;
    left: 0%;
}