.game-links {
    width: 30rem;
    margin: 2rem auto;
    text-align: center;
}

    .game-links p {
        line-height: 2rem;
        margin-top: 4rem;
    }

    .game-links h1 {
        line-height: 2rem;
        margin: 0;
    }

.gameboard h1 {
    font-size: calc(2 * var(--size-base));
    text-align: center;
    background-color: #ccc;
    color: black;
    padding: var(--size-base);
    margin: 0 calc(-1 * var(--size-base)) var(--size-base) calc(-1 * var(--size-base));
    text-transform: uppercase;
    letter-spacing: calc(0.2 * var(--size-base));
    font-family: "Arial Black";
    margin: 0;
}


.gameboard input.name {
    height: 2.5rem;
    width: 20rem;
    padding: 0 0.5rem;
    font-size: 1.5rem;
}

.gameboard button {
    background-color: #eee;
    color: var(--border-color);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.5;
}

.gameboard .sheets-mode #add-player,
.gameboard .sheets-mode #start-over {
    display: none;
}

.gameboard #form {
    max-width: 30rem;
    margin: 0 auto;
    margin-top: 3rem;
    text-align: center;
}

.gameboard form .delete {
    cursor: pointer;
}

.gameboard #sheets {
    z-index: 5;
    display: flex;
    place-content: center;
    flex-wrap: wrap;
    gap: calc(1 * var(--size-base));
    zoom: 0.8;
    margin: 0 calc(20 * var(--size-base));
}

/****************************************************************************************
  TEMPERATURE
*****************************************************************************************/
.gameboard #temperature-scale {
    position: absolute;
    right: 0.5rem;
    top: 0rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    color: white
}

    .gameboard #temperature-scale ul {
        list-style: none;
        background: linear-gradient(#eb2222, #99cae0, #afd0df);
        background: linear-gradient(#c12e21, #873465, #96c7e7);
        margin: 0;
        padding: 0;
        width: 4rem;
        font-size: 1.25rem;
        z-index: 12;
        border: 5px double #666;
        border-bottom: none;
        border-top: none;
    }

    .gameboard #temperature-scale li {
        padding: 0.5rem 0;
        cursor: pointer;
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;
    }

        .gameboard #temperature-scale li:first-child {
            color: orange;
        }

    .gameboard #temperature-scale div:last-child {
        border: 5px double #666;
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        background-color: #96c7e7;
        margin-top: -1rem;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

        .gameboard #temperature-scale div:last-child span {
            padding: 0.5rem 0;
            cursor: pointer;
        }

    .gameboard #temperature-scale .selected {
        border: 2px solid white;
        background: rgba(255,255,255,0.3);
    }

    .gameboard #temperature-scale img {
        width: 1.5rem;
    }

    .gameboard #temperature-scale .bonus {
        position: absolute;
        left: -0.25rem;
        width: 2rem;
        z-index: 20;
    }

    .gameboard #temperature-scale .water-bonus {
        top: 10rem;
    }

    .gameboard #temperature-scale .heat-bonus:nth-of-type(1) {
        top: 35rem;
    }

    .gameboard #temperature-scale .heat-bonus:nth-of-type(2) {
        top: 39.6rem;
    }

/****************************************************************************************
  OXYGEN
*****************************************************************************************/

.gameboard #oxygen-scale {
    position: absolute;
    left: 0.5rem;
    top: 2rem;
    top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    color: rgba(255, 255, 0, 0.801)
}

    .gameboard #oxygen-scale > img {
        position: absolute;
        left: 1.6rem;
        width: 2rem;
        z-index: 20;
        top: 38.2rem;
    }

    .gameboard #oxygen-scale ul {
        list-style: none;
        background: linear-gradient(#afd0df, #8f6c44, #92550f);
        background: linear-gradient(#b7c5cb, #77583c, #77583c);
        margin: 0;
        padding: 0;
        width: 4rem;
        font-size: 1.25rem;
        z-index: 12;
        border: 4px solid #666;
        border-top: none;
        border-radius: 0.25rem;
        padding: 0.3rem;
    }

    .gameboard #oxygen-scale li {
        padding: 0.5rem;
        cursor: pointer;
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }


    .gameboard #oxygen-scale .selected {
        border: 2px solid white;
        background: rgba(255,255,255,0.3);
    }


    .gameboard #oxygen-scale .bonus {
        position: absolute;
        left: 4rem;
        top: 15rem;
        width: 1rem;
        border: 6px double #666;
        background-color: white;
        z-index: 20;
    }

        .gameboard #oxygen-scale .bonus img {
            width: 0.5rem;
        }