:root {
    /* Color Dictionary */
    --color-text-primary: white;
    --color-text-secondary: #888;
    /* Link Colors */
    --color-link: #26A8FF;
    --color-link-hover: #47B5FF;
    /* Discord Brand Colors */
    --color-discord: #5865F2DD;
    --color-discord-hover: #6373EDDD;
    /* Ko-fi Brand Colors */
    --color-kofi: #FF4F19DD;
    --color-kofi-hover: #FF6433DD;
    --color-kofi-open: #FF8966DD;
    /* Blue Button Variant Colors */
    --color-blue: #1E72CCDD;
    --color-blue-hover: #2B7FD4DD;
    --color-blue-active: #3A8CDDDD;
    /* Yellow Button Variant Colors */
    --color-yellow: #FFCC11AA;
    --color-yellow-hover: #FFD633BB;
    --color-yellow-active: #FFE055BB;
    /* Button Colors */
    --color-button-bg: #2228;
    --color-button-bg-hover: #333A;
    --color-button-bg-active: #333C;
    --color-button-bg-disabled: #3334;
    --color-button-border: #FFF3;
}

@font-face {
    font-family: 'Mona Sans';
    src: url('Mona-Sans.woff2') format('woff2 supports variations'), url('Mona-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

@import url('PTMono-Regular.ttf');

html, body {
    font-family: "Mona Sans";
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 18px;
    color: var(--color-text-primary);
}

body {
    overflow-x: hidden;
}

button {
    all: unset;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

    a:hover {
        color: var(--color-link-hover);
        text-decoration: underline;
    }

.reu-container {
    padding: 1rem;
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    transition: width 0.2s ease, padding 0.2s ease;
}

@media (max-width: 850px) {
    .reu-container {
        width: calc(100% - 3rem);
    }
}

.reu-discord {
    background-color: var(--color-discord) !important;
}

    .reu-discord:hover {
        background-color: var(--color-discord-hover) !important;
    }

.reu-kofi {
    background-color: var(--color-kofi) !important;
    cursor: pointer;
}

    .reu-kofi:hover {
        background-color: var(--color-kofi-hover) !important;
    }

    .reu-kofi.open {
        background-color: var(--color-kofi-open) !important;
    }



.reu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    background: var(--color-button-bg);
    border-bottom: 2px solid var(--color-button-border);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.05s ease;
    padding: 10px 5px;
    cursor: pointer;
}

    .reu-button:hover {
        background-color: var(--color-button-bg-hover);
        color: var(--color-text-primary);
        text-decoration: none;
    }

    .reu-button.active {
        background-color: var(--color-button-bg-active);
    }

    .reu-button.disabled, .reu-button:disabled {
        background-color: var(--color-button-bg-disabled);
        color: var(--color-text-secondary);
        cursor: not-allowed;
    }

.reu-button-blue {
    background-color: var(--color-blue) !important;
}

    .reu-button-blue:hover {
        background-color: var(--color-blue-hover) !important;
    }

    .reu-button-blue.active {
        background-color: var(--color-blue-active) !important;
    }

.reu-button-yellow {
    background-color: var(--color-yellow) !important;
}

    .reu-button-yellow:hover {
        background-color: var(--color-yellow-hover) !important;
    }

    .reu-button-yellow.active {
        background-color: var(--color-yellow-active) !important;
    }

.reu-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}