@media screen and (max-width: 1024px) {
    :root{
        font-size: 50%;
    }

    #about{
        font-size: 2rem;
    }

    #about #aboutme-text{
        width: 80%;
    }

    #skills #scroll-container-tools{
        grid-template-columns: repeat(3, 1fr);
    }

    #projects #slider-projects{
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width: 850px) {
    header{
        flex-direction: column;
        align-items: center;
    }

    header nav{
        height: auto;
        padding: 1rem;
    }
    header nav ul{
        justify-content: space-between;
        gap: 8rem;
    }

    #home{
        font-size: 3.6rem;

    }

    
    #skills #scroll-container-tools{
        grid-template-columns: repeat(2, 1fr);
    }

    #projects #slider-projects{
        padding: 1rem 2rem 8rem 2rem;
    }

    #projects .project .project-main{
        height: auto;
        width: auto;
    }

    #projects .project .project-main .project-image img{
        width: 218px;
        height: 110px;
    }

    main{
        height: auto;
    }

    footer{
        background-color: var(--bg-color-2);
        position: absolute;
        bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    :root{
        font-size: 35%;
    }

    #about{
        font-size: 3rem;
    }

    #home hgroup:hover #role span{
        transform: translateX(-5.5rem);
    }

    #experience{
        font-size: 3.6rem;
    }

    #experience #experience-container{
        max-width: 65%;
    }
}

@media screen and (max-width: 625px) {
    header nav ul{
        justify-content: space-between;
        gap: 1rem;
    }

    #about{
        font-size: 2.6rem;
    }
    

    #about #aboutme-text{
        width: 90%;
    
    }

    #projects #slider-projects{
        grid-template-columns:  1fr;
    }

    #experience{
        &::after{
            background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7) 70%, transparent 100%)
        }
    }
}

@media screen and (max-width: 480px) {
    :root{
        font-size: 30%;
    }

    header nav ul .navbar-item .section-button{
        font-size: 2rem;

    }

    
    #skills #scroll-container-tools{
        grid-template-columns: repeat(1, 1fr);
    }

    #experience{
        &::after{
            background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7) 80%, transparent 100%)
        }
    }
}

@media screen and (max-width: 380px) {
    :root{
        font-size: 20%;
    }

    #about{
        font-size: 4rem;
    }

    #skills #button-toggle-skills{
        bottom: 100px;
        right: 100px;
    }

    #experience{
        font-size: 5.4rem;
        &::after{
            background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7) )
        }
    }

    #experience #experience-container{
        max-width: 85%;
        right: auto;
        gap: 10rem;
    }
}