@media(max-width:950px){

    .nav-menu{
        position:absolute;

        top:72px;

        right:0;

        width:100%;

        background:#081523;

        border-bottom:1px solid #183557;

        padding:20px 5%;

        display:none;

        flex-direction:column;

        align-items:flex-start;

        gap:15px;
    }


    .nav-menu.open{
        display:flex;
    }


    .mobile-menu-button{
        display:block;

        margin-right:auto;
    }


    .hero-grid{
        grid-template-columns:1fr;

        gap:50px;
    }


    .hero{
        min-height:auto;

        padding-top:120px;

        padding-bottom:75px;
    }


    .code-window{
        max-width:650px;

        width:100%;

        margin:auto;
    }


    .about-grid{
        grid-template-columns:1fr;

        gap:30px;
    }


    .experience-list{
        grid-template-columns:repeat(2,1fr);
    }


    .classes-box{
        grid-template-columns:1fr;

        gap:25px;
    }


    .contact-layout{
        grid-template-columns:1fr;
    }

}


@media(max-width:650px){

    .container{
        width:92%;
    }


    .navbar{
        min-height:64px;
    }


    .nav-menu{
        top:64px;
    }


    .logo{
        font-size:14px;
    }


    .language{
        padding:3px 7px;

        font-size:9px;
    }


    .hero{
        padding-top:100px;

        padding-bottom:60px;
    }


    .hero h1{
        font-size:40px;
    }


    .hero h2{
        font-size:15px;
    }


    .hero-content > p{
        font-size:13px;
    }


    .hero-buttons{
        display:grid;

        grid-template-columns:1fr;
    }


    .hero-buttons .button{
        width:100%;
    }


    .hero-mini-info{
        gap:18px;

        justify-content:space-between;
    }


    .hero-mini-info strong{
        font-size:17px;
    }


    .hero-mini-info span{
        font-size:9px;
    }


    .code-content{
        padding:19px 15px;

        font-size:10px;

        overflow-x:auto;
    }


    .section{
        padding:70px 0;
    }


    .section-header{
        margin-bottom:28px;
    }


    .section-header h2,
    .classes-box h2{
        font-size:27px;
    }


    .about-text{
        font-size:13px;
    }


    .about-code{
        padding:18px;

        font-size:10px;
    }


    .experience-list{
        grid-template-columns:1fr 1fr;
    }


    .experience-item{
        min-height:65px;

        font-size:11px;
    }


    .achievement-grid{
        grid-template-columns:1fr;
    }


    .classes-box{
        padding:26px 20px;
    }


    .classes-box .button{
        width:100%;
    }


    .form-row{
        grid-template-columns:1fr;
    }


    .contact-form{
        padding:20px;
    }


    .contact-form .button{
        width:100%;
    }


    .footer-content{
        flex-direction:column;

        text-align:center;

        gap:5px;
    }

}


@media(max-width:420px){

    .hero h1{
        font-size:36px;
    }


    .languages{
        gap:4px;
    }


    .experience-list{
        grid-template-columns:1fr;
    }


    .hero-mini-info{
        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:8px;
    }


    .hero-mini-info div{
        text-align:center;
    }

}