body {
    background-color: var(--main-background) !important;
    color: var(--main-text-color) !important;
    font-family: "Atma", serif !important;
    font-weight: 300;
    font-size: 1.85rem !important;
    overflow-x: hidden;
}

.title {
    font-size: 3.5rem;
}

.header {
    background-color: var(--title-bar);
}

nav {
    width: 102vw;
    margin-left: -1vw;
    @media only screen and (max-width: 768px) {
        margin-left: 0;
    }
    button {
        color: var(--nav-button-text);
        background-color: var(--title-bar);
        border: none;
        &:hover {
            color: var(--nav-text-hover);
            background-color: var(--main-nav-hover);
            transition: 0.35s;
        }
    }
}

.btn {
    background-color: var(--main-buttons) !important;
    margin-bottom: 20px;
    font-size: 1.25rem !important;
}

@media (hover: hover) {
    .btn:hover:not(:disabled) {
        /* Prevent buttons from having the sticky effect on mobile */
        background-color: var(--main-button-hover) !important;
        color: var(--hover-button-text) !important;
    }
    .requires-touch {
        display: none;
    }
}

@media (hover: none) {
    .requires-mouse {
        display: none;
    }
}

hr {
    border: 1px solid var(--hr-color) !important;
}

.hidden {
    display: none !important;
}

h1 > a { 
    color: inherit !important;
    text-decoration: inherit !important;
}

body.is-mobile .no-mobile,
body:not(.is-mobile) .mobile-only,
body:not(.logged-in) .requires-login,
body:not(.is-admin) .requires-admin,
body.logged-in .requires-logged-out,
body:not(.explicitly-logged-out) .requires-logged-out-explicit {
    display: none;
}

@media only screen and (orientation: landscape) {
    .portrait-only {
        display: none;
    }
}

@media only screen and (orientation: portrait) {
    .landscape-only {
        display: none;
    }
}

div#hamburger-menu {
    position: absolute;
    left: 20px;
    top: 14px;
    font-size: 0.8em;
    .dropdown-item {
        font-size: 1.75em;
        font-family: sans-serif;
    }
}

nav button.nav-button {
    width: 12.2vw;
}

body.is-admin nav button.nav-button {
    width: 9.7vw;
}

@media only screen and (max-width: 1500px) {
    nav button.nav-button {
        font-size: 1.475rem;
    }
}

@media only screen and (max-width: 1175px) {
    nav button.nav-button {
        width: 24.4vw;
        margin-top: 5px;
        font-size: 1.85rem;
    }

    body.is-admin nav button.nav-button {
        width: 19.4vw;
    }
}

i.cog-icon {
    position: absolute;
    right: 0.6em;
    top: 0.6em;
    opacity: 0.75;
    cursor: pointer;
    font-size: 0.8em;
    &:hover {
        opacity: 1.0;
    }
}

div#settings-modal {
    background-color: #0000;
    transition: background-color 0.1s linear;
    line-height: 1;
    margin: 0;
    &.settings-open {
        background-color: #000a;
    }
    > * {
        color: var(--settings-modal-text);
    }
}

#settings-modal label {
    font-size: 1.2rem;
}

.pointable {
    cursor: pointer !important;
}