:root {
    --menu-background-color: rgb(255, 166, 0);
    --menu-background-color-hover: rgb(197, 128, 0);
    --menu-text-color: #000;
    --darkmode-toggle-background-color: rgb(146, 211, 255);
    --darkmode-toggle-background-color-hover: rgb(31, 126, 190);
    --darkmode-toggle-text-color: rgb(243, 255, 11);
    --user-pref-background-color: rgb(0, 195, 179);
    --user-pref-background-color-hover: rgb(0, 146, 133);
    --user-pref-text-color: #000;
    --auth-button-background-color: green;
    --auth-button-background-color-hover: rgb(0, 86, 0);
    --auth-button-text-color: white;
    --auth-button-logged-in-background-color: red;
    --auth-button-logged-in-background-color-hover: rgb(179, 0, 0);
}

#menuButtonContainer {
    display: none;
}

#menuButton {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: var(--menu-background-color);
    color: var(--menu-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

#menuButton:hover {
    background-color: var(--menu-background-color-hover);
}

.user-pref {
    position: absolute;
    top: 65px;
    right: 82px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: var(--user-pref-background-color);
    color: var(--user-pref-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.user-pref:hover {
    background-color: var(--user-pref-background-color-hover);
}

#darkModeToggle {
    position: absolute;
    top: 20px;
    right: 82px;
    padding: 10px 19px;
    font-size: 18px;
    background-color: var(--darkmode-toggle-background-color);
    color: var(--darkmode-toggle-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#darkModeToggle:hover {
    background-color: var(--darkmode-toggle-background-color-hover);
}

.auth-button {
    position: absolute;
    top: 65px;
    right: 20px;
    padding: 10px 19px;
    font-size: 18px;
    background-color: var(--auth-button-background-color);
    color: var(--auth-button-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    }

.auth-button:hover {
    background-color: var(--auth-button-background-color-hover);
}

.auth-button.logged-in {
    background-color: var(--auth-button-logged-in-background-color);
}

.auth-button.logged-in:hover {
    background-color: var(--auth-button-logged-in-background-color-hover);
}

body.dark-mode {
    --menu-background-color: rgb(145, 94, 0);
    --menu-background-color-hover: rgb(255, 175, 27);
    --menu-text-color: #000;
    --darkmode-toggle-background-color: rgb(0, 0, 0);
    --darkmode-toggle-background-color-hover: rgb(39, 51, 59);
    --darkmode-toggle-text-color: rgb(255, 255, 255);
    --user-pref-background-color: #003c7b;
    --user-pref-background-color-hover: #154bd3;
    --user-pref-text-color: #f5f5f5;
    --auth-button-background-color: #006400;
    --auth-button-background-color-hover: #008100;
    --auth-button-text-color: #f5f5f5;
    --auth-button-logged-in-background-color: #8b0000;
    --auth-button-logged-in-background-color-hover: rgb(179, 0, 0);
}