
:root {
    --bg: hsl(154, 14%, 28%);
    --mid-bg: hsl(154, 14%, 20%);
    --bold-bg: hsl(154, 24%, 10%);
    --bold-text: hsl(154, 100%, 50%);
    --bold-text-filter: invert(69%) sepia(76%) saturate(452%) hue-rotate(94deg) brightness(100%) contrast(108%);  /* Converts from black to var(--bold-text). */
    --bold-text-accent: hsl(334, 100%, 70%);
    --bold-text-accent-sat: hsl(334, 100%, 50%);
    --bold-text-accent-filter: invert(49%) sepia(20%) saturate(5534%) hue-rotate(306deg) brightness(99%) contrast(106%);
    /* Converts from black to var(--bold-text-accent). */
    /* --bold-text-accent-sat-filter: invert(17%) sepia(93%) saturate(7417%) hue-rotate(328deg) brightness(101%) contrast(107%); */
    /* Converts from black to var(--bold-text-accent-sat). */
    --text-sat: hsl(154, 100%, 75%);
    --text-light: hsl(154, 100%, 90%);
    --text-dim: hsl(154, 38%, 50%);
    --bold-text-accent-light: hsl(334, 100%, 90%);
}

body {
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    padding: 20px;

    background-color: var(--bold-bg);
    color: var(--text-light);
    margin: 0;

    /* Push footer to bottom of window. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.regular-color {
    color: var(--bold-text);
    /* font-weight: bold; */
}

h1 {
    font-size: 2.5rem;
    margin: 1rem 0;
}

a {
    text-decoration: none;
}
.menu-item {
    color: white;
    /* color: var(--bold-text); */
}
.menu-item:hover {
    color: var(--bold-text);
    /* color: white; */
}

.warning-flag {
    color: orange;
    /* color: var(--bold-text-accent); */
    font-weight: bold;
}

.bold {
    font-weight: bold;
}
