@import url(../main.css);
@import url(../components/navigation.css);
@import url(../components/displays.css);
@import url(../components/footer-display.css);
@import url(../components/covers.css);
@import url(../components/form-validation.css);
@import url(../components/buttons.css);
@import url(../components/boxes.css);
@import url(../base-style.css);

body{
    background-color: var(--background);
}

main {
    --rows: 3;
    max-width: 1920px;
}

main > header{
    width: 100%;
    background-color: aqua;
    grid-column: pre-first / post-last;
    grid-row: pre-first / pre-row 1;
    grid-template-columns: subgrid;
}

main > header > div{
    grid-column: pos-first / pre-last;
    grid-row: pos-row 1 / pre-last;
}

main > progress{
    grid-row: pos-row 1 / pre-row 2;
    grid-column: pos-first / pre-last;
}

main > section
{
    grid-column: pos-first / pre-last;
    grid-row: pos-row 2 / pos-last;
    background-color: var(--hardlight);
    border-radius: var(--base-size);
    padding: var(--page-margin);
}

form input[type="radio"]{
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}

form input[type="radio"] + label{
    display: block;
    padding: calc(var(--base-size) * 1.5) calc(var(--base-size) * 2);
    border-radius: var(--base-size);
    border: 1px solid #ededed;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}