body {
    display: grid;
    grid-template-areas:
        "header"
        "navbar"
        "body"
        "footer";
    grid-template-columns: 100%;
    grid-template-rows: auto auto 75vh auto;
    height: 100vh;
    /*! width: 100%; */
    padding: 15px;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body > div, body > div > div, body > div > div > div {
    border-radius: 8px;
    margin: 5px;
    padding: 5px;
}


.body.--double-panel {
    grid-area: body;
    display: grid;
    grid-template-areas:
            "mods";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.body.--single-panel {
    grid-area: body;
    display: grid;
    grid-template-areas: "mods";
    grid-template-columns: 1fr;
    overflow: auto;
}

.body > .sidebar {
    grid-area: sidebar;
    flex-wrap: wrap;
    overflow-y: auto;
}

.body.--view-mod {
    grid-area: body;
    background-color: #333;
    display: grid;
    grid-template-areas: "modDetails submissionDetails";
    grid-template-columns: 5fr 1fr;
    grid-template-rows: 1fr;
}

.body > .mod-list {
    grid-area: mods;
    background-color: rgba(0,0,0,0);
    padding: 0;
    overflow: auto;
}

.body > .mod-count {
    grid-area: modcount;
    background-color: rgba(0,0,0,0);
    padding: 0;
    overflow: auto;
    font-size: 12px;
}

ul > li {
    display: list-item;
}