@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/pixelify-sans.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

body.teletext {
  --tt-black: #080808;
  --tt-paper: #f8f7ed;
  --tt-blue: #2833ff;
  --tt-cyan: #23eced;
  --tt-green: #67ed49;
  --tt-yellow: #f8e43e;
  --tt-red: #ff5559;
  --tt-dim: #aebdb7;
  --tt-line: #5260ff;
  --tt-stripe:
    repeating-linear-gradient(to bottom, transparent 0 2px, #0003 2px 3px),
    linear-gradient(90deg, var(--tt-blue) 0 5%, var(--tt-paper) 5% 8%,
      var(--tt-blue) 8% 10%, var(--tt-paper) 10% 14%, var(--tt-blue) 14% 22%,
      var(--tt-cyan) 22% 26%, var(--tt-blue) 26% 28%, var(--tt-paper) 28% 31%,
      var(--tt-blue) 31% 43%, var(--tt-paper) 43% 46%, var(--tt-blue) 46% 51%,
      var(--tt-cyan) 51% 57%, var(--tt-blue) 57% 63%, var(--tt-cyan) 63% 67%,
      var(--tt-blue) 67% 73%, var(--tt-paper) 73% 77%, var(--tt-blue) 77% 81%,
      var(--tt-paper) 81% 84%, var(--tt-blue) 84% 100%);
  color-scheme: dark;
  background: var(--tt-black);
  color: var(--tt-paper);
  font-family: "Pixelify Sans", ui-monospace, monospace;
  overflow-wrap: anywhere;
}

.teletext :is(a, .article-link, .back, .project-content a, .ql-editor a) {
  color: var(--tt-cyan);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.teletext :is(a, button):focus-visible {
  outline: 2px solid var(--tt-yellow);
  outline-offset: 3px;
}

.teletext .tt-status {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: .65em;
  margin-block-end: .7em;
  font-variant-numeric: tabular-nums;
}

.teletext .tt-status::after {
  content: "";
  grid-column: 1 / -1;
  block-size: clamp(18px, 3.5vw, 34px);
  margin-block-start: .35em;
  background: var(--tt-stripe);
}

.teletext .tt-status time { white-space: nowrap; }
.teletext .tt-status time span { color: var(--tt-green); }
.teletext .tt-toggle { color: var(--tt-yellow); border-radius: 0; }

.teletext .nav { border-color: var(--tt-line); border-radius: 0; }
.teletext .nav-pill { background: #151b75; border-radius: 0; }
.teletext .nav-item { color: var(--tt-cyan); }
.teletext .nav-item:nth-of-type(1) { color: var(--tt-red); }
.teletext .nav-item:nth-of-type(2) { color: var(--tt-yellow); }
.teletext .nav-item.active { color: var(--tt-paper); text-decoration: underline; }

.teletext .hero-right::before {
  background-image: none;
  border: 2px solid var(--tt-line);
}
.teletext :is(.hero-name, .article-title, .card-company, .recommendations-title, h1, h2, h3) {
  color: var(--tt-cyan);
}
.teletext .hero-bio [class^="brand-"] { color: inherit; }
.teletext :is(.photo-wrap, .card, .card-logo, .card-button, .portfolio-img, .back-circle) {
  border-radius: 0;
}
.teletext .card-button { border: 1px solid var(--tt-line); }
.teletext .portfolio-img img { border-radius: 0; }
.teletext .separator { background: var(--tt-stripe); }
.teletext .articles-divider { background: var(--tt-line); }
.teletext :is(.article-time, .date, .rec-role) { color: var(--tt-dim); }
.teletext :is(.article-excerpt, .thought-text) { color: var(--tt-paper); }
.teletext .thought-symbol { color: var(--tt-cyan); }
.teletext .back-circle { background: #151b75; color: var(--tt-paper); }
.teletext :is(.ql-editor, .like-count) { font-family: inherit; }
.teletext :is(.cover, .ql-editor img, .project-content img) { border-radius: 0; }
.teletext :is(.project-content, .ql-editor) { color: var(--tt-paper); }
.teletext :is(.like-heart, .like-count) { color: var(--tt-cyan); }

.teletext .photo-wrap img { border-radius: 0; }
.teletext :is(.subproject-content, .metrics-row, .iphone-mockup-row, .project-video, .video-card, .video-frame) {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.teletext :is(.dev-rig, .iphone-mockup) { min-inline-size: min(240px, 100%); max-inline-size: 100%; }
@media (max-width: 768px) {
  .teletext .subproject-content { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .teletext :is(.content, .articles-content, .container) { animation: none; }
}

.teletext :is(img, video) { image-rendering: pixelated; }
.teletext :is(.card-logo, .cover, .video-card, .video-play, video) { border-radius: 0; }
.teletext .card-button { background: var(--tt-blue); color: var(--tt-paper); }
.teletext .video-play { background: var(--tt-blue); }
.teletext .video-play:hover { background: var(--tt-black); }
.teletext mark.marker {
  background: var(--tt-yellow);
  color: var(--tt-black);
}