@media only screen and (max-width: 640px) {
    header {
        flex-direction: column;
        height: 20vh;
    }

    main {
        flex-direction: column;
        gap: 4vh;
    }

    #main-right {
        gap: 3vh;
        text-align: center;
    }

    #main-right h1 {
        font-size: 3rem;
        font-family: 'Courier Prime', monospace;
    }

    #main-right h3 {
        font-size: 1rem;
        font-family: 'Lobster Two', sans-serif;
    }

    #main-left {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #section1 {
        background-position: right;
        background-position-y: -116px;
        background-repeat: repeat-y;
    }

    #section2 {
        height: 80vh;
        flex-direction: column;
        text-align: center;
        background-color: black;
    }

    #aboutme,
    #hire-me {
        width: 80vw;
    }

    #section3 {
        flex-direction: column;
        height: 100vh;
        gap: 5vh;
        background: #000000;
    }

    .card {
        width: 80vw;
    }

    .services {
        /* margin-top: 5vh; */
        text-align: center;
        width: 80vw;
    }

    form {
        grid-template-areas:
            "firstname firstname"
            "lastname lastname"
            "email email"
            "phone-num phone-num"
            "message message"
            "button button";
        width: 80vw;
    }

    .fn,
    .ln,
    .email,
    .tel,
    .msg {
        width: 50vw;
    }

    .msg {
        width: 70vw;
    }

    #section5 {
        height: 100vh;
    }
    .prj{
        width: 80vw;
    }

}

@media only screen and (max-width: 450px) {
    header {
        height: 45vh;

    }
    
    header h1 {
        display: none;
    }
    .menu{
        display: inline;
    }

    #section1 {
        background-position: right;
        background-position-y: 0px;
        background-repeat: repeat-y;
    }

    nav {
        display: none;
        flex-direction: column;
        gap: 5vw;
        top: 3vh;
        position: relative;
        animation: navbar 1s ease-in-out;
    }
    
    @keyframes navbar {
        from{
            top: -50vh; 
        }
        to{
         top: 3vh;
        }
     
    }
    @keyframes end {
        from{
            top: 3vh;
        }
        to{
            top: -50vh; 
        }
        
    }
    .end{
        
        top: -50vh;
    animation: end 1s ease-in-out;
    /* display: none; */
}

    main {
        height: 50vh;
    }

    .icons i {
        font-size: 3em;
    }

    #section5 h2 {
        font-size: 2rem;
    }

    #section4 h2 {
        font-size: 2rem;
    }

    #section6 h2:first-child {
        font-size: 2rem;
    }
    .prj{
        width: 80vw;
    }
    /* li{
        transition: height .4s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
    }
    nav li:hover{
        transform: scale(1.4);
        transition: all 500ms ease-in-out;
    } */
}

@media only screen and (max-width: 283px) {
    .buttons {
        flex-direction: column;
    }

    #section2 img {
        width: 150px;
        height: 150px;
    }

    #main-right h1 {
        font-size: 1.5rem;
    }

    #section3 {
        height: 130vh;

    }

    .icons i {
        font-size: 2em;
    }

}