body {
  /*
    Imagine you’re drawing a line with a purple crayon starting from top-left
    and traveling clockwise to each (x, y) point. You can’t pick up your crayon
    and can only travel in a straight line from point-to-point, no curves.
    That’s how polygon() works.
  */
  --poster-fill-clip-default: polygon(
    /* Starting path at top left */
    0 0.1em,
    6vw 0.25em,
    12vw 0.2em,
    20vw 0.3em,
    30vw 0.2em,
    36vw 0.1em,
    48vw 0.27em,
    70vw 0.1em,
    81vw 0.25em,
    /* top right, points below here draw the right edge of the path. */
    100% 0,
    /*
      Using calc() here to act like we're drawing from right-to-left. We do this
      because if we draw from the left and use a relative unit, the size of
      the "divot" grows/shrinks depending on the width of the browser. We could
      use media queries to customize the shape at different sizes, but calc
      feels more flexible and less work.
    */
    calc(100% - 0.1em) 4em,
    100% 14em,
    calc(100% - 0.3em) 28em,
    100% 48em,
    calc(100% - 0.3em) 71em,
    /* bottom right. points below here draw the bottom edge of the path */
    100% 100%,
    calc(100% - 38vw) calc(100% - 0.2em),
    calc(100% - 68vw) calc(100% - 0.25em),
    calc(100% - 81vw) calc(100% - 0.15em),
    calc(100% - 90vw) calc(100% - 0.3em),
    /* bottom left. points below here draw the left edge of the path */
    0 calc(100% - 0.6em),
    0.3em 80%,
    0.2em 74%,
    0.1em 64%,
    0.4em 51%,
    0.3em 38%,
    0.1em 14%
  );
}

.poster-fill-default {
  position: relative;
}

.poster-fill-default::before {
  background: var(--grey) url("/images/home-intro-bg-tile.svg") repeat;
  background-size: 1000px;
  -webkit-clip-path: var(--poster-fill-clip-default);
  clip-path: var(--poster-fill-clip-default);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.poster-no-bg-img::before {
  background-image: none;
}

.banner-detail {
  display: flex;
  left: 0;
  min-height: 12rem;
  margin: 0 auto;
  max-width: 109em;
  padding: 0 1rem;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1;
}

.banner-detail b {
  display: block;
  margin: 0 auto;
  max-width: 210px;
  width: 82%;
}

.banner-detail::before,
.banner-detail::after {
  background: transparent url("/images/banner-bg.svg") no-repeat center 55%;
  background-size: 90% auto;
  content: "";
  flex: 1 1 0;
  min-width: 0;
  top: 0;
}

@media (min-width: 109em) {
  .banner-detail {
    left: calc(50% - 54.5em);
  }
}

.logo:hover .logo-base,
.logo:focus .logo-base {
  fill: #fff;
}

.navigation a:hover,
.navigation a:focus,
[data-page="blog"] .nav-blog,
[data-page="home"] .nav-work,
[data-page="about"] .nav-about {
  color: #fff;
}

[data-page="home"] {
  --limbo-red: #ff3030;
  --limbo-dark: #272727;
}

[data-page="home"] .banner {
  position: relative;
  z-index: 2;
}

.project {
  font-size: 1.3rem;
  max-width: 100%;
  overflow: hidden
}

.project h3,
  .project h4 {
  font-weight: 800;
  margin-top: 1em;
}

.project h4 {
  font-size: 80%;
}

.project p {
  line-height: 1.5;
  padding: 0.2em 0 1.2em 0;
}

.project-header {
  padding: 4rem 0 0.5rem 0;
}

.project-contents {
  margin: 0 auto;
  max-width: 86.8125rem;
  padding: 0 1rem 4rem 1rem;
  width: 95%;
}

.project-body {
  padding-bottom: 1rem;
  padding-top: 2rem;
}

.project-body p,
.project-body ul,
.project-child-capped {
  max-width: 65.94rem;
}

.project-body a {
  border-bottom: 0.15em solid currentColor;
  line-height: 1.5;
  text-decoration: none;
}

.project-specs {
  font-size: 75%;
  line-height: 1.3;
}

.project-specs-links {
  padding-top: 0.5em;
}

.project-specs-links br {
  display: none;
}

.project-specs-links a {
  display: inline-block;
}

.project-recognition {
  font-size: 90%;
}

.project-recognition li {
  margin-top: 0.75em;
}

.project-body .project-img-link {
  border-bottom: 0;
  display: block;
  text-decoration: none;
}

.project-img-link img {
  display: block;
  width: 100%;
}

.project-figure {
  padding-bottom: 1.5em;
}

.project-figure figcaption {
  font-size: 60%;
  padding: 0.5em;
}

.project-figure figcaption a {
  border-bottom: 0;
  text-decoration: underline;
}

.poster-limbo .project-img-link {
  box-shadow: 0 1px 3px #cccaac;
  overflow: hidden;
}

@media (min-width: 64em) {
  .project-contents {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 260px));
    grid-column-gap: 2rem;
    max-width: 104.13rem;
  }

  .project-contents header {
    grid-column: 1 / span 5;
  }

  .project-specs {
    font-size: 65%;
    grid-column: 1 / span 1;
    overflow-wrap: break-word;
    padding-top: 1.1rem;
  }

  .project-body {
    grid-column: 2 / span 3;
    padding-top: 0;
  }

  .project-specs-links br {
    display: block;
  }
}

.project-specs li + li {
  margin-top: 0.25rem;
}

.project-intro {
  font-size: 1.2em;
  line-height: 1.6;
}

.epilogue {
  color: var(--offwhite);
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 65rem 2rem 15rem 2rem;
  position: relative;
  text-align: center;
  z-index: 2;
}

.epilogue-poem {
  margin: 0 auto;
  max-width: 10rem;
}

.epilogue::before {
  background: var(--grey) url("/images/home-intro-bg-tile.svg") repeat;
  background-size: 1000px;
  -webkit-clip-path: var(--poster-fill-clip-default);
  clip-path: var(--poster-fill-clip-default);
  content: "";
  display: block;
  height: 100%;
  left: 0.25rem;
  position: absolute;
  top: 0;
  width: calc(100% - 0.5rem);
  z-index: -1;
}

.epilogue p + p {
  font-size: 1rem;
  margin-top: 8em;
}

.epilogue a {
  color: #ba7f44;
  font-weight: 800;
}

.epilogue::after {
  background-color: var(--lightgrey);
  --line-clip: polygon(
    3px 0,
    7px 0,
    6px 25%,
    8px 80%,
    6px 99.7%,
    100% 99.7%,
    100% 100%,
    0 100%,
    0 99.7%,
    47% 99.7%
  );
  -webkit-clip-path: var(--line-clip);
  clip-path: var(--line-clip);
  content: "";
  height: 64%;
  left: calc(50% - 10px);
  position: absolute;
  top: 0;
  width: 16px;
}

@media (min-width: 47.5em) {
  .project {
    font-size: 1.5rem;
  }
}

@media (min-width: 98em) {
  .project {
    font-size: 1.8rem;
  }

  .project-specs {
    font-size: 55%;
  }

  .project-body {
    grid-column: 2 / span 4;
  }
}

.poster-limbo {
  background-color: transparent;
  color: var(--limbo-red);
  margin-top: -24vw;
  position: relative;
  overflow: visible;
}

.poster-limbo ::selection {
  background-color: var(--limbo-red);
  color: var(--eggshell);
}

.limbo-header {
  margin: 15vw auto -15vw auto;
  position: relative;
  padding: 0 1rem;
  pointer-events: none;
  width: 95%;
}

.limbo-header h2 {
  position: relative;
  z-index: 3;
}

.limbo-header::before {
  background: transparent url("/images/limbo-owl.png") no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  left: calc(50% - 30%);
  padding-top: 100%;
  position: absolute;
  top: -51vw;
  width: 60%;
  z-index: 2;
}

.webp .limbo-header::before {
  background-image: url("/images/limbo-owl.webp");
}

.poster-limbo a {
  color: var(--limbo-red);
}

.poster-limbo a:hover,
.poster-limbo a:focus {
  color: var(--limbo-dark);
}

.poster-fill-limbo {
  background: var(--eggshell) url("/images/home-limbo-bg-tile.svg") repeat;
  background-size: 1100px;
  --limbo-poster-clip: polygon(0 0, 100% 1.2rem, 100% 100%, 0 100%);
  -webkit-clip-path: var(--limbo-poster-clip);
  clip-path: var(--limbo-poster-clip);
  padding-top: 18vw;
  width: 100%;
}

.limbo-project-contents {
  padding-bottom: 0;
}

.limbo-gw-bumper {
  background: var(--eggshell) url("/images/home-limbo-bg-tile.svg") repeat;
  background-size: 1000px;
  color: var(--limbo-red);
  font-size: 0.8rem;
  padding-top: 100vw;
  padding-bottom: 120vw;
  position: relative;
}

.limbo-gw-bumper::after {
  background-color: var(--limbo-red);
  bottom: 1rem;
  --line-clip: polygon(
    0 5px,
    100% 0,
    40% 25%,
    100% 50%,
    30% 75%,
    100% 100%,
    0 99.8%
  );
  -webkit-clip-path: var(--line-clip);
  clip-path: var(--line-clip);
  content: "";
  height: 100%;
  left: calc(50% - 2px);
  position: absolute;
  width: 4px;
}

.limbo-gw-bumper h5 {
  background-color: var(--eggshell);
  display: inline-block;
  left: 49%;
  padding: 0.5rem 0 0.8rem 0;
  position: relative;
  z-index: 2;
}

@media (min-width: 70em) {
  .poster-limbo {
    margin-top: -18vw;
  }

  .limbo-header {
    margin: 10vw auto -10vw auto;
  }

  .poster-fill-limbo {
    padding-top: 13vw;
  }

  .limbo-header h2 {
    width: 75%;
  }

  .limbo-header::before {
    left: calc(100% - 38%);
    top: -45vw;
    width: 40%;
  }
}

@media (min-width: 87.5em) {
  .limbo-gw-bumper {
    padding-bottom: 100vw;
    padding-top: 60vw;
  }
}

@media (min-width: 112.5em) {
  .limbo-gw-bumper {
    padding-bottom: 120rem;
    padding-top: 68rem;
  }
}

@media (min-width: 117.5em) {
  .poster-limbo {
    margin-top: -21.13rem;
  }

  .limbo-header {
    margin: 11.75rem auto -11.75rem auto;
    max-width: 114rem;
  }

  .poster-fill-limbo {
    padding-top: 15.25rem;
  }

  .limbo-header::before {
    top: -53rem;
  }
}

.poster-groundwork,
.gw-colorme-bumper {
  --gw-blue: #3b4fcb;
  --gw-bg: var(--gw-blue) url("/images/home-gw-bg-tile.svg") repeat;
}

.poster-groundwork {
  background-color: transparent;
  margin-top: -39vw;
  position: relative;
}

.poster-groundwork ::selection {
  background-color: var(--gw-blue);
  color: #fff;
}

.project .gw-warning {
  background-color: var(--offwhite);
  border-radius: 2px;
  color: var(--gw-blue);
  font-size: 0.9em;
  font-weight: 500;
  padding: 1rem;
  margin-bottom: 1rem;
}

.gw-header {
  margin: 0 auto -35vw auto;
  padding: 0 1rem;
  position: relative;
  width: 94%;
  z-index: 2;
}

.gw-mark {
  background-color: var(--eggshell);
  border-radius: 50%;
  margin: 0 auto;
  padding: 1%;
  width: 50%;
}

.gw-text {
  margin-top: 3vw;
}

.poster-groundwork a {
  color: var(--eggshell)
}

.poster-groundwork a:hover,
  .poster-groundwork a:focus {
  color: #e4ff64;
}

.poster-fill-groundwork {
  background: var(--gw-bg);
  background-size: 1000px;
  color: var(--eggshell);
  --gw-fill-clip: polygon(
    0 11vw,
    12% 2vw,
    20% 9vw,
    30% 0,
    71% 15vw,
    69% 0,
    82% 9vw,
    90% 0,
    100% 12vw,
    100% 100%,
    0 100%
  );
  -webkit-clip-path: var(--gw-fill-clip);
  clip-path: var(--gw-fill-clip);
  padding-top: 34vw;
}

.gw-contents {
  padding-top: 2rem;
}

.gw-colorme-bumper {
  background: var(--gw-bg);
  background-size: 1000px;
  color: var(--limbo-eggshell);
  font-size: 0.8rem;
  padding-bottom: 120vw;
  padding-top: 100vw;
  position: relative;
}

.gw-colorme-bumper::after {
  background-color: var(--eggshell);
  bottom: 2rem;
  --line-clip: polygon(
    0 6px,
    100% 0,
    30% 25%,
    100% 50%,
    30% 100%,
    50% 100%,
    0 99.8%
  );
  -webkit-clip-path: var(--line-clip);
  clip-path: var(--line-clip);
  content: "";
  height: 100%;
  left: calc(50% - 2px);
  position: absolute;
  width: 4px;
}

.gw-colorme-bumper h5 {
  background-color: var(--gw-blue);
  display: inline-block;
  left: 47%;
  padding-bottom: 0.2rem;
  position: relative;
  transform: rotate(-3deg);
  text-indent: -0.7rem;
  z-index: 2;
}

@media (min-width: 85em) {
  .gw-header {
    margin-bottom: -40vw;
  }

  .gw-mark {
    width: 42%;
  }

  .poster-fill-groundwork {
    padding-top: 40vw;
  }

  .gw-colorme-bumper {
    padding-bottom: 100vw;
    padding-top: 60vw;
  }
}

@media (min-width: 112.5em) {
  .gw-colorme-bumper {
    padding-bottom: 120rem;
    padding-top: 68rem;
  }
}

@media (min-width: 117.5em) {
  .poster-groundwork {
    margin-top: -45.8rem;
  }

  .gw-header {
    margin-bottom: -47rem;
    max-width: 114rem;
  }

  .gw-text {
    margin-top: 3.5rem;
  }

  .poster-fill-groundwork {
    --gw-fill-clip: polygon(
      0 12rem,
      12% 3rem,
      15% 9rem,
      27% 0,
      69% 20rem,
      67% 0,
      82% 10rem,
      90% 0,
      100% 13rem,
      100% 100%,
      0 100%
    );
    padding-top: 49.5rem;
  }
}

.poster-colorme,
.colorme-jxa-bumper {
  --cm-red: #b50003;
  --cm-red-alt: #e00003;
  --cm-text: #252525;
  --cm-bg: #fff url("/images/home-colorme-bg-tile.svg") repeat;
  color: var(--cm-red);
  overflow: visible;
}

.colorme-header {
  margin: -35% auto 0 auto;
  max-width: 121rem;
  padding: 22% 12%;
  position: relative;
  z-index: 2;
}

.colorme-header h2 {
  position: relative;
  z-index: 3;
}

.colorme-header::before,
.colorme-header::after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
}

.colorme-header::before {
  background-color: var(--cm-red);
  --path: polygon(
    0.7rem 2vw,
    90% 2vw,
    99% 50%,
    90% 100%,
    0.4rem 100%
  );
  -webkit-clip-path: var(--path);
  clip-path: var(--path);
  left: 0;
  top: 0;
  z-index: 2;
  width: 58%;
}

.colorme-header::after {
  background-color: var(--cm-red-alt);
  --path: polygon(
    0 0,
    calc(100% - 0.7rem) 0,
    calc(100% - 0.5rem) calc(100% - 2vw),
    0 calc(100% - 2vw),
    12% 50%
  );
  -webkit-clip-path: var(--path);
  clip-path: var(--path);
  right: 0;
  top: 0;
  width: 55%;
  z-index: 1;
}

.colorme-contents {
  padding-top: 2rem;
}

.poster-colorme a {
  color: var(--cm-red)
}

.poster-colorme a:hover,
  .poster-colorme a:focus {
  color: var(--cm-text);
}

.poster-fill-colorme {
  background: var(--cm-bg);
  background-size: 1000px;
}

.colorme-jxa-bumper {
  background: var(--cm-bg);
  background-size: 1000px;
  font-size: 0.8rem;
  padding-bottom: 120vw;
  padding-top: 100vw;
  position: relative;
  text-align: center;
}

.colorme-jxa-bumper::after {
  background-color: var(--cm-red);
  bottom: 0;
  --line-clip: polygon(
    0 6px,
    100% 0,
    30% 25%,
    100% 50%,
    30% 100%,
    50% 100%,
    0 99.8%
  );
  -webkit-clip-path: var(--line-clip);
  clip-path: var(--line-clip);
  content: "";
  height: 100%;
  left: calc(50% - 6px);
  position: absolute;
  width: 5px;
}

.colorme-jxa-bumper h5 {
  background-color: #fff;
}

.bumper h5 {
  display: inline-block;
  padding: 0.2rem 0;
  position: relative;
  z-index: 2;
}

@media (min-width: 75em) {
  .colorme-header {
    margin-top: -25%;
    padding: 16% 8%;
  }
}

@media (min-width: 85em) {
  .colorme-jxa-bumper {
    padding-bottom: 100vw;
    padding-top: 60vw;
  }
}

@media (min-width: 112.5em) {
  .colorme-jxa-bumper {
    padding-bottom: 120rem;
    padding-top: 68rem;
  }
}

@media (min-width: 122em) {
  .colorme-header {
    margin-top: -30.25rem;
    padding: 19.4rem 9.7rem;
  }

  .colorme-header::before {
    --path: polygon(
      0.7rem 2rem,
      90% 2rem,
      99% 50%,
      90% 100%,
      0.4rem 100%
    );
  }

  .colorme-header::after {
    --path: polygon(
      0 0,
      calc(100% - 0.7rem) 0,
      calc(100% - 0.5rem) calc(100% - 2rem),
      0 calc(100% - 2rem),
      12% 50%
    );
  }
}

.poster-jxa,
.jxa-readers-bumper {
  --jxa-accent: #1cff00;
  --jxa-bg: #000 url("/images/home-jxa-bg-tile.svg") repeat;
  background-color: #000;
  color: #fff;
  overflow: visible;
}

.poster-jxa ::selection {
  background-color: var(--jxa-accent);
  color: #000;
}

.poster-jxa a {
  color: #fff
}

.poster-jxa a:hover,
  .poster-jxa a:focus {
  color: var(--jxa-accent);
}

.jxa-header {
  margin: 0 auto;
  max-width: 110rem;
  pointer-events: none;
  position: relative;
  top: -7vw;
}

.jxa-header h2 {
  padding-left: 27%;
  padding-right: 0.5rem;
  position: relative;
  z-index: 3;
}

.jxa-header::before {
  background: transparent url("/images/jxa-chip.png") no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  left: -20vw;
  padding-top: 100%;
  position: absolute;
  top: -30vw;
  width: 75%;
  z-index: 2;
}

.webp .jxa-header::before {
  background-image: url("/images/jxa-chip.webp");
}

.poster-fill-jxa {
  background: var(--jxa-bg);
  background-size: 1200px;
}

.poster-fill-jxa::before {
  background: var(--jxa-bg);
  background-size: 1200px;
  display: block;
  content: "";
  --jxa-path: polygon(
    0 12rem,
    15% 3rem,
    25% 12rem,
    40% 8rem,
    55% 16rem,
    100% 11rem,
    100% 100%,
    0 100%
  );
  -webkit-clip-path: var(--jxa-path);
  clip-path: var(--jxa-path);
  margin-bottom: -20vw;
  padding-top: 20%;
  position: relative;
  top: -62vw;
  width: 100%;
}

.jxa-readers-bumper {
  background: var(--jxa-bg);
  background-size: 1000px;
}

.jxa-readers-bumper h5 {
  background-color: #000;
}

.jxa-readers-bumper b {
  display: inline-block;
  transform: translateY(-2px);
}

.jxa-readers-bumper i {
  display: inline-block;
  transform: translateY(4px) translateX(2px) rotate(1deg);
}

.bumper {
  font-size: 0.8rem;
  padding-bottom: 120vw;
  padding-top: 100vw;
  position: relative;
  text-align: center;
}

.bumper::after {
  background-color: currentColor;
  bottom: 0;
  --line-clip: polygon(
    0 6px,
    100% 0,
    30% 25%,
    100% 50%,
    30% 100%,
    50% 100%,
    0 99.8%
  );
  -webkit-clip-path: var(--line-clip);
  clip-path: var(--line-clip);
  content: "";
  height: 100%;
  left: calc(50% - 6px);
  position: absolute;
  width: 5px;
}

@media (min-width: 30em) {
  .jxa-midwestjs-figures {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 50% 50%;
  }
}

@media (min-width: 85em) {
  .bumper {
    padding-bottom: 100vw;
    padding-top: 60vw;
  }
}

@media (min-width: 112.5em) {
  .bumper {
    padding-bottom: 120rem;
    padding-top: 68rem;
  }
}

@media (min-width: 64em) {
  .poster-fill-jxa::before {
    margin-bottom: -25vw;
  }
}

@media (min-width: 79em) {
  .jxa-header h2 {
    padding-left: 32%;
    padding-right: 1rem;
  }

  .jxa-header::before {
    left: -15vw;
    width: 68%;
  }
}

@media (min-width: 88.75em) {
  .jxa-header h2 {
    padding-left: 34%;
    padding-right: 1.75rem;
  }

  .jxa-header::before {
    left: -8vw;
    width: 63%;
  }
}

@media (min-width: 93.75em) {
  .jxa-header h2 {
    padding-left: 35%;
    padding-right: 3.5rem;
  }

  .jxa-header::before {
    left: -5vw;
    width: 58%;
  }
}

@media (min-width: 116.6em) {
  .jxa-header {
    left: -5rem;
    top: -8.125rem;
  }

  .jxa-header::before {
    left: -6rem;
    top: -34.94rem;
  }

  .poster-fill-jxa::before {
    margin-bottom: -30rem;
    padding-top: 23.125rem;
    top: -73.3rem;
  }
}

.poster-readability {
  --rdb-red: #990000;
  background-color: #fff;
  padding: 0;
}

.poster-fill-readability {
  background-color: var(--rdb-red);
  color: #fff;
}

.poster-readability a {
  color: #fff;
}

.h-entry {
  --contentWidth: 90%;
  --maxContentWidth: 70rem;
  --maxTextWidth: 62.5rem;
  overflow: hidden;
}

.e-header {
  margin: 5rem 0 2.4rem 0;
  text-align: center;
}

.e-header .p-name {
  color: var(--offwhite);
  font-family: var(--font-aktiv-ex);
  font-size: 10vw;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 auto;
  max-width: 95%;
}

.e-header .dt-published {
  display: block;
  font-size: 1.8em;
  font-weight: 500;
  margin-bottom: 2em;
}

.p-author {
  display: none;
  visibility: hidden;
}

.e-content {
  color: var(--offwhite);
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0 auto;
  max-width: var(--maxContentWidth);
  padding-bottom: 2.5em;
  width: var(--contentWidth)
}

.e-content a {
  color: var(--white);
}

.e-content .link--future {
  cursor: not-allowed;
  opacity: 0.4;
  text-decoration: underline;
}

.e-content h2,
  .e-content h3,
  .e-content h4,
  .e-content h5,
  .e-content h6 {
  color: var(--offwhite);
  font-weight: 800;
  margin: 0 auto;
  max-width: var(--maxTextWidth);
}

.e-content h2 {
  font-family: var(--font-aktiv-ex);
  font-size: 1.2em;
  font-weight: 900;
  padding: 0.7em 0 0.25em 0;
}

.e-content h3 {
  margin-top: 1.2em;
}

.e-content h3 code {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

.e-content h4 {
  font-size: 0.8em;
}

.e-content p {
  margin: 0 auto;
  max-width: var(--maxTextWidth);
  padding-bottom: 1.4em;
}

.e-content .thanks-for-reading {
  padding-bottom: 0.4em;
}

.e-content .thanks-for-reading i {
  background: transparent url("/images/article-thanks.svg") no-repeat left
        top;
  background-size: 100%;
  display: inline-block;
  height: 70px;
  margin-top: 0.1em;
  text-indent: -300em;
  max-width: 250px;
  width: 95%;
}

.e-content .thanks-for-reading svg {
  max-width: 250px;
}

.e-content figure {
  margin: 0.2em 0 1.8em 0;
}

.e-content figure img,
    .e-content figure picture {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.e-content figcaption {
  color: var(--darkerwhite);
  padding: 0.7em;
}

.e-content figcaption,
  .e-content .note,
  .e-content .note-special,
  .e-content .note-update {
  font-size: 1rem;
}

.e-content p.note-special,
    .e-content p.note-update {
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  color: #fff;
  padding: 0.6em 1em;
  margin: 0.1em 0 1.2em 0;
}

.e-content p.note-special {
  border-color: #ffad154d;
  background-color: #ffad1526;
  color: var(--darkerwhite);
}

.e-content p.note-update {
  border-color: #007cff4d;
  background-color: #007cff26;
}

.e-content ul,
  .e-content ol {
  clear: both;
  margin: 0 auto;
  max-width: var(--maxTextWidth);
  padding: 0 0.2em 1.4em 0.2em;
}

.e-content li {
  color: var(--offwhite);
  line-height: 1.5;
  padding-bottom: 0.25em;
  position: relative;
}

.e-content ul li {
  list-style: disc inside;
}

.e-content ol li {
  list-style: decimal inside;
}

.e-content blockquote {
  border-left: 0.4em solid var(--accent);
  color: var(--darkerwhite);
  font-size: 1em;
  padding: 0.2em 1em 0.2em 1.6em;
  margin: 0 auto 1.6em auto;
  max-width: var(--maxTextWidth);
}

.e-content blockquote p {
  font-style: italic;
  padding-bottom: 0;
}

.e-content blockquote cite {
  display: block;
  font-size: 0.9em;
  max-width: var(--maxTextWidth);
  margin: 1rem auto 0 auto;
  padding-bottom: 0.5rem;
}

.entry-intro {
  font-size: 1.2em;
  line-height: 1.6;
  max-width: 100%;
  padding-bottom: 0;
}

.entry-intro::after {
  background-color: var(--accent);
  content: "";
  display: block;
  height: 0.75rem;
  margin: 1.5em auto 1.2em auto;
  text-align: center;
  width: 25%;
}

.entry-intro + h2 {
  padding-top: 0;
}

.entry-intro + p:first-letter,
.entry-intro + h2 + p:first-letter {
  color: var(--accent);
  float: left;
  font-family: var(--font-aktiv-ex);
  font-size: 610%;
  font-weight: 900;
  line-height: 0.9;
  margin-top: -0.02em;
  padding-right: 0.09em;
}

.entry-update {
  font-size: 1em;
  font-style: italic;
}

@media (min-width: 48.75em) {
  .e-header .p-name {
    font-size: 7vw;
  }

  .e-content {
    font-size: 1.8em;
  }
}

@media (min-width: 73.125em) {
  .entry-intro + p:first-letter,
  .entry-intro + h2 + p:first-letter {
    margin-left: -0.08em;
  }
}

@media (min-width: 108.125em) {
  .h-entry {
    --maxContentWidth: 86.25rem;
    --maxTextWidth: 70.5rem;
  }

  .e-header .p-name {
    font-size: 5vw;
  }

  .e-content {
    font-size: 2em;
  }
}

.about-site {
  clear: both;
  font-size: 1.2rem;
  line-height: 1.6;
  overflow: hidden;
  margin: 0 auto;
  max-width: 86.8125rem;
  padding-bottom: 5rem;
}

.about-site-intro {
  padding: 0 2rem;
}

.about-site-heading {
  font-size: 12vw;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.about-site p {
  padding-bottom: 1.4em;
}

.about-versions {
  max-width: 80rem;
  padding: 0 0.75rem;
}

.version {
  padding: 1rem 0 2rem 0;
}

.version a {
  display: block;
}

.version img {
  display: block;
  width: 100%;
}

.version figure {
  padding-top: 1em;
  position: relative;
}

.version figcaption {
  font-family: var(--font-aktiv-ex);
  font-size: 1.2rem;
  font-weight: 900;
  padding: 0 0.5rem;
  position: absolute;
  top: 0;
  width: 100%;
}

.version figcaption::before {
  background-color: var(--accent);
  bottom: 0.25em;
  --path: polygon(
    0 0.25em,
    25% 0.2em,
    50% 0.15em,
    100% 0.38em,
    70% 90%,
    50% 60%,
    0 80%
  );
  -webkit-clip-path: var(--path);
  clip-path: var(--path);
  content: "";
  display: inline-block;
  height: 0.4em;
  position: absolute;
  width: 100%;
}

@media (min-width: 40em) {
  .about-site-heading {
    font-size: 8.1vw;
  }
}

@media (min-width: 47em) {
  .about-site-intro p {
    padding-left: 10%;
    padding-right: 6rem;
  }

  .about-versions {
    display: grid;
    grid-column-gap: 1rem;
    grid-template-columns: 50% 50%;
    padding: 0;
  }

  .version {
    padding-bottom: 1rem;
  }

  .version figcaption {
    font-size: 1.4rem;
  }
}

@media (min-width: 76em) {
  .about-site {
    font-size: 1.4rem;
  }

  .about-site-intro {
    padding: 0 1rem;
  }

  .about-site-heading {
    font-size: 4.8vw;
  }

  .about-site-intro p {
    padding-left: 22%;
    padding-right: 7rem;
  }
}

@media (min-width: 92.2em) {
  .about-site-heading {
    font-size: 4.4rem;
  }
}

[data-page="purpose"] main {
  padding: 2em 0 6em 0
}

[data-page="purpose"] main h1 {
  font-family: var(--font-aktiv-ex);
  font-size: 15vw;
  font-weight: 900;
  text-align: center;
  word-wrap: break-word;
}

[data-page="purpose"] main h1 + p {
  margin-top: 1.1em;
}

[data-page="purpose"] main p {
  color: var(--offwhite);
  font-size: 1.2em;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 720px;
  padding-bottom: 1.6em;
  width: 90%;
}

[data-page="purpose"] main .linkback {
  font-size: 0.9em;
  font-style: italic;
}

@media (min-width: 620px) {

  [data-page="purpose"] main p {
    font-size: 1.4em;
  }
}

@media (min-width: 66em) {

  [data-page="purpose"] main h1 {
    font-size: 10.5rem;
  }
}

[data-page="resume"] .poster-fill-default::before {
  background-image: none;
}

.resume {
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 48rem;
  padding: 2rem 0 4rem 0;
  width: 90%;
}

.resume-intro {
  font-size: 1.2em;
  line-height: 1.6;
}

.resume-intro::after {
  background-color: var(--accent);
  content: "";
  display: block;
  height: 0.75rem;
  margin: 1.5em auto 1.2em auto;
  text-align: center;
  width: 25%;
}

.resume p {
  padding-bottom: 1em;
}

.resume h2 {
  color: var(--accent);
  font-family: var(--font-aktiv-ex);
  font-size: 1em;
  font-weight: 900;
  margin: 1.8em 0 0.5em 0;
}

.resume h3 {
  font-size: 1.4em;
  font-weight: 800;
}

.resume h4 {
  font-size: 1em;
}

.resume h5 {
  color: var(--darkerwhite);
  font-size: 0.8em;
  margin-top: 0.5em;
}

.resume-experience dd + dt {
  margin-top: 2.6em;
}

.resume-entry-desc {
  margin-top: 1.5em;
}

.resume-entry-desc ul {
  list-style: disc outside;
  padding-left: 1rem;
}

.resume-entry-desc li {
  padding-left: 1rem;
}

.contentinfo {
  box-sizing: border-box;
  clear: both;
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.4;
  overflow: hidden;
  padding: 2rem 0;
  text-align: center;
  width: 95%
}

.contentinfo li {
  display: inline-block;
  max-width: 90px;
  width: 25%;
}

.contentinfo a {
  color: var(--grey);
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.7em;
}

.contentinfo a:hover,
.contentinfo a:focus {
  background-color: var(--grey);
  color: var(--lightgrey);
}

/**
 * a11y-dark theme for JavaScript, CSS, and HTML
 * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 * @author ericwbailey
 * @repo https://github.com/ericwbailey/a11y-syntax-highlighting
 */

/**
  Some modifications made for tylergaw.com
 */

code[class*="language-"],
pre[class*="language-"],
.e-content p code,
.e-content li code {
  color: #f8f8f2;
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

/* Code blocks */

pre[class*="language-"] {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #383838;
  padding: 1em;
  margin-bottom: 1em;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"],
.e-content p code {
  background: #2b2b2b;
}

/* Inline code */

:not(pre) > code[class*="language-"],
.e-content p code {
  padding: 0.1em;
  white-space: normal;
  word-break: break-word;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #d4d0ab;
}

.token.punctuation {
  color: #fefefe;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ffa07a;
}

.token.boolean,
.token.number {
  color: #00e0e0;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #abe338;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #00e0e0;
}

.token.atrule,
.token.attr-value,
.token.function {
  color: #ffd700;
}

.token.keyword {
  color: #00e0e0;
}

.token.regex,
.token.important {
  color: #ffd700;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.code-muted,
.code-muted span {
  color: #B6B6B6 !important;
}

@media screen and (-ms-high-contrast: active) {
  code[class*="language-"],
  pre[class*="language-"] {
    color: windowText;
    background: window;
  }

  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: window;
  }

  .token.important {
    background: highlight;
    color: window;
    font-weight: normal;
  }

  .token.atrule,
  .token.attr-value,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.selector {
    font-weight: bold;
  }

  .token.attr-value,
  .token.comment,
  .token.doctype,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.property,
  .token.string {
    color: highlight;
  }

  .token.attr-value,
  .token.url {
    font-weight: normal;
  }
}

[data-page="error"] main {
  padding: 4rem 3rem 6rem 3rem;
  text-align: center;
}

[data-page="error"] h1 {
  font-size: 15vw;
  line-height: 1;
  font-family: var(--font-aktiv-ex);
  font-weight: 900;
}

[data-page="error"] h2 {
  font-size: 1.4em;
  line-height: 1.5;
  margin: 0 auto 2em auto;
  max-width: 21em;
}

[data-page="error"] p {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 28em;
}

@media (min-width: 70em) {
  [data-page="error"] h1 {
    font-size: 10rem;
  }
}