:root {
    --home-color: #33F;
    --blog-color: #3F3;
    --projects-color: #F33;
    --mods-color: #FF3;
    --stories-color: #A3A;
    --not_found-color: #3FF;
}

html, body {
    margin: 0;
}

body {
    background: #222 url(/images/background.jpg) no-repeat fixed top / cover;
    font-family: "Consolas", monospace;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 0;
    color: var(--page-color);
}

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

footer {
    color: #FFF;
    text-align: center;
}

details summary::marker {
    content: "";
}

details h2:before {
    color: #FFF;
    content: "▸";
}

details:open h2:before {
    color: #FFF;
    content: "▾";
}

.box {
    background-color: #000;
    border: 1px solid var(--page-color);
    border-radius: 5px;
    color: #FFF;
    padding: 0 1em;
    margin: 0 0.2em 0.3em 0;
}

.note input[type=checkbox] {
    display: none;
}

.note input[type=checkbox]~label {
    color: var(--page-color);
    cursor: pointer;
    display: inline;
    font-style: italic;
}

.note input[type=checkbox]~span {
    max-width: fit-content;
    display: none;
}

.note input[type=checkbox]:checked~span {
    background-color: #555;
    border-radius: 3px;
    padding: 0 0.5ex;
    display: inline;
}

#back {
    text-decoration: none;
    color: var(--page-color);
}

#back:hover {
    text-decoration: underline;
}

#container {
    width: 50em;
    margin: 0.5em auto;
}

#email-link {
    color: var(--page-color);
    text-decoration: none;
}

#email-link:hover {
    text-decoration: underline;
}

/* LaTeX logo; from https://stackoverflow.com/questions/8160514/is-there-css-for-typesetting-the-latex-logo-in-html */
.latex sub, .latex sup {
    text-transform: uppercase;
}

.latex sub {
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

.latex, .latex sub {
    font-size: 1em;
}

.latex sup {
    font-size: 0.85em;
    vertical-align: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}

/* responsive for mobile */
@media screen and (width < 51em) {
    #container {
        width: 95%;
    }
}