:root {
    --colour-red: #d3303a;
    --colour-red-warmer: #e00033;
    --colour-red-cooler: #d51272;
    --colour-red-faint: #c24552;
    --colour-green: #217a3c;
    --colour-green-warmer: #4a7d00;
    --colour-green-cooler: #008858;
    --colour-green-faint: #61756c;
    --colour-yellow: #a45f22;
    --colour-yellow-warmer: #b6532f;
    --colour-yellow-cooler: #b65050;
    --colour-yellow-faint: #a65f6a;
    --colour-blue: #3740cf;
    --colour-blue-warmer: #4250ef;
    --colour-blue-cooler: #065fff;
    --colour-blue-faint: #4f54aa;
    --colour-magenta: #ba35af;
    --colour-magenta-warmer: #cf25aa;
    --colour-magenta-cooler: #6052cf;
    --colour-magenta-faint: #af5a80;
    --colour-cyan: #1f6fbf;
    --colour-cyan-warmer: #3f6faf;
    --colour-cyan-cooler: #1f77bb;
    --colour-cyan-faint: #506fa0;
    --colour-bg-red-intense: #ff8f88;
    --colour-bg-green-intense: #9adf90;
    --colour-bg-yellow-intense: #fac200;
    --colour-bg-blue-intense: #cbcfff;
    --colour-bg-magenta-intense: #df8fff;
    --colour-bg-cyan-intense: #88c8ff;
    
    --colour-bg-red-subtle: #ffcfbf;
    --colour-bg-green-subtle: #b3fabf;
    --colour-bg-yellow-subtle: #fff576;
    --colour-bg-blue-subtle: #ccdfff;
    --colour-bg-magenta-subtle: #ffddff;
    --colour-bg-cyan-subtle: #bfefff;
    
    --colour-bg-added: #d0f0d0;
    --colour-bg-added-faint: #e5ffe5;
    --colour-bg-added-refine: #b2e8be;
    --colour-fg-added: #005000;
    
    --colour-bg-changed: #f4e8bd;
    --colour-bg-changed-faint: #f9efcb;
    --colour-bg-changed-refine: #efd299;
    --colour-fg-changed: #553d00;
    
    --colour-bg-removed: #ffd8d5;
    --colour-bg-removed-faint: #ffe9e9;
    --colour-bg-removed-refine: #f3b5af;
    --colour-fg-removed: #8f1313;
    
    --colour-bg-mode-line-active: #b7c7ff;
    --colour-fg-mode-line-active: #151515;
    --colour-bg-completion: #bfe8ff;
    --colour-bg-hover: #aaeccf;
    --colour-bg-hover-secondary: #ccbfff;
    --colour-bg-hl-line: #e4efd8;
    --colour-bg-paren-match: #dfa0f3;
    --colour-bg-region: #bfefff;
    --colour-bg-err: #ffd5ea;
    --colour-bg-warning: #ffeabb;
    --colour-bg-info: #d0efda;

    --colour-fg-text: #3b3840;
    --colour-fg-text-subtle: #9b9b9b;

    --hr-space: 1.2em;
    
    --page-width:  44em;
    --video-width: 44em;
    
    --page-border: 2em;

    --line-height: 2;

    --header-padding: 0.8em;
    --min-padding: 0.2em;
    --mid-padding: 0.4em;
    --max-padding: 0.5em;
    
    --link-radius:   2px;
    --button-radius: 4px;
    --article-radius:    10px;
}

/* BODY */
html {
    overscroll-behavior-y: none;
    margin: 0px;
    padding: 0px;
    color: var(--colour-fg-text);
    font-family: "PT Sans", sans-serif;
}

body {
    margin: 0px;
}

p {
    line-height: var(--line-height);
}

h2 {
    padding-top: var(--header-padding);
}

#content {
    max-width: var(--page-width);
    padding: var(--page-border);
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}


/* LINKS */
a {
    background-color: var(--colour-bg-region);
    color: var(--colour-fg-text);
    padding: var(--min-padding);
    text-decoration: none;
    border-radius: var(--link-radius);
    white-space: nowrap;
}

a:visited {
    background-color: var(--colour-bg-info);
}

a:hover {
    background-color: var(--colour-bg-hover);
}



/* POSTAMBLE */
#postamble {
    display: flex;
    justify-content: space-around;
    color: var(--colour-fg-mode-line-active);
    background-color: var(--colour-bg-mode-line-active);
}

#postamble a {
    background-color: initial;
}

#postamble p {
    margin: 0px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/* TOC */
#table-of-contents a {
    color: var(--colour-cyan);
    background-color: initial;
    font-style: oblique;
}

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

#table-of-contents h2 {
    padding: initial;
    margin-top: var(--min-padding);
    margin-bottom: var(--min-padding);
}

/* HEADERS */
.title {
    text-align: left;
    padding-top: var(--min-padding);
    padding-bottom: var(--min-padding);
    width: fit-content;
}

.subtitle {
    background-color: var(--colour-bg-warning);
    text-align: center;
    font-size: medium;
    font-weight: bold;
    margin-top: 0;
}

.todo {
    background-color: var(--colour-bg-err);
    color: var(--colour-fg-text);
    padding: var(--min-padding);
}

.done {
    background-color: var(--colour-bg-green-intense);
    color: var(--colour-fg-text);
    padding: var(--min-padding);
}
	
h3 {
    font-size: 0.9em;
    margin-bottom: 0px;
}

/* Blocks */
/** Pagelist **/
.pagelist li {
    display: inline-grid;
    margin: var(--mid-padding);
}

.pagelist a {
    background-color: var(--colour-bg-warning);
    padding: var(--mid-padding);
    border-radius: var(--button-radius);
}

.pagelist ul {
    margin: 0px;
    padding: 0px;
}

.pagelist a:hover {
    background-color: var(--colour-bg-hover)
}

/** Blog posts **/
.postlist li {
    display: flex;
    align-items: center;
    margin: var(--mid-padding);
}

.postlist ul {
    margin: 0px;
    padding: 0px;
}

.postlist a {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    width: 100%;
    padding: var(--mid-padding);
    border-radius: var(--button-radius);
    white-space: nowrap;
    overflow: hidden;
}

.timestamp {
  font-style: italic;
  border-right: 1px solid rgba(1, 0, 0, 0.15);
  padding: 0px 1em 0px 1em;
  font-family: monospace;
}

/** List styles **/
.org-ol li {
    line-height: var(--line-height);
}

.org-ul li {
    line-height: var(--line-height);
}

/** Code blocks **/
.src {
    border: 0.25px solid black;
    padding: var(--max-padding);
    overflow: auto;
    scrollbar-width: none;
    border-radius: var(--article-radius);
}

code {
    border: 0.25px solid black;
    padding: var(--min-padding);
    white-space: nowrap;
    border-radius: var(--link-radius);
}

/** Media **/
.figure {
    text-align: center;
    font-style: italic;
    color: var(--colour-fg-text-subtle);
}

img {
    max-width: var(--page-width);
    width: 100%;
}

video {
    max-width: var(--video-width);
    width: 100%;
    border: 0.25px solid black;
    border-radius: var(--article-radius);
    display: flex;
    margin: auto;
}

/** Spacing **/    
hr {
    margin: var(--hr-space);
    border: 0px;
}