body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.header {
    display: grid;
    grid-template-columns: 1fr 1fr;

    position: sticky;
    top: 0;

    padding-bottom: 1em;
}

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: 1em;
    row-gap: 1em;

    overflow: scroll;
}

.behind {
    color: red;
}

.cell11 {
    grid-column: 1;
    grid-row: 1;
}

.cell12 {
    grid-column: 2;
    grid-row: 1;
}

.cell13 {
    grid-column: 3;
    grid-row: 1;
}

.cell21 {
    grid-column: 1;
    grid-row: 2;
}

.cell22 {
    grid-column: 2;
    grid-row: 2;
}

.cell23 {
    grid-column: 3;
    grid-row: 2;
}

.cell31 {
    grid-column: 1;
    grid-row: 3;
}

.cell32 {
    grid-column: 2;
    grid-row: 3;
}

.cell33 {
    grid-column: 3;
    grid-row: 3;
}

.cell41 {
    grid-column: 1;
    grid-row: 4;
}

.cell42 {
    grid-column: 2;
    grid-row: 4;
}

.cell43 {
    grid-column: 3;
    grid-row: 4;
}

.cell51 {
    grid-column: 1;
    grid-row: 5;
}

.cell52 {
    grid-column: 2;
    grid-row: 5;
}

.cell53 {
    grid-column: 3;
    grid-row: 5;
}

.cell61 {
    grid-column: 1;
    grid-row: 6;
}

.cell62 {
    grid-column: 2;
    grid-row: 6;
}

.cell63 {
    grid-column: 3;
    grid-row: 6;
}

.cell71 {
    grid-column: 1;
    grid-row: 7;
}

.cell72 {
    grid-column: 2;
    grid-row: 7;
}

.cell73 {
    grid-column: 3;
    grid-row: 7;
}

.cell81 {
    grid-column: 1;
    grid-row: 8;
}

.cell82 {
    grid-column: 2;
    grid-row: 8;
}

.cell83 {
    grid-column: 3;
    grid-row: 8;
}

.cell91 {
    grid-column: 1;
    grid-row: 9;
}

.cell92 {
    grid-column: 2;
    grid-row: 9;
}

.cell93 {
    grid-column: 3;
    grid-row: 9;
}

.save {
    grid-column: 3;
    grid-row: 10;
}

table thead {
    font-weight: bold;
}

table {
    margin-bottom: 1em;
}