:root {
    --textColor: #f0f0f0;
    --hoverColor: #404040;
    --lighterHoverColor: #606060;
    --darkBackgroundColor: #101010;
    --grayBackgroundColor: #202020;
    --lightBackgroundColor: #303030;
    --dropShadowColor: #000000aa;
    --overlayColor: #00000030;
    --backgroundGradientDark: linear-gradient(var(--lightBackgroundColor), var(--darkBackgroundColor));
    
    --cardBackgroundColor: #353535;
    --listColor: #202020;

    --selectedColor: #f0f0f0;
    --selectedTextColor: #101010;
    --selectedHoverColor: #bfbfbf;
    
    --buttonColor: #454545;
    --buttonHoverColor: #555555;
    --warnColor: #d83636;
    --warnHoverColor: #b83333;
    --accentColor: #4c90af;
    --accentHoverColor: #456ca0;

    --tagNotStartedColor: #dd2020;
    --tagStartedColor: #dd8020;
    --tagReviewColor: #dd20bb;
    --tagRevisionColor: #808090;
    --tagCompletedColor: #20dd20;

    --invertBase: invert(1);
    --invertSelected: invert(1);
    
    --edgeRounding: 2rem;
    --padding: 8px;
    --paddingSmall: calc(var(--padding) / 2);
    --paddingDouble: calc(var(--padding) * 2);
    --margin: 16px;
    --gap: 8px;
    --borderColor: #f0f0f0aa;
    --borderWidth: 1px;
    --cardBorder: var(--borderWidth) solid #505050;
    --border: var(--borderWidth) solid var(--borderColor);
    
    --innerBorderRadius: 8px;
    --outerBorderRadius: calc(var(--innerBorderRadius) + var(--padding));

    --highlightColor: #40404020;
    --cardHoverEffect: '';
    --hoverGradient: linear-gradient(transparent, var(--highlightColor) 45%, var(--highlightColor) 55%, transparent);
    --hoverGradientHorizontal: linear-gradient(90deg, transparent, var(--highlightColor) 45%, var(--highlightColor) 55%, transparent);

    --transitionQuick: 100ms ease-in-out;
    --transitionNormal: 250ms ease-in-out;
    --transitionSlow: 500ms ease-in-out;

    --fontWeight: 500;
    --min-width: 300px;
    --collapse-width: 200px;

    --dropShadow: 4px 4px 4px var(--dropShadowColor);

    --contextMenuWidth: 128px;
    --overlayBlur: 8px;
    
    --hoverGradient: linear-gradient(transparent, var(--selectedColor) 45%, var(--selectedColor) 55%, transparent);
}

* {
    margin: 0;
    appearance: none;
}

.page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFC229;
}

h1 {
    font-family: 'Unageo', sans-serif;
    font-size: 8rem;
    font-weight: 700;
    color: #f0f0f0;
    
}

.title {
    text-align: center;
}

.contact {
    text-align: center;
}

a {
    font-family: 'Unageo', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: #f0f0f0;
    text-decoration: none;
}

@media (max-width: 800px) {
    h1 {
        font-size: 4rem;
    }

    p {
        font-size: 1.5rem;
    }
}