website/css/stylesheet.css

* {
    box-sizing: border-box;
}

body {
    font-family: Georgia, Times;
    font-size: 20px;
    background-color: #fff8ea;
    color: #594545;
    width: 700px;
    max-width: calc(100% - 20px);
    margin: auto;
}

h1 {
    color: #815b5b;
    font-family: Helvetica, Tahoma, Arial;
    font-weight: normal;
}

h2,
h3,
h4,
h5,
h6 {
    color: #815b5b;
    font-weight: normal;
}

a {
    color: darkblue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.topnav {
    color: #fff8ea;
    background-color: #594545;
    margin-top: 10px;
    padding: 5px 5px 5px 5px;
}

.topnav a {
    color: #fff8ea;
    padding: 10px 10px;
}

.footer {
    width: 700px;
    bottom: 0;
    margin-top: auto;
    display: grid;
}

.footer-top {
    width: 700px;
    text-align: center;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}

.footer-bottom {
    z-index: 1;
    display: flex;
    justify-content: center;
    text-align: center;
}

@media screen and (max-width: 700px) {
    .topnav a {
        float: none;
        display: block;
        text-align: left;
    }
    .footer-top {
        width: fit-content;
        flex-direction: column;
    }
    .footer-bottom {
        width: fit-content;
        z-index: 1;
        display: flex;
        justify-content: center;
        text-align: center;
    }
}

/* Org Stuff */

.todo {
    font-family: monospace;
    color: red;
}
.done {
    font-family: monospace;
    color: green;
}
.priority {
    font-family: monospace;
    color: orange;
}
.tag {
    background-color: #eee;
    font-family: monospace;
    padding: 2px;
    font-size: 80%;
    font-weight: normal;
}
.timestamp {
    color: #bebebe;
}
.timestamp-kwd {
    color: #5f9ea0;
}
.org-right {
    margin-left: auto;
    margin-right: 0px;
    text-align: right;
}
.org-left {
    margin-left: 0px;
    margin-right: auto;
    text-align: left;
}
.org-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.underline {
    text-decoration: underline;
}
p.verse {
    margin-left: 3%;
}
pre.src,
pre.example {
    padding: 1.2em;
}
pre.src:before {
    display: none;
    position: absolute;
    background-color: white;
    top: -1em;
    right: 1em;
    padding: 3px;
    border: 1px solid black;
}
pre.src:hover:before {
    display: inline;
}

/* https://css-tricks.com/popping-hidden-overflow/ */
.org-src-container {
    position: relative;
    margin-bottom: 1.2em;
}
pre.src,
pre.example {
    position: static;
    overflow-x: auto;
    margin: 0;
}

/* Languages per Org manual */
pre.src-asymptote:before {
    content: "Asymptote";
}
pre.src-awk:before {
    content: "Awk";
}
pre.src-C:before {
    content: "C";
}
/* pre.src-C++ doesn't work in CSS */
pre.src-clojure:before {
    content: "Clojure";
}
pre.src-css:before {
    content: "CSS";
}
pre.src-D:before {
    content: "D";
}
pre.src-ditaa:before {
    content: "ditaa";
}
pre.src-dot:before {
    content: "Graphviz";
}
pre.src-calc:before {
    content: "Emacs Calc";
}
pre.src-emacs-lisp:before {
    content: "Emacs Lisp";
}
pre.src-fortran:before {
    content: "Fortran";
}
pre.src-gnuplot:before {
    content: "gnuplot";
}
pre.src-haskell:before {
    content: "Haskell";
}
pre.src-hledger:before {
    content: "hledger";
}
pre.src-java:before {
    content: "Java";
}
pre.src-js:before {
    content: "Javascript";
}
pre.src-latex:before {
    content: "LaTeX";
}
pre.src-ledger:before {
    content: "Ledger";
}
pre.src-lisp:before {
    content: "Lisp";
}
pre.src-lilypond:before {
    content: "Lilypond";
}
pre.src-lua:before {
    content: "Lua";
}
pre.src-matlab:before {
    content: "MATLAB";
}
pre.src-mscgen:before {
    content: "Mscgen";
}
pre.src-ocaml:before {
    content: "Objective Caml";
}
pre.src-octave:before {
    content: "Octave";
}
pre.src-org:before {
    content: "Org mode";
}
pre.src-oz:before {
    content: "OZ";
}
pre.src-plantuml:before {
    content: "Plantuml";
}
pre.src-processing:before {
    content: "Processing.js";
}
pre.src-python:before {
    content: "Python";
}
pre.src-R:before {
    content: "R";
}
pre.src-ruby:before {
    content: "Ruby";
}
pre.src-sass:before {
    content: "Sass";
}
pre.src-scheme:before {
    content: "Scheme";
}
pre.src-screen:before {
    content: "Gnu Screen";
}
pre.src-sed:before {
    content: "Sed";
}
pre.src-sh:before {
    content: "shell";
}
pre.src-sql:before {
    content: "SQL";
}
pre.src-sqlite:before {
    content: "SQLite";
}
/* additional languages in org.el's org-babel-load-languages alist */
pre.src-forth:before {
    content: "Forth";
}
pre.src-io:before {
    content: "IO";
}
pre.src-J:before {
    content: "J";
}
pre.src-makefile:before {
    content: "Makefile";
}
pre.src-maxima:before {
    content: "Maxima";
}
pre.src-perl:before {
    content: "Perl";
}
pre.src-picolisp:before {
    content: "Pico Lisp";
}
pre.src-scala:before {
    content: "Scala";
}
pre.src-shell:before {
    content: "Shell Script";
}
pre.src-ebnf2ps:before {
    content: "ebfn2ps";
}
/* additional language identifiers per \"defun org-babel-execute\"
     in ob-*.el */
pre.src-cpp:before {
    content: "C++";
}
pre.src-abc:before {
    content: "ABC";
}
pre.src-coq:before {
    content: "Coq";
}
pre.src-groovy:before {
    content: "Groovy";
}
/* additional language identifiers from org-babel-shell-names in
   ob-shell.el: ob-shell is the only babel language using a lambda to put
   the execution function name together. */
pre.src-bash:before {
    content: "bash";
}
pre.src-csh:before {
    content: "csh";
}
pre.src-ash:before {
    content: "ash";
}
pre.src-dash:before {
    content: "dash";
}
pre.src-ksh:before {
    content: "ksh";
}
pre.src-mksh:before {
    content: "mksh";
}
pre.src-posh:before {
    content: "posh";
}
/* Additional Emacs modes also supported by the LaTeX listings package */
pre.src-ada:before {
    content: "Ada";
}
pre.src-asm:before {
    content: "Assembler";
}
pre.src-caml:before {
    content: "Caml";
}
pre.src-delphi:before {
    content: "Delphi";
}
pre.src-html:before {
    content: "HTML";
}
pre.src-idl:before {
    content: "IDL";
}
pre.src-mercury:before {
    content: "Mercury";
}
pre.src-metapost:before {
    content: "MetaPost";
}
pre.src-modula-2:before {
    content: "Modula-2";
}
pre.src-pascal:before {
    content: "Pascal";
}
pre.src-ps:before {
    content: "PostScript";
}
pre.src-prolog:before {
    content: "Prolog";
}
pre.src-simula:before {
    content: "Simula";
}
pre.src-tcl:before {
    content: "tcl";
}
pre.src-tex:before {
    content: "TeX";
}
pre.src-plain-tex:before {
    content: "Plain TeX";
}
pre.src-verilog:before {
    content: "Verilog";
}
pre.src-vhdl:before {
    content: "VHDL";
}
pre.src-xml:before {
    content: "XML";
}
pre.src-nxml:before {
    content: "XML";
}
/* custom mode list */
pre.src-desktop:before {
    content: "Desktop Entry";
}
pre.src-yaml:before {
    content: "YAML";
}
/* add a generic configuration mode; LaTeX export needs an additional
   (add-to-list 'org-latex-listings-langs '(conf \" \")) in .emacs */
pre.src-conf:before {
    content: "Configuration File";
}

caption.t-above {
    caption-side: top;
}
caption.t-bottom {
    caption-side: bottom;
}
th.org-right {
    text-align: center;
}
th.org-left {
    text-align: center;
}
th.org-center {
    text-align: center;
}
td.org-right {
    text-align: right;
}
td.org-left {
    text-align: left;
}
td.org-center {
    text-align: center;
}
dt {
    font-weight: bold;
}
.footpara {
    display: inline;
}
.footdef {
    margin-bottom: 1em;
}
.figure {
    padding: 1em;
}
.figure p {
    text-align: center;
}
.inlinetask {
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
    background: #ffffcc;
}
#org-div-home-and-up {
    text-align: right;
    font-size: 70%;
    white-space: nowrap;
}
textarea {
    overflow-x: auto;
}
.linenr {
    font-size: smaller;
}
.code-highlighted {
    background-color: #ffff00;
}
.org-info-js_info-navigation {
    border-style: none;
}
#org-info-js_console-label {
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}
.org-info-js_search-highlight {
    background-color: #ffff00;
    color: #000000;
    font-weight: bold;
}
.org-svg {
    width: 90%;
}

/* Syntax Highlighting */

.org-bold {
    /* bold */
    font-weight: bold;
}
.org-bold-italic {
    /* bold-italic */
    font-weight: bold;
    font-style: italic;
}
.org-buffer-menu-buffer {
    /* buffer-menu-buffer */
    font-weight: bold;
}
.org-builtin {
    /* font-lock-builtin-face */
    color: #7a378b;
}
.org-button {
    /* button */
    text-decoration: underline;
}
.org-calendar-today {
    /* calendar-today */
    text-decoration: underline;
}
.org-change-log-acknowledgement {
    /* change-log-acknowledgement */
    color: #b22222;
}
.org-change-log-conditionals {
    /* change-log-conditionals */
    color: #a0522d;
}
.org-change-log-date {
    /* change-log-date */
    color: #8b2252;
}
.org-change-log-email {
    /* change-log-email */
    color: #a0522d;
}
.org-change-log-file {
    /* change-log-file */
    color: #0000ff;
}
.org-change-log-function {
    /* change-log-function */
    color: #a0522d;
}
.org-change-log-list {
    /* change-log-list */
    color: #a020f0;
}
.org-change-log-name {
    /* change-log-name */
    color: #008b8b;
}
.org-comint-highlight-input {
    /* comint-highlight-input */
    font-weight: bold;
}
.org-comint-highlight-prompt {
    /* comint-highlight-prompt */
    color: #00008b;
}
.org-comment {
    /* font-lock-comment-face */
    color: #b22222;
}
.org-comment-delimiter {
    /* font-lock-comment-delimiter-face */
    color: #b22222;
}
.org-completions-annotations {
    /* completions-annotations */
    font-style: italic;
}
.org-completions-common-part {
    /* completions-common-part */
    color: #000000;
    background-color: #ffffff;
}
.org-completions-first-difference {
    /* completions-first-difference */
    font-weight: bold;
}
.org-constant {
    /* font-lock-constant-face */
    color: #008b8b;
}
.org-diary {
    /* diary */
    color: #ff0000;
}
.org-diff-context {
    /* diff-context */
    color: #7f7f7f;
}
.org-diff-file-header {
    /* diff-file-header */
    background-color: #b3b3b3;
    font-weight: bold;
}
.org-diff-function {
    /* diff-function */
    background-color: #cccccc;
}
.org-diff-header {
    /* diff-header */
    background-color: #cccccc;
}
.org-diff-hunk-header {
    /* diff-hunk-header */
    background-color: #cccccc;
}
.org-diff-index {
    /* diff-index */
    background-color: #b3b3b3;
    font-weight: bold;
}
.org-diff-nonexistent {
    /* diff-nonexistent */
    background-color: #b3b3b3;
    font-weight: bold;
}
.org-diff-refine-change {
    /* diff-refine-change */
    background-color: #d9d9d9;
}
.org-dired-directory {
    /* dired-directory */
    color: #0000ff;
}
.org-dired-flagged {
    /* dired-flagged */
    color: #ff0000;
    font-weight: bold;
}
.org-dired-header {
    /* dired-header */
    color: #228b22;
}
.org-dired-ignored {
    /* dired-ignored */
    color: #7f7f7f;
}
.org-dired-mark {
    /* dired-mark */
    color: #008b8b;
}
.org-dired-marked {
    /* dired-marked */
    color: #ff0000;
    font-weight: bold;
}
.org-dired-perm-write {
    /* dired-perm-write */
    color: #b22222;
}
.org-dired-symlink {
    /* dired-symlink */
    color: #a020f0;
}
.org-dired-warning {
    /* dired-warning */
    color: #ff0000;
    font-weight: bold;
}
.org-doc {
    /* font-lock-doc-face */
    color: #8b2252;
}
.org-escape-glyph {
    /* escape-glyph */
    color: #a52a2a;
}
.org-file-name-shadow {
    /* file-name-shadow */
    color: #7f7f7f;
}
.org-flyspell-duplicate {
    /* flyspell-duplicate */
    color: #cdad00;
    font-weight: bold;
    text-decoration: underline;
}
.org-flyspell-incorrect {
    /* flyspell-incorrect */
    color: #ff4500;
    font-weight: bold;
    text-decoration: underline;
}
.org-fringe {
    /* fringe */
    background-color: #f2f2f2;
}
.org-function-name {
    /* font-lock-function-name-face */
    color: #0000ff;
}
.org-header-line {
    /* header-line */
    color: #333333;
    background-color: #e5e5e5;
}
.org-help-argument-name {
    /* help-argument-name */
    font-style: italic;
}
.org-highlight {
    /* highlight */
    background-color: #b4eeb4;
}
.org-holiday {
    /* holiday */
    background-color: #ffc0cb;
}
.org-isearch {
    /* isearch */
    color: #b0e2ff;
    background-color: #cd00cd;
}
.org-isearch-fail {
    /* isearch-fail */
    background-color: #ffc1c1;
}
.org-italic {
    /* italic */
    font-style: italic;
}
.org-keyword {
    /* font-lock-keyword-face */
    color: #a020f0;
}
.org-lazy-highlight {
    /* lazy-highlight */
    background-color: #afeeee;
}
.org-link {
    /* link */
    color: #0000ff;
    text-decoration: underline;
}
.org-link-visited {
    /* link-visited */
    color: #8b008b;
    text-decoration: underline;
}
.org-log-edit-header {
    /* log-edit-header */
    color: #a020f0;
}
.org-log-edit-summary {
    /* log-edit-summary */
    color: #0000ff;
}
.org-log-edit-unknown-header {
    /* log-edit-unknown-header */
    color: #b22222;
}
.org-match {
    /* match */
    background-color: #ffff00;
}
.org-next-error {
    /* next-error */
    background-color: #eedc82;
}
.org-nobreak-space {
    /* nobreak-space */
    color: #a52a2a;
    text-decoration: underline;
}
.org-org-archived {
    /* org-archived */
    color: #7f7f7f;
}
.org-org-block {
    /* org-block */
    color: #7f7f7f;
}
.org-org-block-begin-line {
    /* org-block-begin-line */
    color: #b22222;
}
.org-org-block-end-line {
    /* org-block-end-line */
    color: #b22222;
}
.org-org-checkbox {
    /* org-checkbox */
    font-weight: bold;
}
.org-org-checkbox-statistics-done {
    /* org-checkbox-statistics-done */
    color: #228b22;
    font-weight: bold;
}
.org-org-checkbox-statistics-todo {
    /* org-checkbox-statistics-todo */
    color: #ff0000;
    font-weight: bold;
}
.org-org-clock-overlay {
    /* org-clock-overlay */
    background-color: #ffff00;
}
.org-org-code {
    /* org-code */
    color: #7f7f7f;
}
.org-org-column {
    /* org-column */
    background-color: #e5e5e5;
}
.org-org-column-title {
    /* org-column-title */
    background-color: #e5e5e5;
    font-weight: bold;
    text-decoration: underline;
}
.org-org-date {
    /* org-date */
    color: #a020f0;
    text-decoration: underline;
}
.org-org-document-info {
    /* org-document-info */
    color: #191970;
}
.org-org-document-info-keyword {
    /* org-document-info-keyword */
    color: #7f7f7f;
}
.org-org-document-title {
    /* org-document-title */
    color: #191970;
    font-size: 144%;
    font-weight: bold;
}
.org-org-done {
    /* org-done */
    color: #228b22;
    font-weight: bold;
}
.org-org-drawer {
    /* org-drawer */
    color: #0000ff;
}
.org-org-ellipsis {
    /* org-ellipsis */
    color: #b8860b;
    text-decoration: underline;
}
.org-org-footnote {
    /* org-footnote */
    color: #a020f0;
    text-decoration: underline;
}
.org-org-formula {
    /* org-formula */
    color: #b22222;
}
.org-org-headline-done {
    /* org-headline-done */
    color: #bc8f8f;
}
.org-org-hide {
    /* org-hide */
    color: #ffffff;
}
.org-org-latex-and-export-specials {
    /* org-latex-and-export-specials */
    color: #8b4513;
}
.org-org-level-1 {
    /* org-level-1 */
    color: #0000ff;
}
.org-org-level-2 {
    /* org-level-2 */
    color: #a0522d;
}
.org-org-level-3 {
    /* org-level-3 */
    color: #a020f0;
}
.org-org-level-4 {
    /* org-level-4 */
    color: #b22222;
}
.org-org-level-5 {
    /* org-level-5 */
    color: #228b22;
}
.org-org-level-6 {
    /* org-level-6 */
    color: #008b8b;
}
.org-org-level-7 {
    /* org-level-7 */
    color: #7a378b;
}
.org-org-level-8 {
    /* org-level-8 */
    color: #8b2252;
}
.org-org-link {
    /* org-link */
    color: #0000ff;
    text-decoration: underline;
}
.org-org-meta-line {
    /* org-meta-line */
    color: #b22222;
}
.org-org-mode-line-clock {
    /* org-mode-line-clock */
    color: #000000;
    background-color: #bfbfbf;
}
.org-org-mode-line-clock-overrun {
    /* org-mode-line-clock-overrun */
    color: #000000;
    background-color: #ff0000;
}
.org-org-quote {
    /* org-quote */
    color: #7f7f7f;
}
.org-org-scheduled {
    /* org-scheduled */
    color: #006400;
}
.org-org-scheduled-previously {
    /* org-scheduled-previously */
    color: #b22222;
}
.org-org-scheduled-today {
    /* org-scheduled-today */
    color: #006400;
}
.org-org-sexp-date {
    /* org-sexp-date */
    color: #a020f0;
}
.org-org-special-keyword {
    /* org-special-keyword */
    color: #a020f0;
}
.org-org-table {
    /* org-table */
    color: #0000ff;
}
.org-org-tag {
    /* org-tag */
    font-weight: bold;
}
.org-org-target {
    /* org-target */
    text-decoration: underline;
}
.org-org-time-grid {
    /* org-time-grid */
    color: #b8860b;
}
.org-org-todo {
    /* org-todo */
    color: #ff0000;
    font-weight: bold;
}
.org-org-upcoming-deadline {
    /* org-upcoming-deadline */
    color: #b22222;
}
.org-org-verbatim {
    /* org-verbatim */
    color: #7f7f7f;
}
.org-org-verse {
    /* org-verse */
    color: #7f7f7f;
}
.org-org-warning {
    /* org-warning */
    color: #ff0000;
    font-weight: bold;
}
.org-outline-1 {
    /* outline-1 */
    color: #0000ff;
}
.org-outline-2 {
    /* outline-2 */
    color: #a0522d;
}
.org-outline-3 {
    /* outline-3 */
    color: #a020f0;
}
.org-outline-4 {
    /* outline-4 */
    color: #b22222;
}
.org-outline-5 {
    /* outline-5 */
    color: #228b22;
}
.org-outline-6 {
    /* outline-6 */
    color: #008b8b;
}
.org-outline-7 {
    /* outline-7 */
    color: #7a378b;
}
.org-outline-8 {
    /* outline-8 */
    color: #8b2252;
}
.org-preprocessor {
    /* font-lock-preprocessor-face */
    color: #7a378b;
}
.org-query-replace {
    /* query-replace */
    color: #b0e2ff;
    background-color: #cd00cd;
}
.org-regexp-grouping-backslash {
    /* font-lock-regexp-grouping-backslash */
    font-weight: bold;
}
.org-regexp-grouping-construct {
    /* font-lock-regexp-grouping-construct */
    font-weight: bold;
}
.org-region {
    /* region */
    background-color: #eedc82;
}
.org-secondary-selection {
    /* secondary-selection */
    background-color: #ffff00;
}
.org-shadow {
    /* shadow */
    color: #7f7f7f;
}
.org-show-paren-match {
    /* show-paren-match */
    background-color: #40e0d0;
}
.org-show-paren-mismatch {
    /* show-paren-mismatch */
    color: #ffffff;
    background-color: #a020f0;
}
.org-string {
    /* font-lock-string-face */
    color: #8b2252;
}
.org-tool-bar {
    /* tool-bar */
    color: #000000;
    background-color: #bfbfbf;
}
.org-tooltip {
    /* tooltip */
    color: #000000;
    background-color: #ffffe0;
}
.org-trailing-whitespace {
    /* trailing-whitespace */
    background-color: #ff0000;
}
.org-type {
    /* font-lock-type-face */
    color: #228b22;
}
.org-underline {
    /* underline */
    text-decoration: underline;
}
.org-variable-name {
    /* font-lock-variable-name-face */
    color: #a0522d;
}
.org-warning {
    /* font-lock-warning-face */
    color: #ff0000;
    font-weight: bold;
}
.org-widget-button {
    /* widget-button */
    font-weight: bold;
}
.org-widget-button-pressed {
    /* widget-button-pressed */
    color: #ff0000;
}
.org-widget-documentation {
    /* widget-documentation */
    color: #006400;
}
.org-widget-field {
    /* widget-field */
    background-color: #d9d9d9;
}
.org-widget-inactive {
    /* widget-inactive */
    color: #7f7f7f;
}
.org-widget-single-line-field {
    /* widget-single-line-field */
    background-color: #d9d9d9;
}