body{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    background: linear-gradient(#8bdbd7, rgb(176, 217, 253), #8bdbd7 );
}



/* ------------HEADER, LOGO Y MENU---------*/

header{    
    padding: 20px;   
    font-size: 22px;
    font-weight: bold;
    height: 160px;
    margin-top: 0%;
    display: flex;
    justify-content: space-between;
}

#portfolio{  
    font-size: 35px;
}

.cohete:hover{
    transform: scale(1.4) rotate(20deg);  
}

nav{
    position: absolute;
    top: 40px;
    right: 0;     
}

    nav li{
        display: inline;
        margin: 0px 0px 0px 25px;
        padding: 10px;
    }
    
    nav a{
        text-transform: uppercase;
        color: black;
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
    }
    
    nav a:hover{
        color: #199ec7;
        text-decoration: underline;  
   }




    /* --------------SKILLS, HOBBIES Y FORMACION---------------------*/ 
    .skills{
        width: auto;
        height: 500px;        
        padding: 40px 300px 80px 230px;
    }

    #titulo-skills{
        width: auto;              
        padding: 40px 70px 10px 70px;
    }

    .skills li{
        display: inline-block;
        text-align: center;
        width: 250px;
        vertical-align: top;
        margin: 15px 1.5%;
        padding: 20px 10px;
        box-sizing: border-box;

        border-color: rgb(134, 141, 140);
        border-width: 4px;
        border-style: solid;
    
        border-radius: 10px;

        transition: 1s all;
    }

    .skills li:hover{
        background: #9ea5a2;
        transform: scale(1.1) rotate(1.2deg);
    }


    .hobbies{
        width: auto;
        height: 400px;        
        padding: 40px 300px 80px 300px;
    }
        .hobbies li{
        display: inline-block;
        text-align: center;
        width: 40%;
        vertical-align: top;
        margin: 15px 1.5%;
        padding: 20px 10px;
        box-sizing: border-box;

        border-color: rgb(46, 160, 107);
        border-width: 4px;
        border-style: solid;
    
        border-radius: 10px;

        transition: 1s all;
    }

    .hobbies li:hover{
        background: #3bac73;
        transform: scale(1.1) rotate(1.2deg);
    }

    .formacion{
        width: auto;
        height: 730px;        
        padding: 40px 300px 80px 300px;
    }

    .formacion li{
        display: inline-block;
        text-align: center;
        width: 40%;
        vertical-align: top;
        margin: 15px 1.5%;
        padding: 20px 10px;
        box-sizing: border-box;

        border-color: rgb(38, 48, 189);
        border-width: 4px;
        border-style: solid;
    
        border-radius: 10px;

        transition: 1s all;
    }

    .formacion li:hover{
        background: #4da5c0;
        transform: scale(1.1) rotate(1.2deg);
    }

    


    /*---------------Tarjetas----------------*/

    .proyectos{
        width: auto;
        height: auto;
        margin: 0px;
        padding: 70px;
        clear: right;           
    }

    .proyectos h1{
        width: auto;
        height: auto;
        padding: 40px 250px 10px 250px;
    }
    
    .proyectos li{
        display: inline-block;
        text-align: center;
        width: 42%;
        vertical-align: top;
        margin: 15px 1.5%;
        padding: 20px 10px;
        box-sizing: border-box;
    
        border-color: #424040;
        border-width: 4px;
        border-style: solid;
    
        border-radius: 10px;

        transition: 1s all;
    }
        
    .proyectos li:hover{
        background: #4da5c0;
        transform: scale(1.1) rotate(1.2deg);
    }
    
    .imagen-proyecto{
        border-radius: 20px;
    }



   
    /*----------------Footer-------------------*/

    footer{
        text-align: center;
        padding: 40px;               
    }
    
    .copyright, .desarrollo{
        color: black;
        font-size: 16px;
        margin: 20px;
    }