:root {
    --bg-img-light: url("/static/rapids2.jpg");
    --bg-img-dark: url("/static/lake2.jpg");

    --white: #f1f3f5;
    --black: #343a40;

    --border-light: #adb5bd;
    --border-dark: #868e96;
    --shadow-dark: #212529;

    --glass-light-primary: rgba(241, 243, 245, 0.7);
    --glass-light-secondary: rgba(241, 243, 245, 0.4);

    --glass-cyan-light-primary: rgba(21, 170, 191, 0.7);
    --glass-cyan-light-secondary: rgba(21, 170, 191, 0.4);

    --glass-cyan-dark-primary: rgba(16, 152, 173, 0.7);
    --glass-cyan-dark-secondary: rgba(16, 152, 173, 0.4);

    --glass-dark-primary: rgba(52, 58, 64, 0.7);
    --glass-dark-secondary: rgba(52, 58, 64, 0.4);

    --scale-xl: 3em;
    --scale-lg: 2em;

    --scale-primary: 1.5em;
    --scale-secondary: 1em;
    --scale-ternary: 0.75em;
}

body {
    margin: 0;
    padding: 0;

    width: 100vw;
    min-height: 100vh;

    background-image: var(--bg-img-light);

    background-size: cover;
    background-attachment: fixed;

    display: flex;
    justify-content: center;
    /* align-items: center; */

    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;

    display: flex;
    justify-content: center;
    align-items: center;
}

#backdrop {
    width: 100%;
    height: 100%;

    z-index: -1;

    /* display: flex;
    justify-content: center;
    align-items: center; */

    position: fixed;

    backdrop-filter: blur(var(--scale-secondary));
}

/* #container {
    width: 40em;

    box-sizing: border-box;

    margin: 10em 0;
}

#logo {
    width: 8em;
}

#scratch-game {
    height: 30em;
} */

#prompt-container {
    width: 100%;
    height: 100%;

    display: none;
    justify-content: center;
    align-items: center;

    position: fixed;
    z-index: 2;

    background-color: rgba(0, 0, 0, 0.7);
}

#prompt {
    width: 30em;
}

#alert-container {
    width: 100%;
    height: 100%;

    display: none;
    justify-content: center;
    align-items: center;

    position: fixed;
    z-index: 2;

    background-color: rgba(0, 0, 0, 0.7);
}

#alert {
    width: 30em;
}

#message-list {
    overflow-y: hidden;

    height: 29em;
}

#container {
    width: 60em;
    height: 40em;
}

#user-list {
    height: 35.5em;

    overflow-y: scroll;
}

.flex-end {
    align-self: flex-end;
}

.username {
    padding-left: 1em;

    cursor: default;
}

.message {
    align-self: flex-start;
}

.my-message {
    align-self: flex-end;
}

.secondary-container {
    width: 10em;
}

ul, ol {
    padding: 0 2em;
    margin: 0;
}

.no-border {
    border: 0;
}

.top-margin-primary {
    margin-top: var(--scale-primary);
}

.top-margin-secondary {
    margin-top: var(--scale-secondary);
}

.bold {
    font-weight: 700 !important;
}

.italic {
    font-style: italic !important;
}

.text-sm {
    font-size: var(--scale-ternary);
}

.text-rg {
    font-size: var(--scale-secondary);
}

.text-sp {
    font-size: var(--scale-primary);
}

.text-lg {
    font-size: var(--scale-lg);
}

.text-xl {
    font-size: var(--scale-xl);
}

.text-white {
    color: var(--white) !important;
}

.text-center {
    text-align: center;
}

.no-link {
    text-decoration: none;
    color: inherit;
}

.no-select {
    user-select: none;
}

.columns {
    display: flex;
    flex-direction: column;
}

.rows {
    display: flex;
    flex-direction: row;

    flex-wrap: wrap;
}

.grow {
    flex-grow: 1;
}

.gap-primary {
    gap: var(--scale-primary);
}

.gap-secondary {
    gap: var(--scale-secondary);
}

.gap-ternary {
    gap: var(--scale-ternary);
}

.x-center {
    display: flex;
    justify-content: center;
}

.full-width {
    width: 100%;
}

.glass-theme-primary {
    background-color: var(--glass-light-primary);
}

.glass-theme-secondary {
    background-color: var(--glass-light-secondary);
}

.glass-cyan-primary {
    background-color: var(--glass-cyan-light-primary);
}

.glass-cyan-secondary {
    background-color: var(--glass-cyan-light-secondary);
}

.shadow-theme {
    box-shadow: var(--black) 0 0 var(--scale-primary);
}

.furnish-primary {
    padding: var(--scale-primary);
    border-radius: var(--scale-primary);
}

.furnish-secondary {
    padding: var(--scale-secondary);
    border-radius: var(--scale-secondary);
}

.round-primary {
    border-radius: var(--scale-primary);
}

.round-secondary {
    border-radius: var(--scale-secondary);
}

.force-circle {
    border-radius: 9999px;
}

.border-theme {
    border: 2px solid var(--border-light);
}

.line {
    width: 100%;
    height: 0;

    border: 1px solid var(--border-light);
}

.button {
    background-color: var(--glass-cyan-light-secondary);

    padding: var(--scale-secondary);
    border-radius: var(--scale-secondary);

    font-size: var(--scale-secondary);

    text-align: center;

    text-decoration: none;
    color: inherit;

    transition: background-color 0.25s ease-in-out;

    cursor: pointer;
}

.button:hover {
    background-color: var(--glass-cyan-light-primary);
}

.input {
    background-color: var(--glass-light-secondary);

    padding: var(--scale-secondary);
    border-radius: var(--scale-secondary);

    font-size: 1em;

    border: 0;

    font-family: "Noto Sans", monospace;
}

.input:focus {
    outline: 0;
}

@media screen and (max-width: 43em) {
    #container {
        width: calc(100% - 3em);
    }
}

/* @media screen and (prefers-color-scheme: dark) {
    body {
        background-image: var(--bg-img-dark);
    }

    .glass-theme-primary {
        background-color: var(--glass-dark-primary);
    }

    .glass-theme-secondary {
        background-color: var(--glass-dark-secondary);
    }

    .button {
        background-color: var(--glass-cyan-dark-secondary);
    }
} */