@media(min-width: 64em){
    h1{
        font-size: 2.6rem;
        transform: translate(85%, -100%);
        margin-right: 10px;
    }

    header .top-header{
        height: 52px;
    }

    header .top-header .languages{
        order: 3;
    }

    header .top-header .menu{
        flex-direction: row;
        order: 2;
    }

    header .top-header .menu .hamburger{
        display: none;
    }

    header .click{
        margin-bottom: 2rem;
    }

    .top-header .menu nav{
        top: 0;
        transform: translateX(-50%);
        width: 80%;
        max-width: 64em;
        background-color: transparent;
        opacity: 1;
    }

    .top-header .menu nav ul{
        width: 100%;
    }

    nav ul li{
        width: 25%;
    }
    
    nav ul li a{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        color: rgb(255, 102, 36);
        padding: 0 25%;
        margin: 0;
    }

    .mid-header > h2{
        transform: translate(85%, -100%);
        margin-right: 10px;
    }

    .container .spinners{
        position: absolute;
        left: 48%;
        width: 3.4rem;
        height: 3.4rem;
    }

    main h2, .latest-works h2{
        font-size: 1.8rem;
    }

    .latest-works .slider figure{
        width: 300px;
    }

    .slider figure .carrousel-images .recent-project-images-overlay{
        height: 96.8%;
    }

    main .content-projects .grid{
        grid-template-columns: repeat(5, minmax(100px, 1fr));
        grid-template-rows: repeat(9, minmax(200px, 1fr));
        justify-items: center;
        max-height: 1900px;
        grid-gap: 5px;
    }

    main .content-projects .grid figure{
        box-shadow: none;
    }

    main .content-projects .grid .salmon{
        grid-column: 1/3;
        grid-row: 1/3;
        
    }

    main .content-projects .grid .wsw{
        grid-column: 1/6;
        grid-row: 8/10;
        
    }

    main .content-projects .grid .snake{
        grid-column: 3/4;
        grid-row: 4/5;
        
    }

    main .content-projects .grid .to-do-list{
        grid-column: 4/6;
        grid-row: 6/8;
        
    }

    main .content-projects .grid .calculator{
        grid-column: 3/4;
        grid-row: 5/6;
        
    }

    main .content-projects .grid .prophets{
        grid-column: 3/6;
        grid-row: 1/4;
        
    }

    main .content-projects .grid .bearded{
        grid-column: 1/4;
        grid-row: 6/8;
        
    }

    main .content-projects .grid .locked{
        grid-column: 1/3;
        grid-row: 3/6;
        
    }

    main .content-projects .grid .worldly{
        grid-column: 4/5;
        grid-row: 4/6;
        
    }

    main .content-projects .grid .brazilian{
        grid-column: 5/6;
        grid-row: 4/6;
        
    }

    .grid figure .project-images-overlay{
        border-radius: 5px;
    }

    .grid figure picture img{
        width: 100%;
        border-radius: 5px;
    }

    .grid figure .project-images-overlay h3{
        font-size: 1.5rem;
    }

    .grid figure .project-images-overlay h4{
        font-size: 1.2rem;
    }

    .grid figure .project-images-overlay h3,
    .grid figure .project-images-overlay h4{
        opacity: 0;
        margin-top: 20px;
        transition: 
            opacity 300ms ease-in,
            margin-top 300ms ease-in !important;
    }
    
    .grid figure .project-images-overlay a{
        font-size: 1.2rem;
        padding: 5px 10px;
        border-radius: 5px;
        opacity: 0;
        margin-bottom: 20px;
        transition: 
            opacity 300ms ease-in,
            margin-bottom 300ms ease-in !important;
    }
    .grid figure .project-images-overlay .show{
        opacity: 1;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    .grid figure .project-images-overlay a:hover{
        background-color: rgb(253, 80, 0);
    }

    figure .carrousel-images .recent-project-images-overlay a:hover{
        background-color: rgb(253, 80, 0);
    }
}