@media(max-width: 1120px){
    .header-container nav{
        padding-right: 80px;
    }

    #about .image-container img{
        left: 60px;
        width: 300px;
    }
    #about .image-container #blob{
        left: -30px;
        width: 400px;
    }
    #about .text-container{
        width: 70%;
    }
}

@media(max-width: 1030px){
    #about{
        height: 100%;
    }
    #about .container{
        flex-direction: column;
        padding: 56px 0;
        justify-content: center;
        align-items: center;
        gap: 34px;
        height: 100%;
        max-height: none;
    }
    #about .container .social-container{
        order: 3;
        height: 100%;
        max-height: 56px;
        flex-direction: row;
    }
    #about .container .image-container{
        order: 1;
        display: flex;
        position: relative;
        justify-content: center;
    }
    #about .container .image-container img{
        position: initial;
        width: 300px;
        transform: translate(40px);
    }
    #about .container .image-container #blob{
        left: -50%;
        right: -50%;
        top: -40px;
        width: 400px;
        margin: auto;
        padding: auto;
    }
    #about .container .text-container{
        order: 2;
    }
}

@media(max-width: 920px){
    .header-container nav{
        padding-left: 22px;
    }
}

@media(max-width: 750px){
    #contact .container{
        /* background: red; */
        padding: 0;
        margin: 0;
        width: 100%;
    }
    #contact .container .form-container{
        flex-direction: column;
        /* background: red; */
        width: 100%;
    }
    #contact .container .form-container form{
        /* background: red; */
        width: 100%;
        padding: 20px;
    }
    
    input{
        /* background: red; */
        min-width: 50px;
    }
    #contact .container .form-container .social-contact{
        width: 100%;
        padding: 24px 0;
    }
}

@media (max-width: 720px){
    .header-container nav{
        display: none;
    }
    .header-container .logo-container{
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #about .container {
        overflow-x: hidden;
    }
    #skills .container .strong-skills h3{
        font-size: 24px;
    }
    #skills .container .strong-skills .skills .skill{
        align-items: center;
    } 
    #skills .container .strong-skills .skills img{
        width: 50px;
    } 
    #skills .skill p{
        font-size: 12px;
    }
    
    #projects .project .project-container .project-img{
        width: 300px;
        height: 190px;        
    }
    #projects .project{
        gap: 8px;
    }
    #projects .project .text-container{
        gap: 8px;
    }
    #projects .project .text-container h4{
        font-size: 24px;
    }
    #projects .project .text-container h5{
        font-size: 16px;
    }
    #projects .project .text-container button{
        font-size: 18px;
        padding: 5px 10px;
    }
}

@media(max-width:500px){
    #skills{
        height: 100%;
    }
    #skills .container .strong-skills .skills{
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    #projects .project .project-container .project-img{
        width: 300px;
        height: 190px;        
    }
    #projects .project{
        gap: 8px;
        flex-direction: column;
        max-width: 300px;
    }
    #projects .project.even {
        flex-direction: column;
    }
    #projects .project.even .text-container{
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 8px;
    }
    #projects .project .text-container{
        gap: 8px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    #projects .project .text-container h4{
        font-size: 24px;
    }
    #projects .project .text-container h5{
        font-size: 16px;
    }
    #projects .project .text-container button{
        font-size: 18px;
        padding: 5px 10px;
    }

    .form-section{
        /* background: red; */
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    } 
}