:root {
    --content-width: 48rem;

    --blue: #29adff;
    --blue-green: #125359;
    --brown: #ab5236;
    --dark-blue: #1d2b53;
    --dark-green: #008751;
    --dark-orange: #ff6c24;
    --dark-purple: #7e2553;
    --dark-red: #be1226;
    --green: #00e436;
    --lavender: #83769c;
    --light-brown: #d48e6f;
    --light-green: #a8f12e;
    --light-grey: #c2c3c7;
    --light-yellow: #fff57d;
    --medium-green: #00b251;
    --orange: #ffa300;
    --pink: #ff77a8;
    --purple: #672d8a;
    --red: #ff004d;
    --violet: #b937b8;
    --white: #fff1e8;
    --yellow: #ffec27;

    /* Green theme
    --background-top: var(--light-green);
    --background-title: var(--green);
    --shadow-title: var(--medium-green);
    --text-title: var(--blue-green);
    --background-status: var(--medium-green);
    --shadow-status: var(--blue-green);
    --shadow-content: var(--dark-blue);
    --background-main: var(--blue-green);
    --text-main: var(--white);
    --text-link: var(--yellow);
    --text-link-forthcoming: var(--orange);
    --background-highlight: var(--purple);
    --text-highlight: var(--text-main);
    --background-code: transparent;
    --text-code: var(--pink);
    */

    /* White theme */
    --background-top: var(--red);
    --background-title: var(--orange);
    --shadow-title: var(--dark-red);
    --text-title: var(--text-main);
    --background-status: var(--yellow);
    --shadow-status: var(--brown);
    --shadow-content: transparent;
    --background-main: var(--white);
    --text-main: var(--dark-blue);
    --text-link: var(--dark-orange);
    --text-link-forthcoming: var(--violet);
    --background-highlight: var(--light-yellow);
    --text-highlight: var(--text-main);
    --background-code: transparent;
    --text-code: var(--dark-purple);

    /* Common colors */
    --text-pre: var(--green);
    --background-pre: var(--dark-blue);

}

@font-face {
    font-family: "Iosevka";
    src: url(../fonts/iosevka-reg.ttf) format("truetype");
}

@font-face {
    font-family: "U001";
    src: url(../fonts/u001-reg.ttf) format("truetype");
}

@font-face {
    font-family: "U001";
    src: url(../fonts/u001-bol.ttf) format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "U001";
    src: url(../fonts/u001-ita.ttf) format("truetype");
    font-style: italic;
}

@font-face {
    font-family: "U001";
    src: url(../fonts/u001-bolita.ttf) format("truetype");
    font-weight: 700;
    font-style: italic;
}

body {
    background-color: var(--background-main);
    color: var(--text-main);
    margin: 0 0 2rem 0;
    padding: 0;
    font-family: "U001", system-ui, sans-serif;
    font-size: 14pt;
}

pre, code {
    font-family: "iosevka", ui-monospace, monospace;
    font-size: 13pt;
}

div.top {
    padding: 2rem 0 0 0;
    margin: 0;
    background-color: var(--background-top);
}

div.title {
    padding: 0;
    background-color: var(--background-title);
    box-shadow: 0 -2px 8px var(--shadow-title);
}

div.title > div {
    color: var(--text-title);
    margin: 0 auto;
    padding: 1rem 2rem;
    max-width: var(--content-width);
    position: relative;
}

div.title h1 {
    font-size: 1.5rem;
    padding-right: 6rem;
}

div.title img {
    height: 5rem;
    position: absolute;
    right: 2rem;
    top: 0.4rem;
}

div.status {
    padding: 1rem 0;
    background-color: var(--background-status);
    box-shadow: 0 -2px 8px var(--shadow-status);
}

div.content {
    box-shadow: 0 -2px 4px var(--shadow-content);
}

div.title > *,
div.status > *,
div.content > *,
footer > * {
    max-width: var(--content-width);
    text-align: justify;
    margin: 1rem auto;
    padding: 0 2rem;
}

footer > * {
    margin-top: 2rem;
}

div.status > p:first-child {
    margin: 0 auto;
}

div.content > *:first-child {
    margin-top: 0;
    padding-top: 1rem;
}

ol, ul {
    box-sizing: border-box;
}

div.content > ul, div.content > ol {
    padding-right: 0;
}

a {
    color: var(--text-link);
    font-weight: bold;
    text-decoration: none;
}

a[href="#"] {
    color: var(--text-link-forthcoming);
}

p.post-scriptum {
    font-style: italic;
}

p.post-scriptum::before {
    content: "P.S. ";
}

span.status {
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem 0.2rem 0.5rem;
    border-radius: 0.3rem;
}

span.status.wip{
    background-color: var(--orange);
    color: var(--light-yellow);
}

span.status.first-draft {
    background-color: var(--blue);
}

span.note {
    font-size: smaller;
    color: var(--light-grey);
    vertical-align: super;
    font-style: italic;
}

span.quote {
    background-color: var(--background-highlight);
    color: var(--text-highlight);
}

span.quote::before {
    content: "“";
}

span.quote::after {
    content: "”";
}

span.abstract {
    font-style: italic;
}

ul.equations {
    list-style-type: none;
}

ul.equations li {
    font-family: monospace;
}

div.content blockquote {
    max-width: calc(var(--content-width) - 2em);
    margin: 0 auto;
}

figure > pre {
    padding: 1rem;
}

figure img {
    display: block;
    margin: 1rem auto;
    max-width: var(--content-width);
}

figcaption {
    text-align: center;
    font-size: smaller;
    font-style: italic;
}

pre {
    background-color: var(--background-pre);
    color: var(--text-pre);
    overflow: auto;
    border-radius: 0.5rem;
}

code {
    background-color: var(--background-code);
    color: var(--text-code);
    text-wrap: nowrap;
}

/* Links */

div.post h2 {
    font-size: 120%;
}