body {
    background: #666666;
    background-image: url();
    width: auto;
    height: 120vh;
    padding-top: 5em;
}

h4 {
    text-align: center;
}

textarea {
    width: 300px;
    height: 400px;
    margin: 1em;
}

.page {
    display: grid;
    grid-template-columns: [left] 3fr [right] 1fr;
    grid-template-rows: [header] auto [top] 1fr [mid] 1fr [bottom] 1fr [footer] auto;
    grid-template-areas:
        "header header"
        "content sidetop"
        "content sidemid"
        "content sidebot"
        "footer footer";
    grid-gap: 1em;
    width: 50vw;
    height: 90vh;
    margin: auto;
    border: 1px solid #ffffff;
    padding: 1em;
    background: #000000;
}

.header {
    grid-area: "header";
    grid-column: left / span 2;
    grid-row: header;
    background: #dddddd;
    color: #000000;
    border: 1px solid #000000;
    padding: 1em;
}

.content {
    grid-area: "content";
    grid-column: left;
    grid-row: top / span 3;
    background: #dddddd;
    color: #000000;
    border: 1px solid #000000;
    padding: 1em;
}

.side1 {
    grid-area: "sidetop";
    grid-column: right;
    grid-row: top;
    background: #dddddd;
    border: 1px solid #000000;
    padding: 1em;
}

.side2 {
    grid-area: "sidemid";
    grid-column: right;
    grid-row: mid;
    background: #dddddd;
    border: 1px solid #000000;
    padding: 1em;
}

.side3 {
    grid-area: "sidebot";
    grid-column: right;
    grid-row: bottom;
    background: #dddddd;
    border: 1px solid #000000;
    padding: 1em;
}

.footer {
    grid-area: "footer";
    grid-column: left / span 2;
    grid-row: footer;
    background: #dddddd;
    color: #000000;
    border: 1px solid #000000;
    padding: 0.5em;
}

.columns {
    display: flex;
    flex-direction: row;
}

.column-half {
    width: 50%;
    height: auto;
}