/* hoja de estilos */

/* tipografias */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Raleway:ital,wght@1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Inter:wght@600&family=Raleway:ital,wght@1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300&family=Inter:wght@600&family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');
*{
    box-sizing: border-box;
}
body{
    /* caracteristicas que le aplico a todo */
    background-color:#40848a ;
    width: 100%;
    margin: 0;
    
}
.header{
    /* caracteristicas cabecera */
    
    width: 100%;
    height: 4vh;
    background-color: #5c8b8f;
    position: fixed;
    top: 0;
    

}

.header p{
    margin: 0;
    padding: 4px;
    font-size: 2vmin;
    font-family: 'Roboto Mono', monospace;
}

.flex-container{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: auto;
}

h1{
 /* caracteristicas del titulo */
        font-family: 'Raleway', sans-serif;
        font-size: 9vmin;
        text-align: center;
        position: relative;
        margin: auto;
        top: 4vh;
}

.presentacion{ 
    /* caracteristicas de la caja del manu */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw;
    width: 100%;
    /* height: 100vh; */

}

img{
    /* caracteristicas de mi imagen */
    width:23vw;
    height: auto;
    margin: auto;
    display: block;
    background-color: black;
    margin-top: 7vh;
    }
.foto{
     /* caracteristicas de la caja de mi imagen */
        top: 5vh;
        bottom: 2vh;
        right: 50vw;
     }
        
a{
            /* caracteristicas de los botones */
            font-family:  'Barlow Condensed', sans-serif;
            font-size: 4vmin;
            background-color:#285155;
            text-decoration: none;
            margin-top: 3vh; 
            margin-left: 2vw;
            padding: 1vmin 4vmin;
 }
a:link{
            /* color del boton al pararme sobre el */
            color:rgb(169, 192, 161);
        
     }
a:hover{
            /* color fondo del boton al pararme sobre el */
            background-color: beige;
        }
a:active{
            /* color texto del boton al hacer click */
            color: rgb(30, 57, 68);
        }
a:visited{
    color:rgb(169, 192, 161) ;
}

.navegador{
             /* caracteristicas de la caja de los botones */
            position: relative;
            top: 1vh;
            right: 1vw;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
.texto{ 
    /* caracteristicas de mi texto de presentacion */
    font-family: 'Dosis', sans-serif;
    font-size: 5vmin;
    text-align: left;
    display:inline-block;
    top:2px;
}

.footer{
    /* caracteristicas pie de pagina */
    font-size: 2vmin;
    width: 100vw;
    height: 4vh;
    background-color: #5c8b8f;
    position: fixed;
    bottom: 0;
    font-family: 'Roboto Mono', monospace;
    padding: 4px;
    
}