@media(max-width:1055px){
    .hoveredBtn{
        width: 80%;
    }
}


@media(max-width:600px){

    .headerController{
        grid-template-columns: 48% 1fr 14%;
    }

    .headerController .links{
        position: fixed;
        width: 0%;
        height: 100%;
        left: 0;
        top: 0;
        background: white;
        color: white;
        grid-template-columns: 1fr !important;
        grid-template-rows: 100px 100px 100px 100px 100px 100px;
        align-items: center;
        overflow: hidden;
        transition: all 300ms;
    }
    .hoveredBtn , .headerController .links button{
        margin-left: 9%;
        font-size: 22px; 
        color: white;
    }
    .hoveredBtn , .headerController .links li a {
        color: white;
    }
    #icon-menu{
        display: block;
        position: fixed;
        left: 91%;
        top: 2%;
    }

    .showMenu{
        width: 100% !important;
    }
    .showText{
        color: black !important;
    }
}