@media(max-width: 767px){
    body{
        overflow-x: hidden;
        max-width: 100vw;
    }

    header{
        padding: 1.5rem; max-width: 100vw;
        height: 12vh;
    }

    section{
        padding: 0rem; max-width: 100vw;
    }

    .header-links{
        position: fixed;
        display: none; flex-direction: column;
        top: 12vh; left: 0; width: 100%;
        background: #000; color: #fff;
        filter: brightness(110%);
        padding: 1rem 1rem; min-height: 20vh;
    }

    .header-links a{
        font-size: 14px; font-weight: 600;
    }

    .header-links a:hover{
        border-bottom: none;
    }

    .header-links a.active{
        background: #111; border: none;
        border-radius: 12px; padding: 0.5rem;
        max-width: 90vw; filter: brightness(120%);
    } 

    .header-links.openManage{
        display: flex; flex-direction: column;
    }
    .bars-menu{display: block;}
    .bars-menu i{font-size: 24px;}

    .header-line{
        height: 2px; background: #333; display: block;
        width: 100%; max-width: 90vw; margin-bottom: 0.5rem;
    }

    .lang-button{
        display: none; 
    }

    /* HOME SECTION */
    .home{
        padding-top: 15vh; max-width: 100%;
    }

    .home-main{
        display: flex; flex-direction: column;
        gap: 4rem; padding-bottom: 10vh;
    }

    .home-info{
        width: 100%; max-width: 100%;
        display: flex; flex-direction: column; 
        align-items: flex-start; justify-content: flex-start;
    }

    .home-logo{
        display: flex; flex-direction: column;
    }

    .home-job{font-size: 14px; max-width: 170px; padding: 10px 12px;}
    .home-logo h1{font-size: 28px;}

    .home-info p{line-height: 1.2; width: 100%;}

    .home-buttons{padding-top: 0.5rem; padding-bottom: 0.5rem;}

    .home-image img{
        width: 45vw;
    }

    /* ABOUT */
    .about{
        display: flex; flex-direction: column;
        justify-content: center; align-items: center;
    }

    .about-logo{padding-top: 5vh; padding: 5vh 0.5rem}

    .about-main-text{width: 90%;}
    .about-main-info{
        padding: 0rem 1rem; max-width: 90%;
    }

    .about-info{
        display: flex; flex-direction: column;
        justify-content: center; width: 100%;
        justify-content: center;
    }

    .about-box-el h5{font-size: 16px;}
    .about-box-el p{font-size: 12px;}

    .about-box-el{
        width: 180px;
    }

    .about-main-boxes{
        display: flex; width: 100%;
        max-width: 100vw; padding: 0.5rem 1rem;
        gap: 0.5rem;
    }

    /* SKILLS */
    .skills-main{
        width: 100%; padding: 3rem 0; 
    }

    .skill-el{
        max-width: 100vw; width: 100%; 
        justify-content: space-between;
        gap: 1rem;
    }

    .skill-info{
        width: 600px;
    }

    .skill-box{
        margin-top: 20%; 
        max-height: 300px;  
    }

    /* TIME-LINE */
    .time-line-row{
        gap: 4px; 
    }

    .timeline-info-box{
        max-width: 200px; padding: 0;
        gap: 6px; 
    }

    .timeline-info{padding: 5px 10px;}
    .timeline-info h3{width: 100%; font-size: 16px; text-align: left;}

    .future-skills-box{
        max-width: 90vw; padding: 1rem;

    }

    .future-skills-box p{width: 100%;}


    .future-skills{
        display: grid; grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        width: 100%;
    }

    .projects-boxes{
        display: flex; flex-direction: column;
    }

    .projects-box{
        max-width: 75vw;
    }

    .dev-info-boxes{
        display: grid; max-width: 400px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .dev-state-container{
        padding: 1rem;
        display: grid; max-width: 350px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    /* RESPONSIVE */
    .design-main{
        display: flex; flex-direction: column;
    }

    .design-boxes{
        display: grid; max-width: 400px; padding: 0rem 0.5rem;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .design-image{
        width: 50vw;
    }

    .design-image img{
        width: 100%;
    }

    .design-container{
        width: 100%; max-width: 90vw;
        padding: 1rem 2rem;
    }

    .design-container-info{
        display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        width: 100%;
    }

    /* ABOUT PORTFOLIO */
    .portfolio-image{
        width: 90vw; height: 100%; 
        display: flex;
        align-items: center; justify-content: center;
    }

    .portfolio-image img{
        max-height: 40vh; width: 100%;
    }

    .portfolio-main-info{
        display: flex; flex-direction: column;
    }

    .portfolio-info-boxes{
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .portfolio-main{
        padding: 1.5rem; width: 100vw;
    }

    .portfolio-container{
        width: 100%; 
    }

    .portfolio-container-boxes{
        display: grid; width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    /* CONTACT ME */
    .contact-main{
        display: flex; flex-direction: column;
    }

    /* FOOTER */
    .footer-main-info{
        display: grid; width: 100%; gap: 2.5rem;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        padding: 0rem; align-items: flex-start;
        justify-content: flex-start;
    }

    .footer-el{
        padding: 0;
    }

    .footer-bottom-info-el{display: flex; flex-direction: column; align-items: flex-end;}
    .footer-bottom-info p{font-size: 12px;}
}