/*:root {
    --primary-color: #5E35B1;
    --primary-color-text: #FFF;
    --height-nav: 5rem;
}
html {
    --bg: var(--primary-color);
    --bg-panel: #EBEBEB;
    --color-headings: #0077FF;
    --color-text: var(--primary-color-text);
}
*/
html {
    --container-height: auto;
    --container-margin: 5em;
    --container-margin-top: var(--container-margin);
    --container-margin-bottom: var(--container-margin);
    --container-margin-right: var(--container-margin);
    --container-margin-left: var(--container-margin);
    --container-padding: 5em;
    --container-border-radius: 15px;
}

.container {
    height: var(--container-height);
    background-color: var(--bg-panel);
    margin: var(--container-margin-top) var(--container-margin-right) var(--container-margin-bottom) var(--container-margin-left);
    padding: var(--container-padding);
    border-radius: var(--container-border-radius);

    display: grid;
    grid-template-columns: 80% auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "title switch"
        "content content";
}
.container>h1 {
    grid-area: title;
    margin: 0;
    color: var(--color-headings);
}
.container>.toggle-container {
    grid-area: switch;
}
.container>p {
    color: var(--color-text);
    grid-area: content;
    font-size: 1.1em;
    line-height: 1.8em;
    margin-top: 2em;
}

@media all and (max-width: 768px) {

    .container {
        --container-height: 50vh;
        grid-template-columns: 100%;
        grid-template-rows: 15% 15% auto;
        grid-template-areas:
        "switch"
        "title"
        "content";
    }
}

@media all and (max-width: 414px) {

    .container {
        --container-height: 80vh;
        --container-margin-left: 1em;
        --container-margin-right: 1em;
        --container-padding: 2em;
        --container-border-radius: 45px;
    }
}
@media all and (max-height: 414px) {

    body {
        padding: 0;
    }

    .container {
        --container-height: 80vh;
        --container-margin-top: 1em;
        --container-margin-bottom: 1em;
        --container-padding: 2em;
        --container-border-radius: 45px;
    }
}
@media all and (max-height: 280px) {

    .container {
        --container-height: auto;
    }
}