/* Colors */
:root {
    --background-color: black;
    --form-background-color: rgba(43, 43, 43, 0.7);
    --button-background-color: rgba(33,33,33,0.2);
    --label-color: rgb(255, 255, 255);
}

/* Base styles */
@layer base {
    body {
        background-color: var(--background-color);
    }

    body,
    main {
        height: 100vh;
        margin: 0;
        position: relative;
        overflow: hidden;
    }

    section,
    form {
        background-color: var(--form-background-color);
        height: 100%;
    }
}

/* Visually hidden */
@layer classVH {
    main > div:last-child form label:nth-child(2) span {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
}

/* Layout styles */
@layer layout {
    main {
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        grid-template-rows: 5fr 240px 240px;
    }

    main > div:last-child {
        grid-row: 3/4;
        grid-column: 1/4;
        position: relative;
        perspective: 100px;
        z-index: 11;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    main > div:last-child form {
        width: 85%;
        min-width: 29em;
        height: 108%;
        position: absolute;
        background: var(--button-background-color);
        transform-style: preserve-3d;
        transform: rotateX(10deg) translateY(-14%);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        border-radius: 20% 20% 0 0;
    }

    main > div:last-child form label {
        display: grid;
        place-items: center;
        color: var(--label-color);
        font-size: 2em;
        margin: auto;
    }

    main > div:last-child form label div {
        display: grid;
        place-items: center;
        z-index: -1;
    }
}