* {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: normal;
}

:root {
  --key-duration: 275ms;
  --body: #323336;
  --body: #eff8ff;
  --progress: 0%;
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
  margin: 10vmin 0 0;
  padding: 0 4vw;
}
aside {
  display: none;
}

.titles {
  font-size: calc(1vmin + 1rem);
}
h1, h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Proza Libre', sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
}
#primary-title, .primary-title {
  font-size: 3.85em;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -.05em;
}
h1 span, h2 span {
  position: relative;
}
h1 span::before, h2 span::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: hsl(183, 90%, 34%);
  z-index: -1;
  transform: translate(-20%) scaleY(.2) scaleX(0);
  transform-origin: 40% 80%;
}
h1 span::before {
  animation: title 550ms 0ms 1 ease-out forwards;
}

h1 span:last-of-type::before {
  background: hsl(283, 90%, 34%);
  transform: translate(20%) scaleY(.2) scaleX(0);
  transform-origin: 60% 60%;
  animation-name: title-key;
  animation-delay: 268ms;
}
.titles p, p.text-message {
  padding: 2vmin 4vmin;
  background: hsl(var(--hue, 343), 95%, 50%);
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  margin: 2vmin;
}
p.text-message {
  text-transform: none;
}
a em {
  text-transform: uppercase
}
h2 span::before {
  transform: translate(-20%) scaleY(.2) scaleX(1);
}
h2 span:last-of-type::before {
  background: hsl(283, 90%, 34%);
  transform: translate(20%) scaleY(.2) scaleX(1);
}

@keyframes title {
  100% {
    transform: translate(-20%) scaleY(.2) scaleX(1);
  }
}
@keyframes title-key {
  100% {
    transform: translate(20%) scaleY(.2) scaleX(1);
  }
}

h2 {
  max-width: 100%;
  padding: 2rem;
  align-items: flex-start;
}
h2 .primary-title {
  font-size: 2.5em;
}
ul {
  padding: 0 4vw 3rem;
}
li, p {
  font-size: 1.75em;
  line-height: 1.25;
}

a {
  color: hsl(183, 90%, 54%)
}

iframe {
  min-width: 72vw;
  margin-left: 2vw;
}



nav {
  display:none;
}

code {
  font-family: monospace;
  font-size: 1em;
}

.explainer code {
  font-size: .75em;
}
.explainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
}
.explainer li {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1vmin;
}
.explainer code {
  position: relative;
}
.explainer div {
  --h: 343;
  position: relative;
  background: rgba(250,250,250,.15);
  width: 25vmin;
  height: 25vmin;
  margin: 2vmin;
}
.explainer div::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: hsl(343, 80%, 45%);
  color: hsl(343, 80%, 95%);
  display: flex;
  padding: 2vmin;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.explainer .txty::after {
  content: 'Move';
  transform: translateX(-20px);
}
.explainer .r::after {
  content: 'Rotate';
  transform: rotate(25deg);
}
.explainer .s::after {
  content: 'Scale';
  transform: scale(.5);
}
.explainer .sky::after {
  content: 'Skew';
  transform: skewY(-9deg);
}
.explainer .r3d::after {
  content: 'Go 3D*';
  transform: rotateX(30deg);
}
.explainer .r3d {
  perspective: 200px;
}

.explainer-flow div {
  width: 200px;
  height: 40px;
  border: 1px solid hsl(193, 50%, 50%);
  background: hsla(193, 80%, 50%, .4);
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .6em;
}

.explainer-flow div:nth-of-type(2) {
  animation: explainer-flow 10000ms infinite;
  
  border: 1px solid hsl(123, 50%, 50%);
  background: hsla(123, 80%, 50%, .9);
}

@keyframes explainer-flow {
  20% {
    transform: translate(30px, 15px)
  }
  40% {
    transform: scale(2)
  }
  60% {
    transform: rotate(180deg)
  }
  80% {
    transform: skewX(30deg)
  }
}

path {
  fill: white;
}
.explainer-nesting svg {
  max-width: 40vw;
  max-height: 30vh;
  animation: nesting 2345ms infinite alternate ease-in-out;
}
.explainer-nesting svg path {
  max-width: 40vw;
  max-height: 30vh;
  animation: nesting 1345ms infinite alternate ease-in-out;
}
.explainer-nesting svg path:nth-of-type(2) {
  animation-delay: 50ms;
}
.explainer-nesting svg path:nth-of-type(3) {
  animation-delay: 100ms;
}
.explainer-nesting svg path:nth-of-type(4) {
  animation-delay: 150ms;
}
.explainer-nesting svg path:nth-of-type(5) {
  animation-delay: 200ms;
}
.explainer-nesting svg path:nth-of-type(6) {
  animation-delay: 250ms;
}
.explainer-nesting svg path:nth-of-type(7) {
  animation-delay: 300ms;
}
.explainer-nesting svg path:nth-of-type(8) {
  animation-delay: 350ms;
}
.explainer-nesting svg path:nth-of-type(9) {
  animation-delay: 400ms;
}
.explainer-nesting svg path:nth-of-type(10) {
  animation-delay: 450ms;
}
.explainer-nesting svg path:nth-of-type(11) {
  animation-delay: 500ms;
}
.explainer-nesting svg path:nth-of-type(12) {
  animation-delay: 550ms;
}
.explainer-nesting svg path:nth-of-type(13) {
  animation-delay: 600ms;
}
.explainer-nesting svg path:nth-of-type(14) {
  animation-delay: 650ms;
}
.explainer-nesting svg path:nth-of-type(15) {
  animation-delay: 700ms;
}
.explainer-nesting svg path:nth-of-type(16) {
  animation-delay: 750ms;
}
.explainer-nesting svg path:nth-of-type(17) {
  animation-delay: 800ms;
}
.explainer-nesting svg path:nth-of-type(18) {
  animation-delay: 850ms;
}

@keyframes nesting {
  100% {
    transform: translateY(20vmin)
  }
}


.important::after {
  content: '!!!';
  background: hsl(343, 90%, 54%);
  padding: .4em .25em .15em;
  margin-left: .25em;
  border-radius: 50%;
  font-size: .75em;
}
.footnote {
  font-size: .25em;
  letter-spacing: initial;
}






body {
  --bg-color: hsl(206, 80%, 11%);
  min-height: 100vh;
  font-size: calc(1vmin + 1rem);
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow-x: hidden;
  background: var(--bg-color);
  color: var(--body);
  
  --graph-color: hsl(206,80%,28%);
  --graph-line: 1px;
  --graph-square: 2vmin;
  background-image: 
    linear-gradient(165deg,
      transparent,
      var(--bg-color) 100vh),
    linear-gradient(to right, 
      var(--graph-color) 0px, 
      var(--graph-color) var(--graph-line), 
      transparent var(--graph-line), 
      transparent var(--graph-square)),
    linear-gradient(to bottom, 
      var(--graph-color) 0px, 
      var(--graph-color) var(--graph-line), 
      transparent var(--graph-line), 
      transparent var(--graph-square));
    background-size: cover, 
      var(--graph-square) var(--graph-square),
      var(--graph-square) var(--graph-square);
}
html {
  font-size: 62.5%;
}
*, *::before, *::after {
  box-sizing: border-box;
}