/*##################################################################################################
################################        MEDIA QUERIES    MAX 600    ###############################
###################################################################################################*/

@media(max-width: 600px)
{

    /************************** HEADER ***********************************************************/

    header{
        padding: 0.5rem 5rem;
        gap: 8rem;
        width: 80%;
    }

    header .logo{
        display: none;
    }

    #toggle_btn {
        display: block;
    }

    .nav-links{
        position: absolute;
        top: 100%;
        margin-top: 1rem;
        width: 100%;
        padding: 1rem;
        color: white;
        display: flex;
        flex-direction: column;
        text-align: center;
        background: rgba(0,0,0,0.9);
        border-radius: 3rem;
        display: none;
    }

    .nav-links li{
        margin-top: 1.5rem;
        padding: 1rem;
    }

    .nav-links.active{
        display: block;
    }

    /************************************ DIVERS ********************************************/

    .section-title{
        font-size: 1.5rem;
    }


    /************************************ ABOUT SECTION ************************************/

    .about-container img{
        width: 50vw;
    }

    .info-box h1{
        font-size: 1.5rem;
        padding-bottom: 1rem;
    }

    .info-box span{
        font-size: 1.5rem;
        font-weigth: 1000;
        padding-bottom: 1rem;
    }

    .about .socials a{
       color: black;
       width: 1vw;
       padding: 1rem;
    }

    .input-box input{
        padding: 0.5rem 3rem;
        width: 80%;
        font-size: 1.5rem;    
    }



    .grid-card img{
        width: 15vw;
        float: left;
        margin-right: 1rem;
    }



    .input input::placeholder{
        font-size: 1.5rem;
    }

    /*#######################################################################################################
######################                    COMPETENCES                 ###################################
########################################################################################################*/

.typerating{
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 1rem;
    color: black;
    font-weight: 600;
    padding: 1rem;
}

.typerating img{
    width: 30vw;
}

.qualifications{
    flex-direction: row;
}


    /********************************* FOOTER **********************************************/

    footer ul{
        gap: 1rem;
    }
}