index.css

@font-face {
    font-family: "Cascadia";
    src: url("assets/CascadiaMono.woff2");
}

h1, h2, h3 {
    font-weight: 500;
}

.email-link {
    background-image: url("assets/green-background.svg");
    background-size: cover;
}

.email-link:visited, .email-link:link {
    color: inherit;
    text-decoration: none;
    background-image: url("assets/green-background.svg");
}

a:visited, a:link {
    color: inherit;
}

a, a:visited, a:link {
    text-decoration: none;
}

.page {
    min-height: calc(100% - 16px);
    border: 3px solid;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.main-content {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.contact {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.vertical-align--center {
    margin: auto;
}

.logo {
    width: 1em;
    margin: 0 .2em -.2em 0;
}

@media (min-width: 601px) {
    h1 {
        font-size: 5em;
        margin-top: 23vh;
        margin-bottom: 32px;
    }

    .lkg-link {
        background-image: url("assets/green-background.svg");
        background-size: cover;
    }

    .lkg-link:visited, .lkg-link:link {
        color: inherit;
        text-decoration: none;
        background-image: url("assets/green-background.svg");
    }

    .page--font {
        font-size: calc(100vw / 54);
        font-family: Cascadia, monospace;
    }

    .vertical-on-mobile {
        display: flex;
        margin: 0 auto;
    }

    .text--small {
        font-size: .8em;
        margin: 2em;
    }

    .text {
        margin: .5em auto;
    }

    .separator {
        width: 99%;
        margin: 0 auto;
    }

    .footer {
        display: flex;
        justify-content: space-between;
    }

    .hide-on-desktop {
        display: none;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 5em;
        margin-top: 10vh;
        margin-bottom: 32px;
    }

    .lkg-link, .lkg-link:link, .lkg-link:visited {
        background: initial;
        text-decoration: initial;
    }

    .page--font {
        font-size: initial;
        font-family: Cascadia, monospace;
    }

    .vertical-on-mobile {
        display: block;
    }

    .text {
        margin: 4px auto;
    }

    .middle-column--on-mobile > div {
        max-width: 80%;
        margin: 0 auto;
    }

    .hide-on-mobile {
        display: none;
    }

    .separator {
        display: none;
    }

    .footer {
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        grid-template-areas:
        "l middle r";

        margin-bottom: 1em;
    }

    .text--small {
        font-size: .8em;
        border-image: url(assets/border.svg) 5% fill;
        padding: 1em 2em;
        max-width: max-content;
        grid-column: middle;
        margin: .5em auto;
    }
}