
.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;
    left: 100vw;
    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: -1rem;
}
.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; */
    margin-top: 2.5rem;
    font-size: 14px;
    cursor: pointer;
}
.toggleCheckboxLabel::before,
.toggleCheckboxLabel::after {
    content: '';
    position: absolute;
    top: 50%; left: 100%;
    top: -100%; left: 50%;
    transform: translateX(-50%) 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 */
#toggleAnimation {display: none;}
#toggleAnimation:checked ~ .options .toggleCheckboxLabel[for="toggleAnimation"] {
    color: var(--bwe);
    --clr-outline: var(--bwc);
    --bgc-before: #063;
    --bgc-after: #0c6;
    --ttx-after: 0rem;
}

/* 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;
}
