:root {
    --color-btn-border: black;
    --color-btn-off-bg: rgb(214, 40, 40);
    --color-btn-off-shadow: rgb(255, 0, 0);
    --color-btn-disabled: gray;
    --color-btn-on-bg: rgb(84, 188, 112);
    --color-btn-on-shadow: rgb(84, 188, 112);
}
form:nth-of-type(1) {
    transition: 0.7s;
    flex-direction: row;
    gap: 9vw;
    perspective: 100px;
}
form:nth-child(2) > div {
    border-radius: 5px;
    background-color: rgba(128, 128, 128, 0.319);
    width: 19.25em;
    height: 28%;
    margin-top: 0.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.2rem;
    max-height: 10em;
    border-radius: 50% 50% 4% 5% / 5% 5% 5% 5% ;
}
form:nth-child(2) > div:nth-child(2){
    padding: 0.4em;
    padding-top: 1em;
}
form:nth-child(2) > div label {
    font-size: 0.9em;
}

input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}
form:nth-child(2) > div label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
    background-color: var(--color-btn-off-bg);
    position: relative;
    text-shadow: black 10px;
    color: black;
    border: black 0.125em solid;
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
        0 0 0.45em var(--color-btn-off-shadow);
    box-shadow: inset 0 0 0.2em 0 black, 0 0 0.5em 0 black;
    transition: 100ms;
}

form:nth-child(2) div label:has(input[type="checkbox"]:checked) {
    background-color: var(--color-btn-on-bg);
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
        0 0 0.45em var(--color-btn-on-shadow);
    box-shadow: inset 0 0 0.5em 0 black;
}
form:nth-child(2) div label:has(input[type="checkbox"]:disabled) {
    background-color: var(--color-btn-disabled);
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--color-btn-disabled);
    color: color-mix(in srgb, var(--color-btn-disabled), black 50%);
    cursor: not-allowed;
}
form:nth-child(2) > div:first-child, form:nth-child(2) > div:last-child{
    width: 13vw;
    max-height: 7em;
    border: black solid 1px;
    transform-style: preserve-3d;
    aspect-ratio: 3/4;
}

form:nth-child(2) > div:first-child {
    border-radius: 100% 7% 4% 5% / 14% 5% 5% 5% ;
    transform: rotateY(4deg) rotateZ(-14deg) translateY(35px);
} 

form:nth-child(2) > div:last-child {
    border-radius: 7% 100% 4% 5% / 5% 14% 5% 5%;
    transform: rotateY(-4deg) rotateZ(14deg) translateY(35px);
} 

@media(min-width: 670px){
    form:nth-child(2) {
        gap: 9vw;
    }
    form:nth-child(2) > div:first-child, form:nth-child(2) > div:last-child  {
        margin-top: 2em;
    }
    form:nth-child(2) div {
        width: fit-content;
    }
    form:nth-child(2) div label {
        font-size: 1em;
    }
    form:nth-child(2) > div:not(:nth-child(2)) {
        width: 10vw;
        max-width: 8em;
    }
}