jo.yay.boo/globals.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
}

body {
    min-height: 100vh;

    background: linear-gradient(180deg, var(--color-background) 0% 5%, var(--color-red) 99% 100%);
    background-size: 110% 110%;

    -webkit-animation: backgroundGradient 15s ease infinite;
    -moz-animation: backgroundGradient 15s ease infinite;
    animation: backgroundGradient 15s ease infinite;

    text-rendering: optimizeLegibility;
    shape-rendering: geometricPrecision;

    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 1.3rem;
    }

    a {
        transition: ease-in-out 250ms;
        text-decoration: none;
        color: var(--color-blue);
    }

    a:hover {
        color: var(--color-lavender);
    }
}

/* Preload */
.preload * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

/* Flex */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

/* Position */
.sticky {
    position: sticky;
}

.fixed {
    position: fixed;
}

/* Justify */
.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Items */
.items-center {
    align-items: center;
}

.items-end {
    align-items: end;
}

/* Content */
.content-center {
    align-content: center;
}

/* Text */
.text-center {
    text-align: center;
}

/* Color schemes */
.color--base-dark {
    background-color: var(--color-background);
}

.color--container1-dark {
    background-color: var(--color-container1);
}

.color--text-dark {
    color: var(--color-text);
}

.color--subtext-dark {
    color: var(--color-subtext);
}