html {
    height: 100%;
    margin: 0;
}

body {
    margin: 0px;
    background-color: #DDEB9D;
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    min-height: 100vh;
    margin: 0;
}

a {
    color: #3E3F5B;
    text-decoration: none;
}

a:visited {
    color: #3E3F5B;
}



/* navbar */

.nav-bar-container {
    margin: 0px;
    display: flex;
    height: 70px;
    background-color: #A0C878;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #3E3F5B;
    position: fixed;
    z-index: 1000;
}

.logo-nombre {
    display: flex;
    margin-left: 50px;
    width: 130px;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8rem;
}

.nav-opciones {
    display: flex;
    width: 320px;
    min-width: 260px;
    color: #3E3F5B;
    margin-right: 50px;
    margin-left: 20px;
    justify-content: space-between;
}

.menu-hamburguesa {
    display: none;
    position: relative;
    margin-right: 60px;
    margin-left: 40px;
}

.menu-hamburguesa .icono {
    font-size: 30px;
    cursor: pointer;
}

.menu-hamburguesa .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #333;
    padding: 10px;
}

.menu-hamburguesa .dropdown a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 5px 10px;
}

.menu-hamburguesa:hover .dropdown {
    display: block;
}

@media (max-width: 600px) {
    .nav-opciones {
        display: none;
    }

    .menu-hamburguesa {
        display: block;
    }
}



/* footer */

.footer {
    margin-top: 30px;
    width: 100%;
    color: #3E3F5B;
}

hr {
    border: none;
    border-top: 1px solid #3E3F5B;
}



/* pagina principal */

.pagina-principal {
    margin-top: 110px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #343545;
}

.intro-img {
    border-radius: 50%;
    
}

.sobre-mi {
    margin-bottom: 30px;
    text-align-last: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sobre-fabo {
    width: 100%;
    padding: 25px;
    background-color: #BDE8B5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}

.sobre-michas {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.micha-foto {
    height: 200px;
}

.fila {
    display: flex;
    justify-content: space-around;
    margin-top: 35px;
}

.desc-michas {
    font-size: 13px;
}

@media (max-width: 850px) {
    .fila {
        justify-content: space-around;
        margin-top: 35px;
        flex-direction: column;
    }

    .desc-michas {
        margin-bottom: 40px;
    }
}



/* contacto */

#pagina-contacto {
    flex: 1;
}

.contenido-contacto {
    display: flex;
    width: 60%;
    background-color: #99D192;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    border-radius: 10px;
    margin: 100px auto;
    min-width: 400px;
}

#pagina-contacto p {
    width: 75%;
    text-align: center;
}



/* habilidades */

#pagina-habilidades {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 110px;
}

.habilidades {
    display: flex;
    flex-direction: column;
    width: 60%;
}

.habilidad-foto-izquierda {
    float: left;
    margin-right: 30px;
    height: 150px;
}

.habilidad-foto-derecha {
    float: right;
    margin-left: 30px;
    height: 150px;
}

.habilidad {
    margin-bottom: 30px;
    min-width: 380px;
}

.habilidad > p {
    text-align: justify;
}

.habilidad > h3 {
    margin-top: 0px;
    margin-bottom: 17px;
}



/* resumen */

#pagina-resumen {
    margin-top: 110px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.educacion {
    background-color: #E3CA8D;
    width: 55%;
    border-radius: 5%;
    padding-bottom: 10px;
    min-width: 350px;
}

.exp-lab {
    background-color: #689B8A;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 55%;
    border-radius: 5%;
    padding-bottom: 10px;
    min-width: 350px;
}

.proyectos {
    background-color: #8A68A1;
    width: 55%;
    border-radius: 5%;
    padding-bottom: 10px;
    min-width: 350px;
}

ul {
    margin-left: 15px;
    margin-right: 30px;
}



/* easter egg */

#bachicha-egg {
    margin-top: 80px;
}