body {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 2rem;
}

.content {
    max-width: 40rem;
    margin: auto;
}

.justify {
    text-align: justify;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 10px;
}

nav ul {
    border-top: 2px #0ff solid;
    padding: 10px;
}

@media screen and (max-width: 30em) {
    nav ul {
        display: flex;
        flex-direction: column;
    }
}

nav li {
    display: inline;
    border-bottom: 2px #0ff solid;
}

a {
    background: linear-gradient(to top, #aaa, #fff);
    background-clip: text;
    color: transparent;
    text-decoration: none;
}

a:hover {
    background: linear-gradient(to top, #888, #aaa);
    background-clip: text;
    color: transparent;
    text-decoration: underline;
}

nav a, .project-link a {
    background: linear-gradient(to top, limegreen, lime);
    background-clip: text;
    color: transparent;
}

nav a:hover, .project-link a:hover {
    background: linear-gradient(to top, green, limegreen);
    background-clip: text;
    color: transparent;
}

h1 {
    background: linear-gradient(to top, orangered, orange);
    background-clip: text;
    color: transparent;
}

h2 {
    background: linear-gradient(to top, blue, cyan);
    background-clip: text;
    color: transparent;
}

h3 {
    background: linear-gradient(to top, blueviolet, blue);
    background-clip: text;
    color: transparent;
}

#loadOverlay {
    display: none;
}

.socials {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: initial;
}

.socials div {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.gradiented {
    background: linear-gradient(to right, blueviolet, cyan, orange);
    background-clip: text;
    color: transparent;
}

.about {
    display: flex;
    justify-content: center;

    img {
        width: 30vw;
        max-width: 360px;
        height: auto;
        aspect-ratio: 360 / 426;
    }

    @media screen and (max-width: 30em) {
        flex-direction: column-reverse;
    }
}

.three-col-layout {
    display: flex;
    gap: 1rem;

    > :first-child {
        order: 1;

        img {
            width: 20vw;
            height: auto;
            aspect-ratio: 822 / 627;
        }
    }

    > .content {
        order: 2;
    }

    > :last-child {
        order: 3;

        img {
            width: 20vw;
            height: auto;
            aspect-ratio: 877 / 700;
        }
    }

    @media screen and (max-width: 50em) {
        flex-direction: column;

        > :first-child {
            order: 2;

            img {
                width: 100%;
            }
        }

        > .content {
            order: 1;
        }

        > :last-child {
            order: 3;

            img {
                width: 100%;
            }
        }
    }
}

.mobile-only {
    display: none;

    @media screen and (max-width: 50em) {
        display: initial;
    }
}

.blink {
    animation: blink-animation 1s steps(2, start) infinite;
    -webkit-animation: blink-animation 1s steps(2, start) infinite;
}
@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}