:root {
    font-family: sans-serif;
}

body {
    background: var(--neutral-color-900);
    color: var(--neutral-color-100);

    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    & > header {
        width: 100%;
        padding-block: var(--length-100);
        padding-inline: var(--length-200);

        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
}

main {
    min-width: min(var(--length-4000), 100%);
    max-width: var(--length-6000);

    display: flex;
    flex-flow: column nowrap;
    gap: var(--length-150);
}

:is(section, article) {
    padding: var(--length-100);

    background: var(--neutral-color-800);

    display: flex;
    flex-flow: column nowrap;
    gap: var(--length-100);

    :is(section, article) {
        background: var(--neutral-color-700);

        gap: var(--length-75);
    }
}

menu {
    padding: 0;

    list-style: none;

    display: flex;
    flex-flow: row wrap;
    gap: var(--length-100);

    & a {
        padding-block: var(--length-50);
        padding-inline: var(--length-100);
        border-radius: var(--length-150);

        background: var(--neutral-color-900);

        text-decoration: none;
    }
}

a {
    color: var(--neutral-color-200);
}

table {
    min-width: 50%;
    margin: var(--length-100) auto;

    border-block: var(--length-10) solid var(--neutral-color-600);

    table-layout: fixed;
    border-collapse: collapse;
}

thead {
    border-block-end: var(--length-10) solid var(--neutral-color-600);
}

th, td {
    padding: var(--length-75) var(--length-100);

    vertical-align: top;
}

tfoot {
   border-block-start: var(--length-10) solid var(--neutral-color-600);
}

caption {
    caption-side: bottom;

    margin-block-start: var(--length-100);

    font-style: italic;
}

turbo-frame {
    display: contents;
}

.errors {
    background: var(--error-color-900);
    color: var(--error-color-100);
}