body {
    background: linear-gradient(0deg, skyblue 10%, aliceblue 30%);
    background-attachment: fixed;
    margin: 0;
}

:root {
    --main: dodgerblue;
    --accent: royalblue;
}

.todo { background: tomato; }
.done { background: forestgreen; }
.timestamp { background: var(--main); }
.title { background: var(--main); }
#topnav { background: var(--main); }
.button { background: var(--accent); }
#topnav #hamburger { background: var(--accent); }
#topnav #hamburger:hover { background: white; }
#topnav #hamburger:hover .line { background: var(--main); }
#topnav .button:hover { background: white; }
#shadow { background: black; }
thead { background: var(--main); }
#topnav ul a:hover { background: white; }
#org-div-home-and-up { background: var(--main); }
#org-div-home-and-up a:hover { background: white; }
#postamble { background: var(--main); }
#outline-container-main-content .outline-3 { background: white; }

.todo, .done { color: white; }
.timestamp { color: white; }
.title { color: white; }
.subtitle { color: lightgray; }
.button { color: white; }
#topnav #hamburger { color: white; }
#topnav #hamburger:hover { color: var(--accent); }
#topnav .button:hover { color: var(--accent); }
#topnav ul a { color: white; }
#topnav ul a:hover { color: var(--accent); }
#org-div-home-and-up,
#org-div-home-and-up a { color: white; }
#org-div-home-and-up a:hover { color: var(--accent); }
#postamble { color: white; }
thead { color: white; }

@font-face {
    font-family: "Public Sans";
    src: url("fonts/PublicSans-Regular.otf");
}
@font-face {
    font-family: "Jost";
    src: url("fonts/Jost-Regular.ttf");
}
@font-face {
    font-family: "Cairo";
    src: url("fonts/Cairo-Regular.ttf");
}
@font-face {
    font-family: "Amiri";
    src: url("fonts/Amiri-Regular.ttf");
}

/* None for now! */

@font-face {
    font-family: "Hack";
    src: url("fonts/Hack-Regular.ttf");
}
@font-face {
    font-family: "Monoisome";
    src: url("fonts/Monoisome-Regular.ttf");
}

#content { font-family: "Public Sans", sans-serif; }
.title,
h1, h2,
h3, h4,
#org-div-home-and-up,
#topnav { font-family: "Jost", sans-serif; }
pre,
code, .src,
.timestamp,
#postamble { font-family: "Hack", monospace; }
pre { font-size: 0.8em; line-height: 1em; }

a:focus {
    border: 0.2em solid aquamarine;
}

#main-content, #text-main-content {
    display: none;
}
#outline-container-main-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1em;
    gap: 1em;
}
#outline-container-main-content .outline-3 {
    max-width: 12em;
    padding: 0 1em;
    border-radius: 8px;
    border: 3px solid var(--main);
}

#content {
    max-width: 100%;		/* This was set to 60em in Emacs 28.1 */
}
p { text-align: justify; }

#content > :not(.title, #topnav) {
    line-height: 1.5em;
    width: 60%;
    margin: auto;
}

#org-div-home-and-up {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.5em;
    font-size: large;
}
#org-div-home-and-up a {
    text-decoration: none;
    padding: 0.5em;
    font-family: "Jost", sans-serif;
}

.title {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#table-of-contents ul {
    list-style-type: none;
}

.big-table {
    display: block;
    max-height: 20em;
    max-width: 100%;
    overflow: auto;
    scrollbar-width: thin;
}
table caption {
    margin: 0.5em;
    /* background: steelblue; */
}

.figure img { max-width: 100%; min-width: 30%; }

/* .figure { style max-width: 100%; min-width: 30%; } */

/* #outline-container-main-content .outline-3 img { */
/*     max-height: 10em; */
/* } */

.todo, .done {
    /* line-height: 1em; */
    font-weight: bold;
    padding: 0 0.2em;
    border-radius: 4px;
    display: inline-block;
}

.timestamp {
    display: inline-block;
    padding: 0 0.2em;
    border-radius: 8px;
    white-space: nowrap;
}

h1, h2,
h3, h4,
h5, h6,
#table-of-contents,
table { scroll-margin-top: 4rem; }

#postamble {
    width: 18em;
    margin: 1em auto;
    padding: 1em;
    border-radius: 8px;
}

#topnav {
    z-index: 100;
    position: sticky;
    top: 0;
}

#menu-toggle { display: none; }

#topnav #hamburger {
    position: absolute;
    right: 0;
    margin: 0.5em;
    padding: 0.5em;
    height: 1.5em;
    width: 1.5em;
    border-radius: 8px;
}
#topnav #hamburger .line {
    position: relative;
    height: 0.2em;
    width: 100%;
    margin: 0.2em auto;
    background: white;
    border-radius: 2px;
}

#menu-toggle:not(:checked) ~ #hamburger #one {
    transform: translateY(0) rotate(0);
    transition: transform 0.2s;
}
#menu-toggle:not(:checked) ~ #hamburger #two {
    transition: opacity 0.2s;
    opacity: 1;
}
#menu-toggle:not(:checked) ~ #hamburger #three {
    transform: translateY(0) rotate(0);
    transition: transform 0.2s;
}

#menu-toggle:checked ~ #hamburger #one {
    transform: translateY(0.4em) rotate(-45deg);
    transition: transform 0.2s;
}
#menu-toggle:checked ~ #hamburger #two {
    transition: opacity 0.2s;
    opacity: 0;
}
#menu-toggle:checked ~ #hamburger #three {
    transform: translateY(-0.4em) rotate(45deg);
    transition: transform 0.2s;
}

#buttons {
    position: absolute;
    margin: 0.5em;
    padding: 0.5em 0;
}
.button {
    text-decoration: none;
    border-radius: 0 8px 8px 0;
    padding: 0.5em;
}

#topnav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    list-style-type: none;
    padding: 0.5em;
    margin: 0;
}
#topnav ul a {
    padding: 0.5em;
    text-decoration: none;
}

#buttons {
    transform: translateX(-200%);
}

#hamburger {
    transform: translateX(200%);
}

@media all and (max-width: 500px) {
    #topnav { height: 3.5em; }
    #topnav #buttons {
        transform: translateX(0);
        transition: transform 1s;
    }
    #topnav #hamburger {
        transform: translateX(0);
        transition: transform 1s;
    }
    #topnav ul {
        position: absolute;
        flex-direction: column;
        background: var(--main);
        height: calc(100vh - 3.5em);
        top: 3.5em;
        padding: 0 0.5em;
        justify-content: normal;
        overflow: auto;
    }
    #topnav ul a { display: block; }
    
    #menu-toggle:not(:checked) ~ ul {
        transition: transform 0.5s;
        transform: translateX(-100%);
    }
    #menu-toggle:checked ~ ul {
        transition: transform 0.5s;
        transform: translateX(0);
    }
    #shadow {
        display: block;
        position: absolute;
        height: calc(100vh - 3.5em);
        top: 3.5em;
        right: 0;
        width: 100%;
    }
    #topnav #menu-toggle:not(:checked) ~ #shadow {
        transition: opacity 0.5s;
        visibility: hidden;
        opacity: 0;
    }
    #topnav #menu-toggle:checked ~ #shadow {
        transition: opacity 0.5s;
        visibility: visible;
        opacity: 0.5;
    }
    #content > :not(.title, #topnav) { width: 90%; }
    #outline-container-main-content {
        flex-direction: column;
    }
}

#hamburger, #shadow {
    cursor: pointer;
}