:root {
  --aquamarine: hsl(151, 100%, 80%);
  --aquamarine-hover: hsl(151, 100%, 75%);
  --eerie-black: hsl(180, 2%, 14%);
  --onyx: hsl(180, 2%, 20%);
  --border: hsl(180, 2%, 25%);
  --cultured: hsl(0, 0%, 96%);
  --gainsboro: hsl(0, 0%, 86%);
  --amaranth-pink: hsl(340, 100%, 80%);

  /* used for prism css */
  --cadet-grey: hsl(180, 2%, 63%);
  --uranian-blue: hsl(208, 97%, 85%);
  --sunset: hsl(39, 87%, 75%);

  --background: var(--eerie-black);
  --text: var(--gainsboro);
  --text-emphasis: var(--cultured);
  --primary: var(--aquamarine);
  --secondary: var(--amaranth-pink);

  --scale: 1.25; /* Major Third @ https://typescale.com/ */
  --line-height: 1.5;

  --size-minus-three: calc(var(--size-minus-two) / var(--scale));
  --size-minus-two: calc(var(--size-minus-one) / var(--scale));
  --size-minus-one: calc(var(--size-six) / var(--scale));
  --size-six: 1.25rem;
  --size-five: calc(var(--size-six) * var(--scale));
  --size-four: calc(var(--size-five) * var(--scale));
  --size-three: calc(var(--size-four) * var(--scale));
  --size-two: calc(var(--size-three) * var(--scale));
  --size-one: calc(var(--size-two) * var(--scale));

  --peach: hsla(24, 100%, 80%, 1);
  --flax: hsla(49, 100%, 80%, 1);
  --light-green: hsla(102, 100%, 80%, 1);
  --aquamarine: hsla(151, 100%, 80%, 1);
  --electric-blue: hsla(186, 100%, 80%, 1);
  --vista-blue: hsla(229, 100%, 80%, 1);
  --mauve: hsla(279, 100%, 80%, 1);
  --bakermiller-pink: hsla(340, 100%, 80%, 1);
  --bright-pink-crayola: hsla(355, 88%, 65%, 1);
  --lavender-blush: hsla(350, 64%, 95%, 1);
  --amber: hsla(44, 100%, 50%, 1);
  --tekhelet: hsla(281, 68%, 31%, 1);
  --tea-green: hsla(79, 100%, 86%, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  text-rendering: optimizeSpeed;
  font-family: "Source Serif Pro", serif;
  line-height: var(--line-height);
  display: flex;
  flex-direction: column;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--text);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: var(--text-emphasis);
}

h1 {
  font-size: var(--size-one);
}

h2 {
  font-size: var(--size-two);
}

h3 {
  font-size: var(--size-three);
}

h4 {
  font-size: var(--size-four);
}

h5 {
  font-size: var(--size-five);
}

h6,
p,
li,
tr,
td {
  font-size: var(--size-six);
}

a {
  font-size: inherit;
}

b, strong {
  font-weight: bolder;
}

i, em {
  font-style: italic;
}
main {
  /* this causes the main section to fill all available space */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/flex#auto */
  flex: auto;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.gutter {
  padding: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--row-horizontal, flex-start);
  align-items: center;
  gap: 1rem;
}

.row--space-between {
  --row-horizontal: space-between;
}

.row--flex-end {
  --row-horizontal: flex-end;
}

.row--center {
  --row-horizontal: center;
}

.icon {
  height: var(--icon-size, 1rem);
  fill: var(--text);
}

.icon:hover {
  fill: var(--text-emphasis);
}

.icon--brand {
  --icon-size: var(--size-two);
}

.icon--social {
  --icon-size: var(--size-four);
}

a:not(.header-anchor) {
  transition: all 100ms ease-in-out;
  color: var(--primary);
  text-decoration-color: var(--primary);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}

a[aria-current="page"]:not(.header-anchor) {
  text-decoration: underline;
  text-decoration-color: var(--amaranth-pink);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}

a:hover:not(.header-anchor) {
  text-decoration: underline;
  text-decoration-color: var(--amaranth-pink);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}

.header-anchor {
  text-decoration: none;
  /* we relative position so that we create a position ancestor for :before */
  position: relative;
}

.header-anchor::before {
  content: "#";
  width: 1ch;
  position: absolute;
  display: inline-block;
  left: -1.5ch;
  color: var(--primary);
  transition: all 100ms ease-in-out;
  visibility: hidden;
}

.header-anchor:hover::before {
  visibility: visible;
}

.separator {
  border-top: 1px solid var(--onyx);
}

.container {
  max-width: 58rem;
}

.hero {
  display: grid;
  gap: 1rem;
}

.featured {
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .hero {
    grid-template-columns: 350px 1fr;
  }

  .featured {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.content {
  display: grid;
  row-gap: 1rem;
  width: 100%;
  place-content: start;
  overflow-wrap: break-word;
  font-size: var(--size-six);
}

.content--breakout {
  grid-template-columns:
    [breakout-start] 1fr
    [padding-start] 1rem
    [content-start] minmax(10rem, 80ch)
    [content-end] 1rem
    [padding-end] 1fr
    [breakout-end];
}

.content--breakout > * {
  grid-column: content;
}

.content--breakout > img,
.content--breakout > pre,
.content--breakout > table,
.content--breakout > .breakout {
  grid-column: breakout;
}

.content blockquote {
  border-left: 0.25em solid var(--primary);
  padding-left: 1rem;
  margin: 1rem;
  margin-left: calc(1rem - 0.25em);
  font-weight: 300;
  font-style: italic;
}

.content ul,
.content ol {
  padding: 0 1em;
}

.content ul,
.content ol {
  list-style: none;
}

.content ol li {
  counter-increment: li;
}

.content ul:not([role="list"]) li:not(:first-child) {
  margin-top: 0.5rem;
}

.content li::before {
  color: var(--primary);
  display: inline-block;
  font-weight: 300;
}

.content ul:not([role="list"]) li::before {
  content: "○";
  width: 2ch;
}

.content ol:not([role="list"]) li::before {
  content: counter(li) ".";
  width: 3ch;
}

.footnote-ref {
  font-size: var(--size-minus-one);
}

.footnotes-sep {
  margin: 1em 0;
  grid-column: breakout;
}

.footnote-item {
  display: flex;
  margin-bottom: 1rem;
}

.content :not(pre) > code,
.content kbd,
.content samp {
  font-family: "Source Code Pro", monospace;
  background: var(--onyx);
  color: var(--primary);
  border-radius: 0.1em;
  padding: 0.1em 0.3em;
}

.content table {
  width: 100%;
  border-collapse: collapse;
}

.content thead th {
  font-weight: bolder;
  border-bottom: 3px solid var(--onyx);
}

.content tfoot th {
  font-weight: bolder;
  border-top: 3px solid var(--onyx);
}

.content td,
.content th {
  padding: 0.4em;
  color: var(--text);
  border-bottom: 1px solid var(--onyx);
}

.slim {
  font-weight: 300;
}

.text-center {
  text-align: center;
}

.dropcap > p:first-of-type::first-letter {
  font-size: var(--size-one);
  color: var(--primary);
  text-transform: uppercase;
  font-weight: bolder;
  float: left;
  margin: 0.2em 0.1em 0.1em 0.1em;
  line-height: 0.5;
}

.tombstone > p:last-of-type::after {
  background: var(--primary);
  content: "";
  float: right;
  height: 2.5ch;
  margin-left: 1em;
  width: 1ch;
}

.tag {
  text-transform: lowercase;
  border-radius: 0.25em;
  background: var(--onyx);
  font-family: "Source Code Pro", monospace;
  color: var(--text);
  font-size: var(--size-minus-one);
  padding: 0.25em 0.5em;
}

.dimmed {
  color: var(--cadet-grey);
}

.latest {
  font-size: var(--size-four);
  font-weight: 600;
}

.content pre > code {
  font-family: "Source Code Pro", monospace;
  font-size: var(--size-six);
  color: var(--text-emphasis);
  line-height: var(--line-height);
  display: block;
  padding: 1rem;
  background: var(--onyx);
  overflow: auto;
}

.content .token.keyword,
.content .token.operator,
.content .token.tag,
.content .token.atrule {
  color: var(--amaranth-pink);
}

.content .token.builtin,
.content .token.class-name,
.content .token.function,
.content .token.attr-name,
.content .token.selector,
.content .token.namespace {
  color: var(--aquamarine);
}

.content .token.boolean,
.content .token.number,
.content .token.important,
.content .token.property,
.content .token.symbol,
.content .token.variable {
  color: var(--uranian-blue);
}

.content .token.string,
.content .token.char,
.content .token.attr-value,
.content .token.regex {
  color: var(--sunset);
}

.content .token.comment,
.content .token.prolog,
.content .token.doctype,
.content .token.cdata {
  color: var(--cadet-grey);
}

.content .token.punctuation,
.content .token.url,
.content .token.constant,
.content .token.entity {
  color: var(--text);
}

.content .token.bold {
  font-weight: bold;
}

.content .token.italic {
  font-style: italic;
}
.card {
  margin: 0 auto;
  width: 100%;
  border: 1px solid var(--onyx);
  border-radius: 0.25rem;
  background: var(--onyx);
}

.card__header {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.125rem;
}

.card__title {
  font-size: var(--size-five);
  font-weight: 600;
  color: var(--text-emphasis);
}

.card__description {
  font-size: var(--size-six);
  font-weight: 300;
  color: var(--text);
  opacity: 0.7;
}

.card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  padding-top: 0;
}

.card__content--highlight {
  font-size: var(--size-six);
  color: var(--text-emphasis);
  font-weight: 600;
}

.card__content--input {
  background: var(--onyx);
  padding: 0.5rem 1rem;;
  border-radius: 0.25rem;
  border: 1px solid var(--text);
  color: var(--text);
  font-size: var(--size-six);
}

.card__content--input:focus {
  outline: 1px solid var(--aquamarine);
}

.card__footer {
  display: flex;
  padding: 1rem;
  padding-top: 0;
}

.card__button {
  background: var(--aquamarine);
  width: 100%;
  color: var(--eerie-black);
  padding: 0.5rem;
  cursor: pointer;
  border: 0;
  border-radius: 0.25rem;
  font-size: var(--size-six);
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.card__button:hover {
  background: var(--amaranth-pink);
}