:root {
    /* Gruvbox dark colorscheme */

    --background: #282828;
    --foreground: #ebdbb2;

    /* Black + DarkGrey */
    --color0: #282828;
    --color8: #928374;

    /* DarkRed + Red */
    --color1: #cc241d;
    --color9: #fb4934;

    /* DarkGreen + Green */
    --color2: #98971a;
    --color10: #b8bb26;

    /* DarkYellow + Yellow */
    --color3: #d79921;
    --color11: #fabd2f;

    /* DarkBlue + Blue */
    --color4: #458588;
    --color12: #83a598;

    /* DarkMagenta + Magenta */
    --color5: #b16286;
    --color13: #d3869b;

    /* DarkCyan + Cyan */
    --color6: #689d6a;
    --color14: #8ec07c;

    /* LightGrey + White */
    --color7: #a89984;
    --color15: #ebdbb2;

    --text-font: "Noto Sans", "serif";
    --title-font: "Noto Sans", "sans-serif";

    --text-color: var(--foreground);
    --background-color: var(--background);

    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 15;
    background-color: var(--background);
}
h1 {
    font-family: var(--title-font);
    color: var(--color4);
    margin-top: 1ch;
    margin-bottom: 1ch;
}

h2, h3, h4 {
    font-family: var(--title-font);
    color: var(--color5);
    margin-top: 1ch;
    margin-bottom: 1ch;
}

p {
    color: var(--text-color);
    font-family: var(--text-font);
}

a:link, a:visited {
    color: var(--text-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

li {
    color: var(--foreground);
    font-family: var(--text-font);
}

header, footer {
    padding: 1.5ch;
}

footer p {
    margin: 0;
}

main {
    max-width: 85ch;
    margin: auto;
}

#title {
    text-shadow: 2px 1px 2px var(--color5);
    display: inline;
}

#map {
    margin-top: 1ch;
    float: right;
}

#map-content {
    color: var(--text-color);
    font-family: var(--text-font);
}

#map-content details {
    padding-right: 1ch;
}

#map-content details ul {
    margin: 0;
    padding: 0;
    list-style-type: circle;
    list-style-position: inside;
}

#map-content ::marker {
    color: var(--color3);
}

#map-content > details summary {
    cursor: pointer;
}

#map-content > details[open] {
    background-color: var(--background);
}

#map-content > details[open] > summary {
    color: var(--background);
    background-color: var(--foreground);
    padding-left: 1ch;
}

#map-content > details[open] div {
    padding-left: 1ch;
}

#map-content > details[open] > div {
    border: 2px solid var(--foreground);
    margin-top: 0;
}

#colorbar {
    display: block;
    background-color: var(--color3);
    height: 1vh;
}