@font-face {
  font-family: 'Asap';
  src: url('asap-bold-webfont.woff2') format('woff2'),
       url('asap-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Asap';
  src: url('asap-bolditalic-webfont.woff2') format('woff2'),
       url('asap-bolditalic-webfont.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Prime';
  src: url('courier_prime-webfont.woff2') format('woff2'),
       url('courier_prime-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Prime';
  src: url('courier_prime_bold-webfont.woff2') format('woff2'),
       url('courier_prime_bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: calc(1rem + 0.5vw);
  font-family: Prime, monospace;
  scroll-behavior: smooth;
  --ratio: 1.25;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
}

* {
  margin: 0;
  padding: 0;
  color: inherit;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-size: inherit;
  font-family: inherit;
}

body {
  background-color: #000;
  color: #fff;
  line-height: var(--ratio);
  overflow-x: hidden;
  min-height: 100vh;
  text-align: center;
  text-rendering: optimizeSpeed;
}

[href="#main"] {
  position: absolute;
  bottom: calc(100% + 1rem);
  left: 0;
  padding: var(--s1);
  text-align: center;
}

[href="#main"]:focus {
  outline: none;
  bottom: auto;
}

a:focus, button:focus, input:focus {
  outline: 1px solid;
  outline-offset: 0.25em;
}

p {
  text-align: left;
}

strong, em, dt {
  font-family: Asap, sans-serif;
}

em {
  font-weight: bold;
}

small {
  font-size: var(--s-2);
}

.icon {
  --icon-size: 1em;
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -0.125em;
}

h1, h2, h3, h4 {
  font-family: Asap, sans-serif;
  line-height: 1.125;
}

h1, .h1 { font-size: var(--s2); }

h2 { font-size: var(--s5) }

h3, .h3 { font-size: var(--s3) }

img {
  max-width: 100%;
  height: auto;
}

.logo {
  width: 12rem;
  max-width: 100%;
}

.triangle {
  position: absolute;
  right: 0;
  top: 0;
  width: 18vw;
}

.more-stuff {
  width: 10rem;
  max-width: 100%;
}

.transcript {
  text-align: left;
}

.transcript ol, .transcript ul {
  padding-inline-start: 1.5rem;
}

.transcript pre,
.transcript code {
  background-color: #fff;
  color: #000;
} 

.transcript pre {
  white-space: pre-wrap;
  color: #000;
  background-color: #fff;
  padding: 0.75rem;
  overflow: auto;
}

.note {
  padding: 1.5rem;
  border: 1px dashed;
}

.note__title {
  padding-block-end: 0.5rem;
  margin-block-end: 0.5rem;
  border-block-end: 1px solid;
}

video {
  border: 1px solid #fff;
}

video:focus {
  outline-width: 0.125rem;
  outline-offset: 0;
}

.action {
  position: relative;
  font-size: calc(var(--s1) * 0.8);
  font-family: Asap, sans-serif;
  text-decoration: none;
  padding: var(--s-3) var(--s0);
  display: inline-block;
  border: 0.125rem solid;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0 0 #fff;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}

.action .icon {
  margin-right: 0.125em;
}

.action:focus {
  outline: none;
  text-decoration: underline;
}

.action:active {
  box-shadow: 0 0.125rem 0 0 #fff;
  top: 0.125rem;
  text-decoration: none;
}

.teaser img {
  border: 2px solid;
}

.tbd img {
  border-style: dashed;
}

.teaser time {
  display: block;
}

nav {
  display: flex;
  align-items: center;
  font-size: var(--s2);
}

nav ul {
  margin-left: auto;
  list-style: none;
}

nav img {
  height: 1.5rem;
}

dl > div, .align-left, .align-left * {
  text-align: left;
}

dt, dd {
  display: inline;
}

#goatChat {
  position: relative;
}

.bubble::before {
  font-family: Prime, monospace;
  content: '[' attr(data-speech) ']';
  color: #000;
  background-color: #fff;
  position: absolute;
  top: -2.75rem;
  right: 1em;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: var(--s-2);
  font-weight: bold;
}

.bubble::after {
  content: '';
  width: 0.5rem;
  height: 1.5rem;
  position: absolute;
  top: -1.125rem;
  right: 1.75rem;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  white-space: nowrap;
}

/* utilities */

.stack > *:not(.vh) + * {
  margin: 0;
  margin-top: var(--stack-gap, var(--s1));
}

.with-sidebar {
  --sidebar-gap:  var(--s3);
  --sidebar-min: 50%;
  --sidebar-width: auto;
}

.with-sidebar > * {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--sidebar-gap) / 2 * -1);
}

.with-sidebar > * > * {
  margin: calc(var(--sidebar-gap) / 2);
}

.with-sidebar > * > .sidebar {
  flex-grow: 1;
  flex-basis: var(--sidebar-width);
}

.with-sidebar > * > :not(.sidebar) {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(var(--sidebar-min) - var(--sidebar-gap));
}

.grid {
  display: grid;
  grid-gap: var(--grid-gap, var(--s2));
  --grid-min: 15rem;
}

@supports (width: min(var(--minimum), 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
  }
}

.grid > * {
  list-style: none;
}

.centered {
  margin-left: auto;
  margin-right: auto;
  width: var(--centered-width, 40rem);
  max-width: 100%;
  padding: var(--s1);
}

.invert {
  background-color: #fff;
  color: #000;
}

.invert * {
  background-color: inherit;
  color: inherit;
}

.cover {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  --cover-space: var(--s1);
  padding: var(--cover-space);
}

.cover > :first-child {
  margin-bottom: var(--cover-space);
}

.cover > :last-child {
  margin-top: var(--cover-space);
}

.cover > :nth-child(2) {
  margin-top: auto;
  margin-bottom: auto;
}

.screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh + 2.25rem);
  justify-content: center;
  align-items: center;
  padding: var(--s1);
}

[class*="static"] {
  background-repeat: repeat-x;
  background-size: 2.5rem auto;
  background-position: center bottom;
  background-origin: padding-box;
  --static: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"><path fill="%23fff" stroke-width="0" d="M0,0 150,30 150,100 0,70z" /></svg>');
  background-image: var(--static);
  padding-bottom: var(--s7);
}

.section {
  padding: var(--s3) 0;
}

.section.padded {
  padding-inline: 2.5rem;
}

.section.static {
  padding-block-end: 8rem;
}

.cluster {
  --cluster-gap: var(--s1);
}

.cluster > * {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--cluster-gap) / 2);
}

.vh {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.video-player {
  border: 2px solid;
  filter: grayscale(1);
  overflow: hidden;
  padding-bottom: 56.25%;
  position:relative;
  height:0;
}

.video-player iframe {
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

.padded {
  padding: var(--padding, var(--s1));
}

.padded-h {
  padding: 0 var(--padding, var(--s1))
}

.meta {
  padding-bottom: var(--s1);
  border-bottom: 2px solid #fff;
  text-align: left;
}

label {
  display: block;
  text-align: left;
  font-family: Asap, sans-serif;
  font-style: italic;
  margin-bottom: 0.25rem;
}

input {
  padding: 0.5rem;
  background-color: #000;
  border: 0.125rem solid;
  min-width: 0;
}

button {
  background-color: #fff;
  border: 0.125rem solid #fff;
  color: #000;
  font-family: Asap, sans-serif;
  padding: 0.5rem 1rem;
}

[type="submit"]:focus {
  text-decoration: underline;
}

.subscribe {
  display: flex;
  flex-wrap: wrap;
}

.subscribe > * {
  flex: 0 1 100%;
  min-width: 0;
}

footer {
  font-size: var(--s-1);
  padding: var(--s-1);
}

footer p {
  text-align: center;
}

footer li {
  font-family: Asap;
  display: inline-block;
  margin: 0.25rem;
}

form footer {
  padding: 0;
}

.me {
  width: 50px;
  border-radius: 50%;
  border: 2px solid;
}

.mentions {
  filter: grayscale(1);
}

.mentions li {
  text-align: left;
  list-style: none;
}

.mentions a {
  text-decoration: none;
}

.mentions a span {
  text-decoration: underline;
}

.display-block {
  display: block;
}

.font-smaller {
  font-size: var(--s-1);
}

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

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

.no-padding {
  padding: 0;
}

.teemill ul {
  list-style: none;
  display: flex;
  align-items: baseline;
  overflow-x: auto;
  padding-block-end: 1.5rem;
}

.teemill li {
  flex: 1 0 250px;
}

@media (max-width: 600px) {
  .teemill li {
    flex-basis: 150px;
  }
}

.teemill p {
  text-align: center;
  line-height: 1.125;
}

.teemill ul {
  scrollbar-color: black white;
  scrollbar-width: thin;
}

.teemill ul::-webkit-scrollbar {
  inline-size: 0.5rem; 
  block-size: 0.5rem;
}

.teemill ul::-webkit-scrollbar-thumb {
  background-color: #fff;
}

.teemill ul::-webkit-scrollbar-track {
  background-color: #000;
  border-block: 1px solid #fff;
}

/* media */

@media (prefers-reduced-motion: reduce) {
  body {
    scroll-behavior: auto;
  }
}