body {
    margin: 0px;
    width: 100vw;
    min-height: 100vh;

    display: grid;
}

body > * { margin: 0px; }

body > header { grid-area: header; }
body > nav    {
    grid-area: nav;
    display: flex;
}
body > main   {
    grid-area: main;
    padding: 10px 30px 10px 30px;
}
body > footer { grid-area: footer; }

body > nav > a {
    display: inline-block;
    vertical-align: middle;
    flex-basis: 0px;
}

/* Desktop Grid Layout */
body {
    grid-template-columns: 112px 2.5% auto 2.5%;
    grid-template-rows: fit-content(0px) auto auto fit-content(0px);
    grid-template-areas:
        "header header header header"
        "nav    .      main   .     "
        "nav    .      main   .     "
        "footer footer footer footer";
}

body > nav {
    flex-direction: column;
}

/* TODO: Mobile Grid Layout */
@media screen and (orientation: portrait) {
    body {
        grid-template-columns: 5% auto 5%;
        grid-template-rows: fit-content(0px) fit-content(0px) auto auto fit-content(0px);
        grid-template-areas:
            "header header header"
            "nav    nav    nav   "
            ".      main   .     "
            ".      main   .     "
            "footer footer footer";
    }
    
    body > nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    body > nav > a {
        flex-grow: 1;
    }

    #SmolYuriLabel {
        visibility: hidden;
    }

    #SmolYuriImg {
        height: 100%;
    }
}