* {
    font-family: "Aporetic Sans", sans-serif;
    /* font-family: "Aporetic Serif", serif; */
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
}

:root {
    --bg-main: #ffffff;
    --fg-main: #000000;
    --fg-alt: #193668;
    --bg-blue-subtle: #bfc9ff;
    --bg-blue-nuanced: #ecedff;
    --bg-green-nuanced: #e0f6e0;
    --bg-yellow-nuanced: #f8f0d0;
    --bg-red-nuanced: #ffe8e8;
    --bg-magenta-nuanced: #f8e6f5;
    --bg-cyan-nuanced: #e0f2fa;
    --bg-cyan-intense: #a4d5f9;
    --bg-green-intense: #8adf80;
    --bg-region: #bdbdbd;
    --bg-region-inverted: #5a5a5a; /* used for things that should use inverted theme (dark mode) */
    --fg-prose-code: #005f5f;
    --bg-prose-block-contents: #f2f2f2;
    --fg-link: #3548cf;
    --fg-link-visited: #721045;
    --bg-hover: #b2e4dc;
    --bg-hover-secondary: #f5d0a0;
    --bg-blue-intense: #bfc9ff;
    --fg-dim: #595959;
    --bg-dim: #f2f2f2;
    --border: #9f9f9f;
    --shadow-col: rgba(0, 0, 0, 0.2);
    --red: #a60000;
    --green: #006800;
    --yellow: #6f5500;
    --fg-changed: #553d00;
    --bg-changed: #ffdfa9;
    --bg-active: #c4c4c4;
    --fg-active-value: #3f578f;
    --bg-active-value: #e0f2fa;
}

/* dark theme colours */
@media (prefers-color-scheme: dark) {
    :root {
        /* vivendi tinted */
        /* --bg-main: #0d0e1c; */
        /* --fg-main: #ffffff; */
        /* --fg-alt: #c6daff; */
        /* --bg-blue-subtle: #242679; */
        /* --bg-blue-nuanced: #12154a; */
        /* --bg-green-nuanced: #092f1f; */
        /* --bg-yellow-nuanced: #381d0f; */
        /* --bg-red-nuanced: #3a0c14; */
        /* --bg-magenta-nuanced: #2f0c3f; */
        /* --bg-cyan-nuanced: #042837; */
        /* --bg-region: #555a66; */
        /* --bg-region-inverted: #bdbdbd; /\* used for things that should use inverted theme (light mode) *\/ */
        /* --fg-prose-code: #6ae4b9; */
        /* --bg-prose-block-contents: #1d2235; */
        /* --fg-link: #79a8ff; */
        /* --fg-link-visited: #feacd0; */
        /* --bg-hover: #45605e; */
        /* --bg-hover-secondary: #654a39; */
        /* --bg-blue-intense: #1640b0; */
        /* --fg-dim: #989898; */
        /* --bg-dim: #1d2235; */
        /* --border: #61647a; */
        /* vivendi */
        --bg-main: #000000;
        --fg-main: #ffffff;
        --fg-alt: #c6daff;
        --bg-blue-subtle: #242679;
        --bg-blue-nuanced: #12154a;
        --bg-green-nuanced: #092f1f;
        --bg-yellow-nuanced: #381d0f;
        --bg-red-nuanced: #3a0c14;
        --bg-magenta-nuanced: #2f0c3f;
        --bg-cyan-nuanced: #042837;
        --bg-cyan-intense: #2266ae;
        --bg-green-intense: #2f822f;
        --bg-region: #5a5a5a;
        --bg-region-inverted: #bdbdbd; /* used for things that should use inverted theme (light mode) */
        --fg-prose-code: #6ae4b9;
        --bg-prose-block-contents: #1e1e1e;
        --fg-link: #79a8ff;
        --fg-link-visited: #feacd0;
        --bg-hover: #45605e;
        --bg-hover-secondary: #654a39;
        --bg-blue-intense: #1640b0;
        --fg-dim: #989898;
        --bg-dim: #1e1e1e;
        --border: #646464;
        --shadow-col: rgba(255, 255, 255, 0.2);
        --red: #ff5f59;
        --green: #44bc44;
        --yellow: #d0bc00;
        --fg-changed: #efef80;
        --bg-changed: #363300;
        --bg-active: #535353;
        --fg-active-value: #4ae2f0;
        --bg-active-value: #042837;
    }
}

::selection {
    background-color: var(--bg-region);
}

strong {
    font-weight: bolder;
    text-decoration: underline;
}

em {
    font-style: italic;
    font-weight: inherit;
}

/* <code> tags */
code {
    font-family: "Aporetic Sans Mono", monospace;
    font-size: inherit;
    font-weight: inherit;
}
/* Code in headings */
h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
    color: var(--fg-prose-code);
}
/* Code in text */
code,
p > code,
li > code,
dd > code,
td > code {
  color: var(--fg-prose-code);
  background: var(--bg-prose-block-contents);
  word-wrap: break-word;
  box-decoration-break: clone;
  padding: .05rem .15rem .1rem;
  border-radius: .2rem;
}
/* Code blocks: <code> tags within <pre> tags */
pre {
  background-color: var(--fg-main);
  padding: 1rem;
  border-radius: 1rem;
}
pre code {
  display: block;
  color: var(--bg-main);
  background-color: var(--fg-main);
  /* background-color: #f2f2f2; */
  /* background: none; */
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  max-width: 100%;
  min-width: 100px;
  padding: 0;
  /* Hide scrollbar for … */
  -ms-overflow-style: none;  /* …IE and Edge */
  scrollbar-width: none;  /* …Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
pre code::-webkit-scrollbar {
  display: none;
}
pre code::selection {
    background-color: var(--bg-region-inverted);
}

body {
    margin: 0px;
    font-size: 1.20em;
    color: var(--fg-main);
    background-color: var(--bg-main);
    background-image: url('/static/images/background-scratches.svg');
    background-attachment: fixed;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2em;
    text-align: center;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.50em;
}

p {
    text-align: justify; /* Newspaper-like uniform widths */
}

a {
    color: var(--fg-link);
    text-decoration: none;
    outline: none;
}
a:hover, a:focus {
    background-color: var(--bg-hover);
    text-decoration: underline;
}
a:visited {
    color: var(--fg-link-visited);
}
a:visited:hover, a:visited:focus {
    background-color: var(--bg-hover-secondary);
}

/* navbar */
nav {
    display: flex;
    margin: 0;
    padding: 0;
    background-color: var(--bg-blue-nuanced);
}
.navbar-item {
    display: block;
    color: var(--fg-alt);
    font-weight: bold;
    text-align: center;
    padding: 14px 16px;
}
.navbar-item:hover {
    background-color: var(--bg-blue-intense);
}
a.navbar-item {
    color: var(--fg-alt);
}
a.navbar-item:hover {
    background-color: var(--bg-blue-intense);
}

footer {
    width: 100%;
    /* background-color: var(--bg-dim); */
    color: var(--fg-dim);
}
footer p {
    text-align: center;
    font-size: 0.72em;
}

hr {
    border-top: 1px solid var(--fg-dim);
    margin-top: 30px;
}

fieldset {
    border: 1px solid var(--border);
    border-radius: 1rem;
}

fieldset:has(input:focus) legend {
    font-weight: bold;
}

fieldset label:has(input[type="radio"]:checked) {
    font-weight: bold;
    /* background: var(--bg-active); */
}

/* GUIDING PRINCIPLE: focus should change the background/bold the text while
   hover should change the border/add underline */

/* Labelled input is hovered */
label:has(input):hover {
    text-decoration: underline;
    cursor: pointer;
}
/* Labelled input is focused */
label:has(input:focus) {
    font-weight: bold;
}
label:hover input {
    border-color: var(--fg-main);
}

input {
    font-size: 1.25rem;
    color: var(--fg-main);
    background: var(--bg-main);
    padding: .2rem;
    border: 1px solid var(--border);
    border-radius: .2rem;
    outline:none;
}

input:focus {
    color: var(--fg-active-value);
    background: var(--bg-active-value);
}

output:not(:empty) {
    font-size: 1.25rem;
    color: var(--fg-changed);
    background: var(--bg-changed);
    padding: .2rem;
    border: 1px solid var(--border);
    border-radius: .2rem;
}

/* .spaced-list > li { */
/*     margin-bottom: 0.5rem; */
/* } */

li:not(:last-child) {
    margin-bottom: 0.5rem;
}



/* ┌───────────────────────┐ */
/* │ Small/Mobile Displays │ */
/* └───────────────────────┘ */
@media (max-width: 768px) {
    html {
        font-size: 24px; /* scales rem up so everything I use rem for scales up */
    }
}



/* ┌─────────┐ */
/* │ Classes │ */
/* └─────────┘ */
.image {
    width:80%;
    height:auto;
    max-width:100%;
    max-height:100%;
    margin:5%;
}

.shadow {
    box-shadow: 0 6px 20px 0 var(--shadow-col);
}



/* Give this class to elements that can be hovered to display a tooltip. Add the
   tooltip text in the custom attribute: data-tooltip */
.tooltip {
    border-bottom: 3px dotted var(--yellow);
    cursor: help;
    position: relative;
}
.tooltip::after {
    font-size: 1.25rem;
    font-weight: normal;
    content: attr(data-tooltip);
    background: var(--bg-yellow-nuanced);
    border: 1px solid var(--yellow);
    border-radius: .2rem;
    padding: .5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: .5rem;
}
.tooltip:hover::after {
    opacity: 1;
    pointer-events: auto;
}



/* Navigation bar dropdown menu stuff */
.dropdown {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-blue-nuanced);
}
.dropdown:hover .dropdown-menu {
  display: block;
}



/* Used for containers containing rows of items that need alternating background colours for legibility */
/* .legible-rows > *:nth-child(even) { */
/*     color: var(--fg-dim); */
/*     background: var(--bg-dim); */
/* } */



/* Custom checkbox look (disabling browser's toolkit) */
.checkbox {
    /* display: inline-block; */
    /* position: relative; */
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkbox input {
    /* position: absolute; */
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    flex: 0 0 25px; /* stay 25px even when checkmark is a flex item */
    background-color: var(--bg-dim);
    border: 1px solid var(--border);
    border-radius: .2rem;
}
/* Checked */
.checkbox input:checked ~ .checkmark {
  background-color: var(--bg-green-nuanced);
}
/* Hovered */
.checkbox:hover input ~ .checkmark {
  border-color: var(--fg-main);
}
/* Checked & hovered */
.checkbox:hover input:checked ~ .checkmark {
  border-color: var(--green);
}
/* Focused */
.checkbox input:focus ~ .checkmark {
  background-color: var(--bg-active);
}
/* Checked & focused */
.checkbox input:focus:checked ~ .checkmark {
  background-color: var(--bg-green-intense);
}
/* Create the checkmark (hidden when not checked) */
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark::after {
  display: block;
}
/* Style the checkmark/indicator */
/* Note: we're using a rotated border to create a checkmark */
.checkbox .checkmark::after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--green);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



/* Custom radio button look (disabling browser's toolkit) */
.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default radio button */
.radio-container {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}