:root {
    --text-color:#222; /* text color */
    --background-color:#FFF; /* background color */
    --low-contrast:#EEE; /* pageList border */
    --medium-contrast:#888; /* series title */
    --main-color:#5FA4B3; /* links */
    /* --main-contrast:#9D7D60; */
    /* --highlight:#44D4F2; */
    --highlight-contrast:#FF7700; /* link hover */
    /* --dark-color:#435255; */
    --footnote-background:#EFF;
    --radio-hover:#DDD;
    --radio-checked:#FDB;
    --footnote-brightness: 90%;
}

body {
    font-family: "Noto Sans", sans-serif;
    padding-bottom: 50px;
    color: var(--text-color);
    background-color: var(--background-color);
}

a {
    color: var(--main-color);
    text-decoration: none;
}

a:hover {
    color: var(--highlight-contrast);
    text-decoration: none;
}

code {
    font-family: 'Courier', monospace;
}

div.pageList {
    border-left: solid var(--low-contrast);
    padding-left: 0.5em;
    margin-left: 0.3em;
}

div.indexLevel-1 {
    margin-bottom: 1.5em;
}

div.series > h3 {
    margin-bottom: 0.3em;
    color: var(--medium-contrast);
}

div.page > h3 {
    margin-bottom: 0;
}

div.blurb {
    width: 95%;
    margin: auto;
}

#navigation {
    padding: 0 1%;
}

#text-column {
    max-width: 650px;
    margin: 0 auto;
    padding-bottom: 50px;
    color: var(--text-color);
}

#darkMode { opacity: 0; }

#darkMode:hover { opacity: 1; }

/* previous/next in series navigation */
.prev, .next {
    display: block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
.prev { float: left; }
.next { float: right; }
.prev a:before { content: "\2190  "; }
.next a:after { content: "  \2192"; }

/* fancy footnotes */
/* functionality */
input[type=checkbox][id|=fn] + div.fn-content {display:none;}
input[type=checkbox][id|=fn]:checked + div.fn-content {display:block;}
input[type=checkbox][id|=fn] {display:none;}
/* styling */
label[for|=fn]{
    cursor: pointer;
}
.fn-content {
    filter: brightness(var(--footnote-brightness));
    background-color: var(--footnote-background);
    padding: 10px;
    border-radius: 6px;
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    width: 96%;
    overflow-x: scroll;
}

/* fancy tags */
label[for|=tag], label[for=deselect] {
    border: 1px solid;
    border-radius: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    margin:0.2em;
    cursor: pointer;
}
label[for=deselect] {
    padding-left: 8px;
    padding-right: 8px;
    margin-left: 0;
}
input[type=radio][id|=tag]:hover + label {background-color: var(--radio-hover)}
input[type=radio][id=deselect]:hover + label {background-color: var(--radio-hover)}
input[type=radio][id|=tag]:checked + label {background-color: var(--radio-checked)}