:root {
  /* --color-shade-100: #ebedf1;
  --color-shade-300: #9ba1ab;
  --color-shade-500: #334561;
  --color-shade-800: #222e41;
  
  --color-yellow-500: #fff572;
  
  --color-red-500: #d71539;
  
  --color-blue-700: #001639; */

  /* --color-purple-500: #6e41bf;
  --color-green-500: #28a745;
  --color-blue-500: #0e74ec;
  --color-blue-900: #040d21; */

  --color-scale-black: #1b1f24;
  --color-scale-white: #ffffff;

  --color-scale-gray-0: #f6f8fa;
  --color-scale-gray-1: #eaeef2;
  --color-scale-gray-2: #d0d7de;
  --color-scale-gray-3: #afb8c1;
  --color-scale-gray-4: #8c959f;
  --color-scale-gray-5: #6e7781;
  --color-scale-gray-6: #57606a;
  --color-scale-gray-7: #424a53;
  --color-scale-gray-8: #32383f;
  --color-scale-gray-9: #24292f;

  --color-scale-blue-0: #ddf4ff;
  --color-scale-blue-1: #b6e3ff;
  --color-scale-blue-2: #80ccff;
  --color-scale-blue-3: #54aeff;
  --color-scale-blue-4: #218bff;
  --color-scale-blue-5: #0969da;
  --color-scale-blue-6: #0550ae;
  --color-scale-blue-7: #033d8b;
  --color-scale-blue-8: #0a3069;
  --color-scale-blue-9: #002155;

  --color-scale-green-0: #dafbe1;
  --color-scale-green-1: #aceebb;
  --color-scale-green-2: #6fdd8b;
  --color-scale-green-3: #4ac26b;
  --color-scale-green-4: #2da44e;
  --color-scale-green-5: #1a7f37;
  --color-scale-green-6: #116329;
  --color-scale-green-7: #044f1e;
  --color-scale-green-8: #003d16;
  --color-scale-green-9: #002d11;

  --color-scale-yellow-0: #fff8c5;
  --color-scale-yellow-1: #fae17d;
  --color-scale-yellow-2: #eac54f;
  --color-scale-yellow-3: #d4a72c;
  --color-scale-yellow-4: #bf8700;
  --color-scale-yellow-5: #9a6700;
  --color-scale-yellow-6: #7d4e00;
  --color-scale-yellow-7: #633c01;
  --color-scale-yellow-8: #4d2d00;
  --color-scale-yellow-9: #3b2300;

  --color-scale-orange-0: #fff1e5;
  --color-scale-orange-1: #ffd8b5;
  --color-scale-orange-2: #ffb77c;
  --color-scale-orange-3: #fb8f44;
  --color-scale-orange-4: #e16f24;
  --color-scale-orange-5: #bc4c00;
  --color-scale-orange-6: #953800;
  --color-scale-orange-7: #762c00;
  --color-scale-orange-8: #5c2200;
  --color-scale-orange-9: #471700;

  --color-scale-red-0: #ffebe9;
  --color-scale-red-1: #ffcecb;
  --color-scale-red-2: #ffaba8;
  --color-scale-red-3: #ff8182;
  --color-scale-red-4: #fa4549;
  --color-scale-red-5: #cf222e;
  --color-scale-red-6: #a40e26;
  --color-scale-red-7: #82071e;
  --color-scale-red-8: #660018;
  --color-scale-red-9: #4c0014;

  --color-scale-purple-0: #fbefff;
  --color-scale-purple-1: #ecd8ff;
  --color-scale-purple-2: #d8b9ff;
  --color-scale-purple-3: #c297ff;
  --color-scale-purple-4: #a475f9;
  --color-scale-purple-5: #8250df;
  --color-scale-purple-6: #6639ba;
  --color-scale-purple-7: #512a97;
  --color-scale-purple-8: #3e1f79;
  --color-scale-purple-9: #2e1461;

  --color-scale-pink-0: #ffeff7;
  --color-scale-pink-1: #ffd3eb;
  --color-scale-pink-2: #ffadda;
  --color-scale-pink-3: #ff80c8;
  --color-scale-pink-4: #e85aad;
  --color-scale-pink-5: #bf3989;
  --color-scale-pink-6: #99286e;
  --color-scale-pink-7: #772057;
  --color-scale-pink-8: #611347;
  --color-scale-pink-9: #4d0336;

  --color-scale-coral-0: #fff0eb;
  --color-scale-coral-1: #ffd6cc;
  --color-scale-coral-2: #ffb4a1;
  --color-scale-coral-3: #fd8c73;
  --color-scale-coral-4: #ec6547;
  --color-scale-coral-5: #c4432b;
  --color-scale-coral-6: #9e2f1c;
  --color-scale-coral-7: #801f0f;
  --color-scale-coral-8: #691105;
  --color-scale-coral-9: #510901;

  --color-scale-primary-0: var(--color-scale-blue-0);
  --color-scale-primary-1: var(--color-scale-blue-1);
  --color-scale-primary-2: var(--color-scale-blue-2);
  --color-scale-primary-3: var(--color-scale-blue-3);
  --color-scale-primary-4: var(--color-scale-blue-4);
  --color-scale-primary-5: var(--color-scale-blue-5);
  --color-scale-primary-6: var(--color-scale-blue-6);
  --color-scale-primary-7: var(--color-scale-blue-7);
  --color-scale-primary-8: var(--color-scale-blue-8);
  --color-scale-primary-9: var(--color-scale-blue-9);

  --color-scale-accent-0: var(--color-scale-green-0);
  --color-scale-accent-1: var(--color-scale-green-1);
  --color-scale-accent-2: var(--color-scale-green-2);
  --color-scale-accent-3: var(--color-scale-green-3);
  --color-scale-accent-4: var(--color-scale-green-4);
  --color-scale-accent-5: var(--color-scale-green-5);
  --color-scale-accent-6: var(--color-scale-green-6);
  --color-scale-accent-7: var(--color-scale-green-7);
  --color-scale-accent-8: var(--color-scale-green-8);
  --color-scale-accent-9: var(--color-scale-green-9);

  --color-scale-success-0: var(--color-scale-green-0);
  --color-scale-success-1: var(--color-scale-green-1);
  --color-scale-success-2: var(--color-scale-green-2);
  --color-scale-success-3: var(--color-scale-green-3);
  --color-scale-success-4: var(--color-scale-green-4);
  --color-scale-success-5: var(--color-scale-green-5);
  --color-scale-success-6: var(--color-scale-green-6);
  --color-scale-success-7: var(--color-scale-green-7);
  --color-scale-success-8: var(--color-scale-green-8);
  --color-scale-success-9: var(--color-scale-green-9);

  --color-scale-warning-0: var(--color-scale-orange-0);
  --color-scale-warning-1: var(--color-scale-orange-1);
  --color-scale-warning-2: var(--color-scale-orange-2);
  --color-scale-warning-3: var(--color-scale-orange-3);
  --color-scale-warning-4: var(--color-scale-orange-4);
  --color-scale-warning-5: var(--color-scale-orange-5);
  --color-scale-warning-6: var(--color-scale-orange-6);
  --color-scale-warning-7: var(--color-scale-orange-7);
  --color-scale-warning-8: var(--color-scale-orange-8);
  --color-scale-warning-9: var(--color-scale-orange-9);

  --color-scale-error-0: var(--color-scale-red-0);
  --color-scale-error-1: var(--color-scale-red-1);
  --color-scale-error-2: var(--color-scale-red-2);
  --color-scale-error-3: var(--color-scale-red-3);
  --color-scale-error-4: var(--color-scale-red-4);
  --color-scale-error-5: var(--color-scale-red-5);
  --color-scale-error-6: var(--color-scale-red-6);
  --color-scale-error-7: var(--color-scale-red-7);
  --color-scale-error-8: var(--color-scale-red-8);
  --color-scale-error-9: var(--color-scale-red-9);

  --background-body: var(--color-scale-gray-1);
  --background: var(--color-scale-gray-2);
  --background-alt: var(--color-scale-gray-3);
  --selection: var(--color-scale-gray-5);
  --text-main: var(--color-scale-gray-9);
  --text-bright: var(--color-scale-black);
  --text-muted: var(--color-scale-gray-8);
  --links: var(--color-scale-blue-5);
  --focus: var(--color-scale-blue-3);
  --border: var(--color-scale-gray-2);
  --code: var(--color-scale-black);
  --animation-duration: 0.1s;
  --button-base: var(--color-scale-gray-3);
  --button-hover: var(--color-scale-gray-4);
  --scrollbar-thumb: var(--color-scale-gray-3);
  --scrollbar-thumb-hover: var(--button-hover);
  --form-placeholder: var(--color-scale-gray-5);
  --form-text: var(--color-scale-black);
  --variable: var(--color-scale-green-5);
  --highlight: var(--color-scale-yellow-1);
}

body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-scale-gray-9);
  background-color: var(--color-scale-gray-1);
  font-display: 'swap';

  font-family: 'IBM Plex Sans', sans-serif;
  /* font-family: 'IBM Plex Mono', monospace; */
  max-width: 960px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Serif Display', serif;
  /* font-family: 'IBM Plex Mono', monospace; */
  color: var(--color-scale-black);
}

a {
  color: var(--color-scale-primary-5);
}

body > nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  background-color: var(--color-scale-white);
}

body > nav h1 {
  margin: 0;
}

body > nav a:first-child,
body > nav div:first-child,
body > nav img:first-child {
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

hr.short {
  width: 50%;
  margin-left: 0;
  margin-right: auto;
}

@media (min-width: 600px) {
  hr.short {
    width: 33%;
  }
}

#notification label {
  cursor: pointer;
  display: block;
  margin: 2em auto;
  padding: 1em 2em;
  border-radius: 6px;
  box-shadow: 0 1em 1em -0.5em rgba(200, 200, 0, 0.33);
  background-color: var(--highlight);
}

#notification label:hover {
  opacity: 0.5;
}

#notification-checkbox {
  opacity: 0.01;
  width: 1px;
  height: 1px;
  position: absolute;
}

#notification-checkbox:checked + label {
  display: none;
}

mark.error {
  display: inline-block;
  --highlight: hsl(0, 100%, 45%);
  color: #fff;
  padding: 2px 4px 2px 4px;
  margin-bottom: 1em;
}

input:read-only {
  color: var(--text-muted);
  outline: 1px dashed var(--button-base);
  outline-offset: -1px;
  background-color: var(--background-alt);
}

.flex {
  display: flex;
  gap: 1em;
  justify-content: space-between;
}

.flex > :first-child {
  margin-right: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cards {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  gap: 2em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  padding: 1em;
  border: 1px solid var(--color-scale-gray-9);
  box-shadow: 0 1em 1em -0.5em var(--color-scale-gray-2);
  background-color: var(--color-scale-white);
  border-radius: 0.5em;
  max-width: 100%;
  word-wrap: anywhere;
}

label {
  margin-top: 1em;
  font-weight: 700;
}

label + p {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  color: var(--color-scale-gray-7);
}

/* Page: index */
body.page-index a.button {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 4px;
  color: var(--color-scale-blue-5);
  background-color: var(--color-scale-white);
}

body.page-index a.button:hover,
body.page-index a.button:focus {
  text-decoration: none;
  color: var(--color-scale-blue-6);
  background-color: var(--color-scale-blue-1);
}

body.page-index main h1 {
  text-shadow: 0 0 8px rgba(255, 255, 255, 1);
}

body.page-index main {
  padding-top: 8em;
  margin-bottom: -8em;
  text-align: center;
}

body.page-index main > img {
  position: relative;
  z-index: -1;
  top: -16em;
  opacity: 0.6;
}

@media (min-width: 480px) {
  body.page-index main > img {
    top: -20em;
  }
}