@font-face {
  font-family: 'Meslo';
  src: url("/MesloLGLNerdFontPropo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

:root {
  --color-background: #fff;
  --color-primary: #222222;
  --color-secondary: #5D8AA8;
  --color-muted: #777;
  --color-link: #9d1a28;
  --color-footer-link: #f0f0f0;
  --color-footer-background: #3d4551;
  --color-footer: #f0f0f0;
  --color-header-link: #7b0310;
  --color-header-background: #d2d3d5;
  --color-header-title: #000; }

html, body {
  height: 100%;
  margin: 0; }

body {
  color: var(--color-primary);
  background-color: var(--color-background);
  font-family: 'Meslo', monospace; }

a {
  color: var(--color-link); }

/*
Flex layout:
This style expect header + main + footer structure.
*/
.flex-container {
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  max-width: 80ch;
  width: 100%;
  min-height: 100vh; }

.flex-container > * {
  margin: 0 0.5em;
  width: 96%;
  padding-left: 1em;
  padding-right: 1em; }

main {
  flex: 1; }

header, footer {
  width: 100vw !important;
  max-width: none !important; }

header {
  background-color: var(--color-header-background);
  padding: 1em; }
  header a {
    color: var(--color-header-link);
    text-decoration: none; }
    header a.active {
      text-decoration: underline;
      font-weight: bold; }
  header h1 {
    text-align: center; }
    header h1 a {
      color: var(--color-header-title); }

main {
  text-align: left; }

footer {
  background-color: var(--color-footer-background);
  color: var(--color-footer);
  margin-top: 3em;
  padding: 0.5em;
  text-align: center;
  font-size: small; }
  footer a {
    color: var(--color-footer-link); }

ul:not(.inline-list):not(.aria) {
  list-style-type: '*';
  padding-left: 1.2em; }
  ul:not(.inline-list):not(.aria) li::marker {
    content: '* '; }

ul.aria {
  font-size: small;
  list-style-type: none;
  padding: 0; }
  ul.aria li {
    display: inline; }
  ul.aria li::before {
    content: ">";
    margin-right: 0.4em; }

.headline {
  font-weight: bold; }

.links {
  text-align: center; }

.location {
  text-align: center; }

.centered {
  text-align: center; }

.small {
  font-size: small; }

ul.inline-list {
  list-style-type: none; }
  ul.inline-list li {
    display: inline; }
  ul.inline-list li::after {
    content: "\00B7";
    margin-left: 0.4em; }
  ul.inline-list li:last-child::after {
    content: ""; }

ul.list-spaced li {
  margin-bottom: 0.5em; }

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1E1F22;
    --color-banner: var(--color-background);
    --dm-color-links: #ffa83b;
    --color-primary: #BCBEC4FF;
    --color-link: var(--dm-color-links);
    --color-muted: #777;
    --color-footer-link: var(--dm-color-links);
    --color-footer-background: #3d4551;
    --color-footer: #BCBEC4FF;
    --color-header-link: var(--dm-color-links);
    --color-header-background: #3d4551;
    --color-header-title: #fff; } }