@media only screen and (max-width: 500px) {

    /* ! NAV BAR */
    nav{
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: #111;
        height: 50px;
        padding: 0;
        margin: 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    
    li {
        /* float: right; */
    }
    
    li a {
        /* display: block; */
        font-size: 10px;
        color: white;
        /* text-align: center; */
        /* padding: 15px 10px 10px 10px; */
        text-decoration: none;
    }
    .myName{
        font-size: 10px;
        color: white;
    }

    .projectTitle{
        color: black;
    }

    .projectContainer{
        display: flex;
        height: auto;
        flex-direction: column;
        padding: 4%;
        border-bottom: 3px #eee solid;
    }
    .projectText{
        width: 100%;
        scale: 1;
        transition-duration: 0.5s;
        transform-origin: left;
    }
    .projectImage{
        width: 100%;
        height: 150px;
        border: 3px gray solid;
        border-radius: 5px;
        scale: 1;
        transition-duration: 0.5s;
        transform-origin: right;
    }
    .projectText h2{
        color: white;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 25px;
        border-bottom: 4px rgb(75, 75, 75) solid;
        padding-bottom: 2%;
        margin: 0px;
    }

    .skillsTitle{
        font-size: 20vw;
        margin: 0px auto;
        display: inline-block;
        /* background-image: url(../img/dragon.png); */
        background-color: white;
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-stroke-width: 0px;
        -webkit-text-stroke-color: white;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        background-attachment: fixed;
        letter-spacing: 9px;
    }

    #lineAnim{
        border-left: 5px green solid;
    }
}