:root {
    --header-font-color: gold;
}

body {
    background-color: #210D00;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .2fr auto .1fr; /* header menu content footer */
    row-gap: 1vh;
    padding: 1vh 1vw 1vh 1vw;
}

.page-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr .1fr;
    row-gap: 1vh;
}

.header {
    background-color: #461A04;
    border: .5vh solid black;
    outline: .5vh solid #461A04;
    grid-row: 1;
    grid-column: 1;
}

.header > h1 {
    color: var(--header-font-color);
    font-family: "KJV1611";
    text-align: center;
    text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
    font-size: 4vh;
}

.header > a {
    position: relative;
    float: right;
    bottom: 1.3vh;
    right: 1.3vh;
    color: var(--header-font-color);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: .9vh;
}

.main-body {
    background-color: #D9CEAE;
    left: 2vw;
    right: 2vw;
    grid-row: 2;
    grid-column: 1;
}

.footer {
    color: var(--header-font-color);
    background-color: #461A04;
    border-radius: 10px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    place-items: center; /* Centers both horizontally and vertically */
    grid-row: 3;
    grid-column: 1;
    align-self: end;
    min-height: 2vh;
}

.footer > a {
    display: inline-block;
}

.question-of-the-day {
    position: relative;
}

.question-of-the-day h3 {
    font-size: 3vh;
    text-align: center;
    font-family: "papyrus";
    color: #00A6FF;
}

.question-of-the-day p {
    font-size: 2.5vh;
    text-align: center;
    font-family: "papyrus";
    color: black;
}

.question-of-the-day h3::before {
    content: "";
    position: absolute;
    bottom: .3vh;
    left: 1vw;
    right: 1vw;
    height: .25vh;
    background-color: #FF533D;
}

.page-sub-heading {
    position: relative;

}

.page-sub-heading h3 {
    font-size: 3vh;
    text-align: center;
    font-family: "papyrus";
    color: #00A6FF;
}

.page-sub-heading h3::before {
    content: "";
    position: absolute;
    bottom: .3vh;
    left: 1vw;
    right: 1vw;
    height: .25vh;
    background-color: #FF533D;
}


.page-sub-heading h5 {
    font-size: 2vh;
    text-align: center;
    font-family: "papyrus";
    color: #00A6FF;
}

.page-sub-heading h5::before {
    content: "";
    position: absolute;
    bottom: .3vh;
    left: 1vw;
    right: 1vw;
    height: .25vh;
    background-color: #FF533D;
}

.question-of-the-yesterday {
    position: relative;
}

.question-of-the-yesterday h3 {
    font-size: 3vh;
    text-align: center;
    font-family: "papyrus";
    color: #00A6FF;
}

.question-of-the-yesterday p {
    font-size: 2.5vh;
    text-align: center;
    font-family: "papyrus";
    color: black;
}

.question-of-the-yesterday h3::before {
    content: "";
    position: absolute;
    bottom: .3vh;
    left: 1vw;
    right: 1vw;
    height: .25vh;
    background-color: #FF533D;
}

.menu {
    color: var(--header-font-color);
    background-color: #461A04;
    border 1vh solid black;
    border-radius: 10px;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center; /* Centers both horizontally and vertically */
    grid-row: 2;
    grid-column: 1;
}

.menu > .menu-item {
    height: 90%;
    width: 15vw;
    font-size: 1.5vh;
}

.menu > .menu-item:hover, .menu > .menu-item:active {
    background-color: #411500;
    color: #FFF38F;
}


.submenu {
    position: relative;
    color: var(--header-font-color);
    background-color: #461A04;
    border: 1% solid black;
    border-radius: 10px;
    top: 2%;
    height: 5%;
    width: 90%;
    left: 1%;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center; /* Centers both horizontally and vertically */
}


.submenu > .menu-item, .menu > .menu-item:active {
    background-color: #411500;
    color: #FFF38F;
}

.submenu > .menu-item .selected {
    background-color: #411500;
    color: #FFF38F;
}


.submenu > .menu-item {
    height: 90%;

    font-size: 1.5vh;
}

.center-table {
    table-layout: fixed;
    width: 100%;
}

.left-align {
    text-align: right;    
}


.center {
    text-align: center;
}

.answer-control {
    height: 50%;
    width: 100%;
    display: inline-block;
}

.incorrect {
    background-color: red;
}

.correct {
    background-color: green;
}

.handle {
    background-color: grey;
}

.neutral {
    background-color: LightGray;
}


.question-setup-row > td > input {
    max-width: 100%;
}

.small-table {
    position: relative;
    table-layout: fixed;
    width: 50%;
    left: 25%;
}

.medium-table {
    position: relative;
    table-layout: fixed;
    width: 80%;
    left: 10%;
}

.table-input {
    max-width: 100%;
}

.full-button {
    position: relative;
    border: none;
    width: 95%;
    left: 2.5%;
    padding: 2%;
    font-size: 2vh;
    background-color: #D9CEAE;
    color: #00A6FF;
    font-family: "papyrus";
    border-top: .25vh solid #FF533D;
    border-bottom: .25vh solid #FF533D;
    text-align: center;
}

.small-button {
    position: relative;
    border: none;
    padding: 2%;
    font-size: .8vh;
    background-color: #D9CEAE;
    color: #00A6FF;
    font-family: "papyrus";
    border-top: .15vh solid #FF533D;
    border-bottom: .15vh solid #FF533D;
    text-align: center;
}

.small-button:hover {
    background-color: #E9DEBE;
    color: #00A6FF;
    font-family: "papyrus";
}


.number-select {
    background-color: #D9CEAE;
    border-style: none;
    border-bottom-style: none;
    border-bottom-style: solid;
    border-color: #FF533D;
    text-align: center;
    color: #00A6FF;
    font-size: .9vh;
    font-family: papyrus;
}

.full-button:hover {
    background-color: #E9DEBE;
    color: #00A6FF;
    font-family: "papyrus";

}

.number-select::-webkit-inner-spin-button,
.number-select::-webkit-outer-spin-button {
    opacity: 1;
}

.number-select::-webkit-outer-spin-button,
.number-select::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    width: 25px;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.select-dropdown {
    background-color: #D9CEAE;
    outline-style: none;
    padding-left: 1vw;
    color: #00A6FF;
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-color: #FF533D;
    font-family: papyrus;
    font-size: .9vh;
    text-align: center;
}

.small_dropdown {
    font-size: .7vh;
}


.checkbox {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: var(--form-background);
    /* Not removed via appearance */
    margin: 0;
    font-family: papyrus;
    font-size: .9vh;
    color: #00A6FF;
    width: 1.8vh;
    height: 1.8vh;
    border: none;
    border-bottom: 2px solid #FF533D;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    position: relative;
    left: 25%;
}

.checkbox:checked::before {
    transform: scale(1);
}

.checkbox::before {
    content: "";
    width: 1vh;
    height: 1vh;
    clip-path: polygon(31.25% 31.25%, 43.75% 31.25%, 43.75% 87.5%,56.25% 87.5%, 56.25% 31.25%, 68.75% 31.25%, 68.75% 43.75%, 56.25% 43.75%, 56.25% 12.5%, 43.75% 12.5%, 43.75% 43.75%,31.5% 43.75% );
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #00A6FF;
    /* Windows High Contrast Mode */
}

@media screen and (min-width: 750px) {
    .lobby-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        row-gap: 1vh;
        column-gap: 1vw;
        padding: 1vh 1vw 1vh 1vw;
        grid-template-areas:
            "lobby-meta"
            "game-details"
            "lobby-details";

    }

    .lobby-meta {
        border: 3px solid black;
        grid-column: 1;
        grid-row: 1;
    }

    .lobby-details {
        border: 3px solid black;
        grid-column: 1;
        grid-row: 2;
    }

    .game-details {
        border: 3px solid black;
        grid-column: 2;
        grid-row: 1 / 3;
    }

}



@media screen and (max-width: 750px) {
    .lobby-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 1vh;
        column-gap: 1vw;
        padding: 1vh 1vw 1vh 1vw;
        grid-template-areas:
            "lobby-meta"
            "game-details"
            "lobby-details";
    }

    .lobby-meta {
        grid-column: 1;
        grid-row: 1;
    }

    .lobby-details {
        grid-column: 1;
        grid-row: 2;
    }

    .game-details {
        grid-column: 1;
        grid-row: 3;
    }
}

.question-address > h4 {
    font-size: 1.2vh;
}


.game-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr auto auto; /* controls content score */
    text-align: center;
    width: 98%;
}

.game-controls {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: auto auto auto;
    grid-template-rows: 1fr;
    width: 100%;
    padding: 1%;
    height: 2vh;
    
}

.question-contents {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
}

.team-scores {
    grid-column: 1;
    grid-row: 3;
}

.team-scores-table {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(auto);
    text-align: center;
}

.answer {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}