main {
    display: flex;
    background: linear-gradient(#0000008a, #0000008a), url(./images/hero1.jpg);
}

main section {
    width: 80%;
    background-color: var(--off-white);
    padding: 2em;
    align-self: center;

    color: var(--sushi-red);
}

@media (prefers-color-scheme: dark) {
    main section {
        background-color: var(--back-grey);
    }
}

form {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(min(45ch, 100%), 1fr));
    gap: 2em;
}

/* Bron: MDN */
input:focus, textarea:focus {
    background-color: rgba(0, 0, 0, 0.050);
    border: solid var(--back-grey) 0.2em;
    outline: none;
}

@media (prefers-color-scheme: dark) {
    input:focus, textarea:focus {
        background-color: rgba(63, 63, 63, 0.05);
        border: solid var(--off-white) 0.2em;
    }
}
/*     -     */

@media screen and (min-width: 768px) {
    main section {
        max-width: 70%;
    }
}

label input {
    width: 100%;
    border: solid var(--sushi-red);
    padding: 1em;

    color: black;
    font-size: 1em;
}

fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.5em;

    border: none;
}

fieldset input {
    display: none;
}

fieldset label {
    background-color: var(--sushi-red);
    color: var(--off-white);
    display: flex;
    justify-content: center;
    padding: 1em;
}

fieldset label:hover {
    background-color: var(--back-grey);
    color: var(--off-white);
}

fieldset label:has(input[type="radio"]:checked) {
    background-color: var(--off-white);
    border: var(--sushi-red) solid ;
    color: var(--sushi-red);
}

label:last-of-type {
    grid-column-start: 1;
    grid-column-end: -1;
}

textarea {
    width: 100%;
    height: 30vh;
    border: solid var(--sushi-red);
    padding: 1em;

    color: black;
    font-size: 1em;
    font-family: sushi;
}

input[type="submit"] {
    background-color: var(--off-white);
    border: solid var(--sushi-red);
    padding: 1em;
    width: 10em;
    color: var(--sushi-red);
}

input[type="submit"]:hover {
    background-color: var(--sushi-red);
    padding: 1em;
    width: 10em;
    color: var(--off-white);
}

@media (prefers-color-scheme: dark) {
        input[type="submit"] {
        background-color: var(--sushi-red);
        border: solid var(--off-white);
        padding: 1em;
        width: 10em;
        color: var(--off-white);
    }

    input[type="submit"]:hover {
        background-color: var(--off-white);
        padding: 1em;
        width: 10em;
        color: var(--sushi-red);
    }
}