@media screen and (max-width: 600px) {
    :root {
        --p-sides: 10vw;
    }

    body, footer, label {
        font-size: 4vw;
    }

    h1 {
        font-size: 6vw;
    }

    .btn {
        padding: 2vw 4vw;
        font-size: 3.5vw;
    }

    #splash > div:not(.stars) {
        margin: 0 var(--p-sides);
        margin-top: 0;
        flex-direction: column;
        gap: 0;
    }

    #splash article {
        width: 100%;
        margin: 0;
        margin-top: auto;
    }

    #skills img {
        object-fit: cover;
    }

    #about div {
        flex-direction: column;
    }

    #about img {
        width: 90%;
        height: 90%;
        margin: auto;
        display: flex;
    }

    .grid {
        display: flex;
        flex-direction: column;
    }

    .nav .social-list, .social-list {
        font-size: 7vw;
        gap: 5vw;
    }

    /* Nav */
    nav {
        font-size: 5vw;
    }

    .nav-bars {
        width: 7vw;
        top: calc(var(--p-vert) / 4);
        left: calc(var(--p-sides) / 5);
    }

    .slide {
        width: 100vw;
        top: 0;
        left: 0;
        z-index: 9;
    }

    .slide-up {
        transition: all 0.4s ease-in-out;
        transform: translateY(-100vh);
    }

    .slide-down {
        transition: all 0.8s ease-in-out;
        transform: translateY(0vh);
    }

    .dropdown-container a:not(.dropdown-btn) {
        font-size: 4vw;
    }

    .nav-list > li > a > i {
        right: 5vw;
    }

    /* Animations */
    .typed {
        animation: typing 3.8s steps(50, end) forwards, blink-caret .75s step-end infinite;
    }
}