main {
    background-color: var(--off-white);

    padding: 1em;
    width: 100%;
}

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

main section:nth-of-type(1) button {
    background-color: var(--sushi-red);
    border: none;
    padding: 1.5em;
    width: 100%;
    color: white;
    font-size: medium;
}

main section:nth-of-type(1) button:hover {
    background-color: rgb(115, 0, 0);
}

main > section:nth-of-type(1) > h2 {
    display: none;
}

section:nth-of-type(1) form.open {
    display: flex;
}

section:nth-of-type(1) form {
    flex-direction: column;
    gap: 1em;
    background-color: var(--sushi-red);
    color: white;
    padding: 1em;
}

section:nth-of-type(1) form input {
    appearance: none;

    border-radius: 50%;
    width: 1em;
    height: 1em;

    border: 2px solid var(--off-white);
    transition: 0.2s all linear;
    margin-right: 5px;

    position: relative;
    top: 4px;
}

section:nth-of-type(1) form input:checked {
    border: 8px solid var(--off-white);
}

label {
    padding: 1em;
    border-radius: 1em;
}

section:has( [value="uramaki"]:checked  ) label:nth-of-type(1),
section:has( [value="futomaki"]:checked  ) label:nth-of-type(2),
section:has( [value="nigiri"]:checked  ) label:nth-of-type(3),
section:has( [value="sashimi"]:checked  ) label:nth-of-type(4) {
    background-color: var(--back-grey);
    color: var(--off-white);
} 

main > section > article {
    color: var(--back-grey);
    display: block;

    padding: 2em;
    }

main > section > article h3, main > section > article p {
    color: var(--back-grey);
}

@media (prefers-color-scheme: dark) {
    main > section > article {
        color: var(--off-white);
    }

    main > section > article h3, main > section > article p {
    color: var(--off-white);
    }
}

section:nth-of-type(1) section {
    display: none;
    padding: 2em;
    color: var(--back-grey);
}

/* Van Sanne */
section:has( [value="uramaki"]:checked  ) #uramaki,
section:has( [value="futomaki"]:checked  ) #futomaki,
section:has( [value="nigiri"]:checked  ) #nigiri,
section:has( [value="sashimi"]:checked  ) #sashimi {
  display: block;
}

section:nth-of-type(1) section ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16em, 100%), 1fr));
    padding: 1em;

    border: groove var(--sushi-red);
    background-color: rgba(187, 187, 187, 0.088);
}


@media (prefers-color-scheme: dark) {
    section:nth-of-type(1) section ol {
        color: var(--off-white);
    }
}

section:nth-of-type(1) section ol li {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: max-content max-content;
    column-gap: 2em;

    border-right: solid var(--sushi-red);
    padding: 1em;
}

section:nth-of-type(1) section ol li h3 {
    grid-column-start: 1;

    font-weight: bold;
}

section:nth-of-type(1) section ol li p:nth-of-type(1) {
    grid-column-start: 1;
    grid-row-start: 2;

    font-weight: 400;
}

section:nth-of-type(1) section ol li p:nth-of-type(2) {
    grid-column-start: 2;
    grid-row-start: 1;

    font-weight: bold;
}

@media screen and (min-width: 768px) {
    main > section {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: min-content max-content;
    }

    main > section:nth-of-type(1) > h2 {
        display: block;
        grid-column-start: 1;
        grid-row-start: 1;

        color: var(--off-white);
        margin: 0;
        padding: 1em;
        background-color: var(--sushi-red);
    }

    main > section button {
        display: none;
    }

    main > section form {
        display: flex;
        grid-column-start: 1;
        grid-row-end: -1;
        grid-row-start: 2;
    }

    main > section > article {
    color: var(--back-grey);
    display: block;
    grid-column-start: 2;
    grid-row-start: 1;

    padding: 0;

    padding-left: 2em;
    }

    main > section section {
        grid-column-start: 2;
        grid-row-start: 2;
        grid-row-end: -1;
    }
}