:root {
    --main-color: floralwhite;
    --header-color: #9b5de5;
    --column-container-color: #f15bb5;
    --column-color: #fee440;
    --aside-color: #00bbf9;
    --footer-color: #00f5d4;
}

#link-section {
    position: absolute;
    left: 1rem;

    color: blue;
    font-size: max(1rem, 3vh);
}

#content-section {
    min-height: 100vh;
    text-align: center;
    color: black;
    background-color: var(--main-color);

    display: grid;
    grid-template-areas:
        "header"
        "aside1"
        "columns"
        "aside2"
        "footer";
    justify-items: center;
    align-items: stretch;
    gap: 0.5em;
    padding: 1.5em 10% 0.5em 10%;
}

#content-section > * {
    border-radius: 0.5em;
}

div {
    border-radius: 0.5em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: max(1rem, 6vh);
}

.header {
    background-color: var(--header-color);

    grid-area: header;
}

.column-container {
    padding: 0.25em;
    background-color: var(--column-container-color);

    grid-area: columns;
    display: grid;
    grid-template: repeat(3, 1fr) / 1fr;
    gap: 0.25em;
}

.column-container > div {
    height: 3em;
    font-size: 0.75em;
    background-color: var(--column-color);
}

.aside {
    background-color: var(--aside-color);
}

#aside1 {
    grid-area: aside1;
}

#aside2 {
    grid-area: aside2;
}

.footer {
    background-color: var(--footer-color);

    grid-area: footer;
}

@media (orientation: landscape) {
    #content-section {
        grid-template-areas:
            "header header header"
            "aside1 columns aside2"
            "footer footer footer";
        grid-template-rows: 1fr 4fr 1fr;
        grid-template-columns: 1fr 2fr 1fr;
    }
    
    .column-container {
        grid-template: 1fr / repeat(3, 1fr);
    }
    .column-container > div {
        height: 50%;
    }
}