@font-face {
  font-family: "Chunk";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/ChunkFive-Regular.woff2")
      format("woff2"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/ChunkFive-Regular.woff")
      format("woff");
  font-weight: 700;
}

:root {
  /* Colors */
  --white: #fff;
  --white-off: #dfdbda;
  --black: #000;
  --black-off: #16161c;
  --dark-blue: hsl(243, 100%, 5%);
  --dark-blue-soft: hsl(193, 100%, 10%);
  --highlight-1: hsl(43, 100%, 58%);
  --highlight-1-a0: hsl(43, 100%, 58%, 0);
  --highlight-2: hsl(343, 100%, 58%);
  --highlight-3: hsl(183, 100%, 44%);
  --highlight-4: hsl(273, 100%, 58%);
  --highlight-5: hsl(23, 100%, 58%);
  --aside-dark: hsl(193, 100%, 20%);
  --aside-light: hsl(193, 100%, 80%);
  --fore: var(--white-off);
  --back: var(--dark-blue);
  --back-soft: var(--dark-blue-soft);
  --back-alt: var(--aside);
  --default-font-stack: system-ui, sans-serif;
}

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

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--fore);
  background: var(--back);
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
  background-image: linear-gradient(
      to bottom,
      hsl(243 100% 5% / 100%) 0%,
      hsl(243 100% 5% / 0%) 100%
    ),
    radial-gradient(
      circle,
      hsla(343, 100%, 25%, 0.175),
      hsla(343, 100%, 25%, 0)
    ),
    radial-gradient(circle, hsla(43, 100%, 25%, 0.15), hsla(43, 100%, 25%, 0)),
    radial-gradient(circle, hsla(243, 100%, 25%, 0.15), hsla(243, 100%, 25%, 0)),
    radial-gradient(circle, hsla(143, 100%, 25%, 0.2), hsla(143, 100%, 25%, 0));
  background-position: 0% 0%, 20% 50%, 50% 80%, 30% 20%, 70% 40%;
  background-size: 100% 3rem, 100% 50%, 0% 30%, 80% 20%, 100% 40%;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}

a {
  color: var(--highlight-1);
  transition: color 125ms linear;
}
main a:hover {
  color: var(--highlight-5);
}

header {
  width: 100vw;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
  --gradient-direction: to left;
  /*
   , 
    linear-gradient(to right, hsl(343, 100%, 50%) .4em, hsl(23, 100%, 50%) .4em .8em,  hsl(43, 100%, 50%) .8em 1.2em, hsla(43, 100%, 50%, 0) 0em), 
    linear-gradient(to right, hsl(343, 100%, 50%) .4em, hsl(23, 100%, 50%) .4em .8em,  hsl(43, 100%, 50%) .8em 1.2em, hsla(43, 100%, 50%, 0) 0em)*/
  background: linear-gradient(
      var(--gradient-direction),
      var(--highlight-3),
      var(--highlight-3)
    ),
    linear-gradient(
      var(--gradient-direction),
      var(--highlight-5),
      var(--highlight-1)
    ),
    linear-gradient(
      var(--gradient-direction),
      var(--highlight-2),
      var(--highlight-2)
    );
  background-size: 100% 0.4rem;
  background-repeat: no-repeat;
  background-position: 2.5rem 0rem, 4rem 0.4rem, 10rem 0.8rem;
}
header h1 {
  font-size: 5em;
  font-size: clamp(3em, 12vw, 5em);
  font-variant: small-caps;
  line-height: 1;
  color: var(--fore);
}
header h1 a {
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.layout {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
main {
  padding: 2rem 1rem;
  line-height: 1.44;
  flex: 1;
  /*max-width: 60rem;*/
}
footer {
  padding: 1rem;
  background: var(--back-soft);
}
footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
footer svg {
  width: 2rem;
  fill: var(--fore);
  transition: translate 195ms ease-in-out;
}
footer a {
  opacity: 0.8;
  transition: opacity 195ms ease-in-out;
}
footer a:hover {
  opacity: 1;
}
footer a:hover svg {
  translate: -0.25rem 0rem;
}
article {
  margin-bottom: 4rem;
}

@media screen and (min-width: 40em) {
  .layout {
    display: grid;
    grid-template-columns: 6rem minmax(10rem, 76rem) minmax(2rem, 1fr);
    grid-template-rows: 1em 1fr;
    grid-gap: 3rem;
    grid-auto-flow: dense;
  }
  header {
    width: 5em;
    height: 100vh;
    flex-direction: column-reverse;
    --gradient-direction: to bottom;
    background-size: 0.4rem 100%;
    background-position: 0rem 2.5rem, 0.4rem 4rem, 0.8rem 10rem;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
  }
  header h1 {
    transform: translate(6.667%, 2.5%);
    writing-mode: vertical-lr;
  }
  main {
    padding: 0 0 5rem;
    grid-column: 2;
    grid-row: 2;
  }
  article {
    min-width: 0;
  }
  footer {
    font-variant: small-caps;
    writing-mode: vertical-lr;
    grid-row: 1 / 3;
    grid-column: 3;
    line-height: 1;
    display: flex;
    justify-content: flex-end;
    padding: 0 1em 1em 0;
    background: transparent;
    justify-self: flex-end;
    gap: 0.5rem;
  }
  footer ul {
    margin-inline-end: 1rem;
  }
}
main h1 {
  font-size: 2.8em;
  font-size: clamp(1.6em, 5vw, 2.8em);
  font-weight: 700;
  letter-spacing: 0.035em;
  font-family: Chunk, var(--default-font-stack);
  margin-bottom: 0.5em;
}
h2 {
  font-size: 2.8em;
  font-size: clamp(1.6em, 5vw, 2.8em);
  position: relative;
  display: inline-block;
}
h2::before {
  display: none;
  content: "";
  background: hsl(193, 100%, 50%);
  position: absolute;
  bottom: 0.3em;
  right: 0;
  left: 0;
  height: 0.6rem;
  z-index: -1;
  transform: rotate(-0.8deg);
}
h3 {
  font-size: 2em;
  font-size: clamp(1.2em, 3vw, 1.6em);
  margin-bottom: 2rem;
  line-height: 1.33;
}
h4 {
  font-size: 1.6em;
  font-size: clamp(1em, 2vw, 1.4em);
  margin-bottom: 2rem;
  line-height: 1.33;
}
.postlist {
  margin-bottom: 4rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
}
.postlist .postlist-item {
  list-style: none;
  position: relative;
  padding: 2em 0em 1.5em;
}
.postlist-item:first-of-type {
  padding-top: 0rem;
}
.postlist-item:nth-of-type(6n + 2) {
  --h: 143;
}
.postlist-item:nth-of-type(6n + 3) {
  --h: 43;
}
.postlist-item:nth-of-type(6n + 4) {
  --h: 193;
}
.postlist-item:nth-of-type(6n + 5) {
  --h: 63;
}
.postlist-item:nth-of-type(6n + 6) {
  --h: 293;
}
.postlist .postlist-item:not(:last-of-type)::after {
  display: block;
  height: 0.125em;
  width: 100%;
  content: "";
  background: currentColor;
  opacity: 0.15;
  position: absolute;
  bottom: 0;
  left: 0;
}
.postlist time {
  font-size: 0.8em;
  opacity: 0.8;
  display: block;
  padding: 0.8em 0 1.2em;
  text-align: end;
}
.postlist-link {
  position: relative;
  display: inline-block;
  color: hsl(var(--h, 343), 100%, 95%);
  margin-bottom: 0.6em;
  text-decoration: none;
  font-size: 1.6em;
  font-weight: 700;
  font-family: Chunk, var(--default-font-stack);
  letter-spacing: 0.035em;
}
.postlist-link::before {
  content: "";
  right: 0;
  left: 0;
  bottom: -0.1em;
  position: absolute;
  z-index: -1;
  background: hsl(var(--h, 343), 100%, 65%);
  transform: scaleX(0.75);
  transform-origin: 0% 100%;
  transition: transform 175ms ease-out;
  height: 0.2em;
}
.postlist-link:hover {
  color: hsl(var(--h, 343), 100%, 90%);
}
.postlist-link:hover::before {
  transform: scaleX(1);
}
.postlist-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  list-style: none;
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 0.8em;
}
.postlist-tags a {
  padding: 0.25em 0.85em 0.35em 0.85em;
  background: var(--highlight-3);
  color: var(--black);
  border-radius: 1em;
  text-decoration: none;
  transition: background-color 125ms ease-out;
}
.postlist-tags a:hover {
  color: initial;
  background-color: var(--highlight-1);
}

h2,
h3,
h4 {
  font-family: Chunk, var(--default-font-stack);
  letter-spacing: 0.05em;
  font-weight: normal;
}

.post {
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.6;
  /* padding: 1rem; */
}
.post h1 {
  line-height: 1.33;
}

.series-list {
  padding-left: 2rem;
}
.series-header,
.series-list {
  display: none;
}
.article-ring {
  list-style: none;
}
.article-ring li {
  margin-bottom: 1rem;
}
.article-ring li span {
  display: block;
  margin-bottom: 0.25rem;
}
aside ul {
  margin-bottom: 2rem;
}
.aside-tags {
  justify-content: flex-start;
}
@media screen and (min-width: 56em) {
  .post {
    display: grid;
    grid-template-columns: 8fr 3.5fr;
    gap: 3rem;
  }
  article {
    margin-bottom: 0;
  }
  .series-header,
  .series-list {
    display: block;
  }
}

.post-meta span {
  display: block;
}

:not(pre) > code {
  font-family: monospace;
  padding-inline: 0.1875em;
  font-size: 0.825em;
  background: var(--back-soft);
  border-radius: 0.25em;
}
article pre[class*="language-"] {
  padding: 1.5em 0.5rem;
  margin: 0 0 2rem;
}
article pre:not([class*="language-"]) {
  font-size: 0.8em;
  margin: 0 0 2rem;
}
.preamble {
  font-size: 0.825em;
  position: relative;
  padding: 1em 0.75em 1.75em;
}
.preamble::before,
.preamble::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 0;
  height: 1.2rem;

  --gradient-direction: to right;
  background: linear-gradient(
      var(--gradient-direction),
      var(--highlight-3),
      var(--highlight-3)
    ),
    linear-gradient(
      var(--gradient-direction),
      var(--highlight-5),
      var(--highlight-1)
    ),
    linear-gradient(
      var(--gradient-direction),
      var(--highlight-2),
      var(--highlight-2)
    );
  background-size: 90% 0.2rem, 84% 0.2rem, 80% 0.2rem;
  background-repeat: no-repeat;
  background-position: 5% 0rem, 20% 0.2rem, 10% 0.4rem;
}
.preamble::after {
  --gradient-direction: to left;
  top: initial;
  bottom: 0;
  background-size: 80% 0.2rem, 84% 0.2rem, 90% 0.2rem;
  background-position: 10% 0rem, 20% 0.2rem, 5% 0.4rem;
}

video {
  max-width: 100%;
  margin-bottom: 2rem;
}
article p,
article ul,
article ol,
article li,
article figure {
  line-height: 1.7;
  margin-bottom: 2rem;
}
article figure {
  margin: 0 auto 2rem;
}
article figure img {
  max-width: 100%;
}
article .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 5px;
  gap: 5px;
}
article .grid figcaption {
  grid-column: 1 / -1;
}
article figcaption {
  font-size: 0.75em;
  font-style: italic;
}
article li {
  padding-left: 1em;
  list-style: disc;
  list-style-position: inside;
  margin-bottom: 1rem;
}
article ol {
  margin-left: 3.5rem;
}
article ol li {
  list-style-position: outside;
  list-style-type: decimal;
  padding-left: 0;
}
article ol li li {
  padding-left: 1rem;
  list-style-type: disc;
}
iframe,
.glitch-embed-wrap {
  margin-bottom: 2rem;
  max-width: 100%;
}

.table-wrap {
  max-width: 100%;
  margin: 0 0 2rem;
  overflow-x: scroll;
}
article table {
  margin: 0 0 1rem;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: nowrap;
}
article th:first-child {
  text-align: left;
}
article th,
article td {
  text-align: center;
  padding: 0.5rem 0.75rem;
}
article thead th {
  border-bottom: double 3px currentColor;
}

/* Direct Links / Markdown Headers */
.direct-link {
  font-family: sans-serif;
  text-decoration: none;
  font-style: normal;
  margin-left: 0.1em;
}
a[href].direct-link,
a[href].direct-link:visited {
  color: transparent;
}
a[href].direct-link:focus,
a[href].direct-link:focus:visited,
:hover > a[href].direct-link,
:hover > a[href].direct-link:visited {
  color: #aaa;
}