.options {
    position: absolute;
    top: var(--header-height);
    left: 50%;
    transform: translateX(-50%) translateY(0%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: .25rem;
    z-index: 3;

    left: 97.5vw;
    transform: translateX(-100%) translateY(0%);
    height: 26px;
    margin: 4px 0;
}

.toggleCheckboxLabel {
    --clr-outline: var(--bw9);
    --bgc-before: var(--bw2);
    --bgc-after: var(--bw3);
    --ttx-after: 0rem;
}
.toggleCheckboxLabel {
    position: relative;
    color: var(--bw99);
    padding: 0 1rem;
    transition:
        color 200ms ease-in-out,
        transform 200ms ease-in-out;
    user-select: none;
    margin-right: 2.25rem;
    cursor: pointer;
}
.toggleCheckboxLabel::before,
.toggleCheckboxLabel::after {
    content: '';
    position: absolute;
    top: 50%; left: 100%;
    transform: translateX(0%) translateY(-50%);
    color: #fff;
    outline: 2px outset var(--clr-outline);
    transition:
    outline 200ms ease-in-out,
    background-color 200ms ease-in-out,
    transform 200ms ease-in-out;
    cursor: pointer;
    user-select: none;
}
.toggleCheckboxLabel::before {
    height: 1rem;
    width: 2rem;
    border-radius: 5rem;
    outline-offset: 4px;
    background-color: var(--bgc-before);
}
.toggleCheckboxLabel::after {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    transform: translateX(var(--ttx-after)) translateY(-50%);
    background-color: var(--bgc-after);
}

/* Toggle Changes */
body > input[type="checkbox"] {display: none;}
#toggleAnimation {display: none;}
#toggleAnimation:checked ~ .options .toggleCheckboxLabel[for="toggleAnimation"] {
    color: var(--bwe);
    --clr-outline: var(--bwc);
    --bgc-before: #063;
    --bgc-after: #0c6;
    --ttx-after: 1rem;
}

/* Use this template and change the ID of the Checkbox. */
#CheckboxID-02,
#CheckboxID-01 {display: none;}
#CheckboxID-02:checked ~ .options .toggleCheckboxLabel[for="CheckboxID-02"],
#CheckboxID-01:checked ~ .options .toggleCheckboxLabel[for="CheckboxID-01"] {
    color: var(--bwe);
    --clr-outline: var(--bwc);
    --bgc-before: #063;
    --bgc-after: #0c6;
    --ttx-after: 1rem;
}


/* ─ General Toggle Effects ─ */
#toggleLights:checked ~ .options .toggleCheckboxLabel[for="toggleLights"],
#toggleIso:checked ~ .options .toggleCheckboxLabel[for="toggleIso"],
#toggleOpacity:checked ~ .options .toggleCheckboxLabel[for="toggleOpacity"] {
    color: var(--bwe);
    --clr-outline: var(--bwc);
    --bgc-before: #063;
    --bgc-after: #0c6;
    --ttx-after: 1rem;
}

/* ─ Toggle Effects ─ */

/* Toggle-Opcacity */
#toggleOpacity:checked ~ main #display {opacity:.5;}
#toggleOpacity:checked ~ main * {--alp: .5;}

/* Toggle-Animation */
/* #toggleAnimation:checked ~ main .grid {
    animation: spin 3600ms ease-in-out infinite both;
    animation-name: spin;
    animation-duration: 3600ms;
    animation-timing-function: linear;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    
    animation-delay: calc(30ms * var(--hue));
    animation-play-state: running;
} */

#toggleAnimation:not(:checked) ~ main *,
#toggleAnimation:not(:checked) ~ main *::before,
#toggleAnimation:not(:checked) ~ main *::after {
    animation-play-state: paused;
}