main > div:first-child {
    transition: 2s;
}

main > div:last-child form label:nth-child(1) div:nth-child(3):active {
    cursor: grabbing;
}

/* checkbox maken en dan op hover? */
html:has(main > div:last-child form label:nth-child(1) div:nth-child(3):active) main > div:last-child form label:nth-child(1) button{
    border-radius: 50%;
    z-index: 999;
    opacity: 0.3;
    user-select: none;
    border-right: solid black 10px;
    cursor: grabbing;
}
html:has(main > div:last-child form label:nth-child(1) button:nth-child(1):hover):has(main > div:last-child form label:nth-child(1) div:nth-child(3):active) {
    & main > div:first-child {
        transform: translateY(-100px);
    }
    & main form:nth-child(2) {
        transform: translateX(-10%) translateY(2%);
    }
    & main > div:last-child form label:nth-child(1) div:nth-child(3)::after {
        transform:translateX(-50%) translateY(0%);
    }
    & main > div:last-child form label:nth-child(1) div:nth-child(3)::before{
        z-index: 10;
    }
}

html:has(main > div:last-child form label:nth-child(1) div:nth-child(3):active):has(main > div:last-child form label:nth-child(1) button:nth-child(2):hover) {
    & main > div:first-child {
        transform: translateX(100px);
    }
    & main form:nth-child(2) {
        transform: translateX(-10%) rotate(-3deg);
    }
    & main > div:last-child form label:nth-child(1) div:nth-child(3)::after{
        transform:translateX(-50%) translateX(-50px) translateY(50%);
    }
    & main > div:last-child form label:nth-child(1) div:nth-child(3)::before{
        transform:translateX(-50%) rotateY(50deg) rotateX(50deg);
        aspect-ratio: 1/4;
    }
}

html:has(main > div:last-child form label:nth-child(1) div:nth-child(3):active):has(main > div:last-child form label:nth-child(1) button:nth-child(4):hover) {
    & main > div:first-child {
        transform: translateX(-100px);
    }
    & main form:nth-child(2) {
        transform: translateX(-10%) rotate(3deg);
    }
    & main > div:last-child form label:nth-child(1) div:nth-child(3)::after{
        transform:translateX(-50%) translateX(50px) translateY(50%);        
    }
    & main > div:last-child form label:nth-child(1) div:nth-child(3)::before{
        transform: translateX(-50%) rotateY(-50deg) rotateX(50deg);
        aspect-ratio: 1/4;
    }
}

html:has(main > div:last-child form label:nth-child(1) div:nth-child(3):active):has(main > div:last-child form label:nth-child(1) button:nth-child(5):hover) {
    & main > div:first-child {
        transform: translateY(100px);
    }
    & main form:nth-child(2) {
        transform: translateX(-10%) translateY(-2%);
    }
    & main > div:last-child form label:nth-child(1) div:nth-child(3)::after{
        transform:translateX(-50%) translateY(50px) translateY(50%);
    }
    & main > div:last-child form label:nth-child(1) div:nth-child(3)::before{
        height: 0;
        transform:translateX(-50%) translateY(-10%);
    }
}

html:has(main form div label:nth-child(2) input:checked) {
    & main > div > div {
        perspective: 1px;
    }
    & form:nth-child(2)::before {
        animation-duration: 3s;
    }
}
html:has(main form div label:nth-child(1) input:not(:checked)) {
    & main > div > div {
        perspective: 500px;
        animation: fade-in 1s linear;
    }
    --standard-animation-speed: 40s;
    --animation-delay: -2s;
    & form:nth-child(2)::before {
        animation-duration: 30s;
    }
}

@keyframes fade-in {
    0%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

html:has(main form div label:nth-child(3) input:checked) {
    & form:nth-child(2){
        box-shadow: 0px -2px 50px white;
    }
    & form:nth-child(2)::after {
        box-shadow: inset 0 10px 10px  var(--ufo-background-color);
    }
}