/* ESTE ES EL FORMATO DE LA PAGINA */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');

/* FORMATO UNIVERSAL PARA LA PAGINA   */
*{
    margin: 0;
    padding: 0;
    font-size: 1.5vmax;
}

body{
    background-color: #f0ffec;
}

header{
    width: 100vw;
    position: fixed;
    top: 0;
    font-weight: 1000;
    text-align: center;
    font-size: 1.15rem;
    font-style: oblique;
    letter-spacing: 0.33vmax;
    color: black;
    background-color: rgb(101, 241, 101);
    animation: header 1.7s ease;
}

@keyframes header {
    0%{
        transform: translateY(-10vh);
        opacity: 0;
    }
    100%{
    }
}

/* nav */
.navegador{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: stretch;
    align-items: center;
    width: 75vw;
    height: 15vh;
    margin: auto;
    background-color: rgba(147, 255, 147, 0.418);
    border-style: dashed;
    border-radius: 3%;
    margin-top: 7vh;
    animation: nav 1.5s ease;
}

.navegador a button{
    font-size: 1.1vmax;
}

 @keyframes nav {
    0%{
        transform: scale(0);
        opacity: 0;
    }
    50%{
        transform: scale(1.05);
        opacity: 0.9;
    }
    100%{   
    }
 }

/* TITULO */
h1{
    text-align: center;
    color: rgb(33, 56, 33);
    font-size: 3vmax;
    text-decoration: underline;
}

/* MAIN */
.presentacion{
    height: 75.5vh;
    width: 77vw;
    display: flex;
    margin: auto;
    justify-content: space-around;
    align-items: center;
}

 /* IMG */
.foto_personal{
    width: 39%;
    border: 10px solid rgb(111, 168, 131);
    border-style: outset;
    animation: imagen 1.9s ease;
}

.foto_personal img{
    width: 100%;
}

@keyframes imagen {
    0%{
        transform: translateX(-45vw);
        opacity: 0;
    }
    100%{
    }
}

/* ACA ESTA EL P */
.texto{
    width: 49%;
    font-size: 1vmax;
    font-family: Roboto;
    text-align: justify;
    color: rgb(0, 71, 0);
}

.texto p{
    animation: texto 1.7s ease;
}

@keyframes texto {
    0%{
        transform: translateX(250px);
        opacity: 0;
    }
    100%{
    }   
}

/* PIE DE PAGINA */
footer{
    width: 100vw;
    position: fixed;
    bottom: 0;
    font-weight: 1000;  
    font-style: italic ;
    text-align: center;
    font-size: 1.4vmax;
    letter-spacing: 0.3vmax;
    color: black;
    background-color: rgb(101, 241, 101);
    animation: footer 1.7s ease;
}

@keyframes footer {
    0%{
        transform: translateY(10vh);
        opacity: 0;
    }
    100%{
    }
}

/* A PARTIR DE ACA ESTA LA ANIMACION DE LOS LINKS */
button {
    padding: 1.3em 3em;
    font-size: 0.7vmax;
    text-transform: uppercase;
    letter-spacing: 0.2vmax;
    font-weight: 545;
    color: #000;
    background-color:#acffba;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.37);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
  }
  
  button:hover {
    background-color: #23c483;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
  }
  
  button:active {
    transform: translateY(-1px);
  }

  /* ANIMACION DEL FONDO */

.burbujas{
    display: flex;
}

.burbuja:nth-child(1){
    position: absolute;
    bottom: 0;
    left: 12%;
    background-color: rgb(0, 255, 34);
    height: 4vmax;
    width: 4vmax;
    border-radius: 50%;
    z-index: -0.5;
    animation: circle 4s linear infinite;
}

.burbuja:nth-child(2){
    position: absolute;
    bottom: 0;
    right: 35%;
    background-color: rgb(0, 255, 34);
    height: 5vmax;
    width: 5vmax;
    border-radius: 50%;
    z-index: -1;
    animation: circle 8s linear infinite;
}

.burbuja:nth-child(3){
    position: absolute;
    bottom: 0;
    right: 10%;
    background-color: rgb(0, 255, 34);
    height: 3vmax;
    width: 3vmax;
    border-radius: 50%;
    z-index: -1;
    animation: circle 2.5s linear infinite;
}

.burbuja:nth-child(4){
    position: absolute;
    bottom: 0;
    right: 96%;
    background-color: rgb(0, 255, 34);
    height: 7vmax;
    width: 7vmax;
    border-radius: 50%;
    z-index: -1;
    animation: circle 10s linear infinite;
}

.burbuja:nth-child(5){
    position: absolute;
    bottom: 0;
    right: 53%;
    background-color: rgb(0, 255, 34);
    height: 4.5vmax;
    width: 4.5vmax;
    border-radius: 50%;
    z-index: -1;
    animation: circle 5s linear infinite;
}

.burbuja:nth-child(6){
    position: absolute;
    bottom: 0;
    right: 65%;
    background-color: rgba(0, 255, 34, 0.45);
    height: 7vmax;
    width: 7vmax;
    border-radius: 50%;
    z-index: 0;
    animation: circle 6.5s linear infinite;
}

.burbuja:nth-child(7){
    position: absolute;
    bottom: 0;
    left: 93%;
    background-color: rgba(0, 255, 34, 0.5);
    height: 7vmax;
    width: 7vmax;
    border-radius: 50%;
    z-index: -1;
    animation: circle 15s linear infinite;
}

@keyframes circle {
    0%{
        transform:translateY(0);
        opacity: 0.1;
    }
    50%{
        transform: translateY(-400px);
        opacity: 65%;
    }
    100%{
        transform: translateY(-800px);
        opacity: 0;
    }
}

@media screen and (max-width: 1024px) {
    h1{
        font-size: 1em;
    }
    
}