:root {
    font-family: "Courier New", sans-serif;
    /* Font sizes */
    --font-size-tiny: 6px;
    --font-size-small: 10px;
    --font-size-medium: 15px;
    --font-size-large: 20px;
    --font-size-huge: 30px;

    /* Font weights */
    --font-weight-thin: 100;
    --font-weight-medium: 200;
    --font-weight-semibold: 300;
    --font-weight-bold: 400;
    --font-weight-thick: 600;
    --font-weight-thicc: 900;

    /* Spacing */
    --spacing-xs: 1.5px;
    --spacing-sm: 3px;
    --spacing-md: 7px;
    --spacing-lg: 10px;
    --spacing-xl: 15px;
    --spacing-2xl: 22px;
    --spacing-3xl: 36px;
    --spacing-4xl: 49px;
    --spacing-5xl: 63px;
    --spacing-6xl: 81px;

    /* Border width */
    --border-width-xs: 0.5px;
    --border-width-sm: 1px;
    --border-width-md: 1.8px;
    --border-width-lg: 2.8px;

    /* Border radius */
    --border-radius-xs: 3px;
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-circle: 100vmax;
}

.light {
    --colors-background-100: #f6f6f1;
    --colors-background-200: #e4e2dc;
    --colors-background-300: #c0c0d2;

    --colors-border-100: #b0b0b0;
    --colors-border-200: #808080;
    --colors-border-300: #505050;

    --colors-text-100: #636363;
    --colors-text-200: #47494f;
    --colors-text-300: #232323;
    --colors-text-success: #3bef3e;
    --colors-text-danger: #db3030;
    --colors-text-info: #279fce;
}

.dark {
    --colors-background-a: #0d1016;
    --colors-background-b: #1f2127;
    --colors-background-c: #313337;

    --colors-text-100: #b3b3b3;
    --colors-text-200: #ded9df;
    --colors-text-300: #f3f3f3;
    --colors-text-success: #1b8f2e;
    --colors-text-danger: #9b3030;
    --colors-text-info: #076fbe;
}

.PageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.PageContent {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin: var(--spacing-2xl) var(--spacing-5xl);
}

.BackgroundNoise {
    background-image: url(./noise-4.png);
}

.ShadowBorder {
    box-shadow:
        1px 1px 0 var(--colors-border-100),
        -1px 1px 0 var(--colors-border-100),
        1px -1px 0 var(--colors-border-100),
        -1px -1px 0 var(--colors-border-100);
}

.Popout {
    position: relative;
    /*width: calc(var(--left-distance) + var(--popout-width));*/

    & > #Static {
        position: relative;
        border-radius: inherit;
        background-color: inherit;
        height: inherit;
        width: inherit;
        z-index: 1;
        padding: var(--padding);
    }

    & > #Popout {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        transition: var(--transition);
    }

    & > #HoverSurface {
        position: absolute;
        top: 0;
        left: 0;
        height: inherit;
        width: 0;
        transition: var(--transition);
    }

    &:hover {
        & > #Popout {
            left: var(--left-distance);
            width: var(--popout-width);
        }

        & > #HoverSurface {
            width: calc(var(--popout-width) + var(--left-distance));
        }
    }
}