:root {
    --dark1: #232323;
    --dark2: #2f2f2f;
    --dark3: #444444;
    --dark4: #656565;
    --light1: #ffffff;
    --light2: #e5e5e5;
    --light3: #cccccc;
    --light4: #c5c5c5;
    --accent: #69c935;
    --accent2: #61ba31;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--dark1);
    color: var(--light1);
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 12pt;
}

header {
    background-color: var(--dark2);
    font-size: 120%;
}

nav {
    display: flex;
}

nav a {
    color: var(--light1);
    text-decoration: none;
    display: grid;
    place-items: center;
    padding: 1.2em;
    transition: background-color 0.2s;
}

nav a.logo {
    padding-top: 0;
    padding-bottom: 0;
}
nav a.logo img {
    object-fit: contain;
    height: 2em;
    width: 2em;
}

nav a.active {
    box-shadow: 0 -2px var(--light1) inset;
}

nav a:hover {
    background-color: var(--dark3);
}

footer {
    background-color: var(--dark2);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1.2em;
}

footer .sep {
    margin: 0 0.5em;
    border-left: solid var(--light1) 1px;
    height: 1em;
}

footer .debug {
    margin-right: auto;
    font-style: italic;
    color: #ffb33d;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 2em;
    overflow-y: auto;
}

button, input, select {
    font-family: inherit;
    font-size: inherit;
    padding: 0.2em 0.4em;
    background-color: var(--light1);
    color: var(--dark1);
    border: solid var(--dark3) 1px;
    border-radius: 4px;
}

button:hover, select:hover {
    background-color: var(--light2);
}

button, select {
    cursor: pointer;
}

.template {
    display: none !important;
}

a {
    color: var(--accent);
}

ul {
    padding-left: 2em;
}