@font-face { font-family: Changa; src: url('/assets/fonts/Changa-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: Changa; src: url('/assets/fonts/Changa-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: Orbitron; src: url('/assets/fonts/Orbitron-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: Orbitron; src: url('/assets/fonts/Orbitron-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: Monogram; src: url('/assets/fonts/monogram.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('/assets/fonts/PressStart2P.woff') format('woff'); font-display: swap; }

:root {
  color-scheme: dark;
  --blue: #1c588c;
  --deep-blue: #15446e;
  --panel: #103756eb;
  --ink: #fff;
  --muted: #d2e0ed;
  --cream: #eae3d2;
  --cyan: #97ffff;
  --line: #d7e7f0;
  --font: Changa, system-ui, sans-serif;
  --heading-shadow: #15446e;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  min-height: 100vh; margin: 0; padding: 0; color: var(--ink);
  font: 1.125rem/1.8 var(--font);
  background: #000 url('/assets/backgrounds/pixel-space.png') center / cover no-repeat fixed;
}
::selection { background: var(--cyan); color: #071c30; }
a { color: var(--cream); text-underline-offset: 5px; }
a:hover { color: var(--cyan); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
hr { border: 0; border-top: 1px solid #bdd2e5; margin-block: 22px; }
.shell { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.skip { position: absolute; top: -100px; inset-inline-start: 20px; padding: 10px 16px; background: var(--blue); color: white; z-index: 10; }
.skip:focus { top: 8px; }
.site-header {
  width: min(1120px, calc(100% - 48px)); margin: 24px auto 0;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 13px 20px; border: 1px solid var(--line); background: #071c30f2;
}
.site-brand { font: 2.5rem/1 Monogram, monospace; direction: ltr; color: white; text-decoration: none; text-shadow: 0 3px var(--deep-blue); }
.site-nav { display: flex; gap: 8px; margin-inline-start: auto; }
.site-nav a, .language { padding: 4px 12px; color: var(--ink); font-size: 1rem; text-decoration: none; }
.site-nav a:hover, .language:hover { background: var(--blue); }
.site-nav [aria-current=page] { background: var(--deep-blue); box-shadow: inset 0 -2px white; }
.language { border: 1px solid #b3cadc; }
.site-footer {
  width: 100%; margin-top: 65px; padding: 26px 0; background: #000e;
  border-top: 1px solid #d7e7f080; color: var(--muted);
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; flex-wrap: wrap; }
.site-footer p { font-size: 1rem; }
.footer-links { display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: .9375rem; }
.footer-links a { text-decoration: none; }
.button { display: inline-block; padding: 8px 22px; border: 1px solid white; color: white; background: var(--blue); text-decoration: none; }
.button:hover { color: white; background: var(--deep-blue); }
.text-link { color: var(--cream); }
.page-heading { max-width: 900px; margin-inline: auto; padding: 42px 0 30px; text-align: center; }
.page-heading h1 {
  font: 400 clamp(3.7rem, 8vw, 6rem)/1 Monogram, monospace;
  color: white; text-shadow: 0 5px var(--deep-blue); margin: 0;
}
[dir=rtl] .page-heading h1 {
  font: 700 clamp(2rem, 5vw, 3.3rem)/1.55 var(--font); text-shadow: 0 4px var(--deep-blue);
}
.back-link { display: inline-block; margin-bottom: 12px; font-size: .9375rem; }
/* The original display titles on About, Blog, and Flepness Portal. */
.page-heading.classic-heading { padding-block: 60px 36px; }
.page-heading.classic-heading h1 {
  font: 400 clamp(36px, 18vw, 100px)/1.3 'Press Start 2P', monospace;
  direction: ltr;
  text-align: center;
  text-shadow: 0 .14em #15446e;
  overflow-wrap: normal;
}
.page-heading.portal-heading h1 { font-size: clamp(30px, calc(12.5vw - 4px), 86px); }
.portal-heading .portal-line { display: block; }
.portal-heading .portal-accent { margin-top: 6px; text-shadow: 0 .14em #e8630a; }
.page-subtitle { margin-top: 15px; color: var(--cream); }
iframe { display: block; width: min(100%, 740px); height: auto; aspect-ratio: 16 / 9; margin: 24px auto; border: 1px solid var(--line); }
.back-to-top { display: block; width: fit-content; margin: 30px auto; padding: 5px 15px; background: #071c30eb; border: 1px solid #b3cadc; }
@media (max-width: 760px) {
  .shell, .site-header { width: calc(100% - 28px); }
  .site-header { margin-top: 14px; gap: 14px; padding: 12px; }
  .site-brand { font-size: 2.1rem; }
  .language { margin-inline-start: auto; }
  .site-nav { order: 3; width: 100%; margin: 0; justify-content: space-between; border-top: 1px solid #b3cadc55; padding-top: 10px; gap: 3px; }
  .site-nav a { padding: 4px 8px; font-size: .9375rem; }
  .footer-inner { flex-direction: column; align-items: start; gap: 12px; }
  .site-footer { margin-top: 40px; }
  .page-heading { padding-block: 30px 22px; }
  .page-heading.classic-heading { padding-block: 38px 28px; }
  body { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }