#navbar {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;


    img {
        width: 120px;
        height: 120px;
        border-radius: 12px;
    }

    h1 {
        margin: 0;
        padding-left: 12px;
        font-family: "Copse", serif;
        font-size: 4em;
        width: calc(100vw - 120px - 12px - 40px - 16px);
    }

    nav {
        position: relative;
        display: flex;
        flex-basis: 100%;
        margin-top: 16px;
        flex-direction: row-reverse;
        flex-wrap: wrap;

        a {
            margin: 0px 3px;
            display: inline-block;
            padding: 6px 12px 8px 12px;
            background-color: slategray;
            border-radius: 4px;


            font-size: 1.3em;
            font-family: "Righteous", sans-serif;
            text-decoration: none;
            color: hsl(220, 90%, 85%);

            /* Text Outline */
            --outline-color: hsl(182, 85%, 8%);
            text-shadow:
                calc(-1.8px) calc(-1.8px) 0 var(--outline-color),
                calc(1.8px) calc(-1.8px) 0 var(--outline-color),
                calc(-1.8px) calc(1.8px) 0 var(--outline-color),
                calc(1.8px) calc(1.8px) 0 var(--outline-color),
                0vw calc(-1.8px) 0 var(--outline-color),
                0vw calc(1.8px) 0 var(--outline-color),
                calc(-1.8px) 0vw 0 var(--outline-color),
                calc(1.8px) 0vw 0 var(--outline-color);
        }
    }
}

@media (max-width: 612px) {
    #navbar nav {
        transform: translateX(0);

        a {
            margin: 6px 3px;
        }
    }
}

@media (max-width: 470px) {
    #navbar {
        img {
            width: 25.53191489vw;
            height: 25.53191489vw;
            border-radius: 2.553191489vw;
        }

        h1 {
            padding-left: 2.553191489vw;
            font-size: calc(6.255319149vw * 1.6);
            width: calc(100vw - 120px - 2.553191489vw - 40px - 16px);
        }
    }
}

@media (max-width: 370px) {
    #navbar nav a {
        width: calc(100vw - 70px);
    }
}

@media (max-width: 300px) {
    #navbar nav a {
        font-size: calc(4.333333333vw * 1.6);
    }
}