@media only screen and (max-width: 60em) {

    nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 10vmin;
        background-color: rgba(255, 224, 230, 0.616);
        background: rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        height: 35vmin;
    }

    nav img {
        display: none;
        width: 10vmin;
        height: 10vmin;
        image-rendering: pixelated;
        margin-left: 5vmin;
    }

    .nav-links {
        align-self: center;
        font-weight: bolder;
        display: flex;
        flex-direction: column;
        gap: 1vmin;
        margin-right: 5vmin;
        font-size: 4vmin;
        text-align: center;
    }

    /* hide home button */
    .nav-links li:nth-of-type(1)
    {
        display: none;
    }


    .home {
        margin-top: 5vmin;
        padding: 5vmin;
        background-size: cover;
    }

    .top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        gap: 2vmin;
        text-align: center;
    }

    .top img {
        align-self: center;
        width: 80vmin;
        height: 80vmin;
        image-rendering: pixelated;
    }

    .right {
        align-self: center;
        font-weight: bolder;
        margin-bottom: 5vmin;
    }

    .right h1 {
        margin-top: -5vmin;
        font-size: 9vmin;
        padding: 0;
    }

    .right p {
        font-size: 4.5vmin;
        margin: 0;
        padding: 0;
    }



    .about {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0vmin;
        font-weight: bolder;
        padding: 10vmin;
        background-image: url(../img/bgswirl.png);
        background-size: cover;
        background-position: center;
    }

    .about h2 {
        font-size: 9vmin;
    }

    .about p {
        margin-top: -2vmin;
        font-size: 4.5vmin;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }



    .projects {
        padding: 10vmin;
        background-image: url(../img/bggalaxy.png);
        background-size: cover;
        background-position: center;
        text-align: center;
    }

    .projects h2 {
        margin-top: -0vmin;
        font-size: 9vmin;
    }

    .project-item {
        text-align: center;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .project-item h3 {
        text-align: center;
        font-size: 6vmin;
    }

    .project-item p {
        font-size: 3.5vmin;
    }



    .contact {
        text-align: center;
        padding: 10vmin;
        background-image: url(../img/bgGlobe.png);
        background-size: cover;
        background-position: center;
    }

    .contact h2 {
        font-size: 9vmin;
        margin-bottom: 2vmin;
    }

    .contact p {
        font-size: 4vmin;
        margin-bottom: 4vmin;
    }

    .contact-icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1vmin;
        margin-top: -2vmin;
    }

    .contact-icons img {
        width: 30vmin;
        height: 30vmin;
        image-rendering: pixelated;
        cursor: pointer;
    }

    #email {
        width: 29vmin;
        height: 29vmin;
        align-self: center;
    }



    #discord-profile {
        margin-top: 5vmin;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        gap: 2vmin;
        width: 50vmin;
        margin-left: auto;
        margin-right: auto;
        margin-top: 35vmin;
        margin-bottom: 35vmin;
        transform: scale(2);
    }

    #discord-bg {
        position: relative;
        width: 80%;
        max-width: 60vmin;
        aspect-ratio: 2/2.85;
        background-image: url("../img/discord\ presence\ bg.png");
        background-size: cover;
        background-position: center;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #discord-user-image {
        display: flex;
        padding-right: 3vmin;
        transform: scale(1.2);
    }

    #discord-pfp-border {
        width: 13vmin;
        height: 13vmin;
        border-radius: 100%;
        align-self: center;
        margin-left: -0.5vmin;
        position: absolute;
    }

    #discord-status {
        width: 4vmin;
        height: 4vmin;
        align-self: center;
        margin-left: 8vmin;
        margin-top: 8vmin;
        position: absolute;
    }

    #discord-pfp {
        width: 12vmin;
        height: 12vmin;
        border-radius: 100%;
        align-self: center;
    }

    #discord-names {
        padding-top: 3vmin;
        display: flex;
        gap: 1vmin;
        justify-content: center;
        font-size: 2.5vmin;
    }

    #discord-names h3 {
        align-self: left;
        text-align: left;
    }

    #name-list {
        display: flex;
        flex-direction: column;
    }

    #discord-username {
        margin-top: 1vmin;
        font-size: 4vmin;
        text-align: left;
    }

    #discord-displayname {
        margin-top: -6vmin;
        font-size: 2.5vmin;
        text-align: left;
    }

    #discord-line-status {
        margin-top: -3vmin;
        font-size: 1.7vmin;
        text-align: left;
    }


    #activity {
        margin-top: 3vmin;
        display: flex;
        gap: 0vmin;
        justify-content: center;
        flex-direction: column;
        font-size: 1.7vmin;
        text-overflow: ellipsis;
    }

    #activity h3 {
        align-self: center;
        width: 85%;
    }


    #discord-activity-image {
        display: flex;
        margin-left: auto;
        margin-right: auto;
        align-content: center;
    }

    #activity-border {
        position: absolute;
        width: 19.2vmin;
        height: 19.2vmin;
        margin-left: -0.9vmin;
        align-self: center;
    }

    #activity-img {
        width: 17vmin;
        height: 17vmin;
        border-radius: 2vmin;
        align-self: center;
    }



    .foot {
        margin-top: 10vmin;
        text-align: center;
    }

    .friends {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 0;
        margin-bottom: 3vmin;
        padding-left: 1vmin;
        margin-left: auto;
        margin-right: auto;
    }

    .friends img {
        width: 20vmin;
        height: 41vmin;
        align-self: center;
        image-rendering: pixelated;
        cursor: pointer;
    }

    #an {
        width: 19vmin;
    }

    #jay {
        width: 19vmin;
    }

    #counter {
        font-size: 5vmin;
        margin-bottom: 2vmin;
        padding-bottom: 5vmin;
    }

    .foot h2 {
        font-size: 7vmin;
    }

    .foot h5 {
        font-size: 4vmin;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 5vmin;
    }

    .foot p {
        font-size: 6vmin;
    }


    #psst {
        font-size: 4vmin;
    }
}