/* ---------------------------------------------------------------
   FONTS
   The site uses two fonts:
     heavy = titles, dates, menu, "posted by" lines
     body  = normal paragraph text

   To try a different pair:
   1. Put the two new font files in the "fonts" folder.
   2. Copy the Set 1 block below, paste it underneath as Set 2, and change
      the file names (use format("truetype") for .ttf files, format("woff2")
      for .woff2 files).
   3. In "Which set is on", change set1 to set2.

   To go back, change set2 to set1 again. Fonts that aren't in use are
   never downloaded, so keeping old sets in here costs nothing.
   --------------------------------------------------------------- */

/* Set 1: Pixel Grid */
@font-face {
  font-family: "set1-heavy";
  src: url("fonts/PixelGridTrial-SquareBoldM.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "set1-body";
  src: url("fonts/PixelGridTrial-SquareBoldS.otf") format("opentype");
  font-display: swap;
}

/* Which set is on */
:root {
  --font-heavy: "set1-heavy";
  --font-body: "set1-body";
}

/* ---------------------------------------------------------------
   COLORS
   --------------------------------------------------------------- */
:root {
  --page-bg: #000;
  --title: #8fa8ff;
  --meta: #8a8a8a;
  --body: #bbb;
  --divider: #444;
  --link: #eee;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--body);
  font-family: var(--font-body), monospace;
  font-size: 16px;
  line-height: 1.5;
}

.layout {
  display: flex;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 160px;
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid var(--divider);
}

.sidebar a {
  font-family: var(--font-heavy), monospace;
  color: var(--link);
  text-underline-offset: 5px;
}

.content {
  flex: 1;
  padding-left: 30px;
}

.content h1 {
  display: inline-block;
  margin: 0 0 30px;
  font-family: var(--font-heavy), monospace;
  font-size: 30px;
  font-weight: normal;
  color: var(--title);
  border-bottom: 2px solid var(--title);
}

.post {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--divider);
}

.post-date,
.post-meta {
  font-family: var(--font-heavy), monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--meta);
}

.post-title {
  margin: 4px 0 16px;
  font-family: var(--font-heavy), monospace;
  font-size: 30px;
  font-weight: normal;
  line-height: 1.1;
  color: var(--title);
}

.post p {
  margin: 0 0 16px;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.star {
  position: absolute;
  animation: twinkle ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: var(--lo, 0.2); }
  50% { opacity: 1; }
}

/* Wandering stars fade in, twinkle once, fade out completely, then stay dark for a bit. */
.star.wander {
  animation-name: appear;
}

@keyframes appear {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  32%  { opacity: 0.35; }
  45%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .star {
    animation: none;
    opacity: 0.6;
  }
}

/* Music player: no box, just the cover, text, bar and buttons.
   Bottom left on wide screens, under the page content on narrow ones.
   Song names stay on one line, so keep them fairly short on wide screens
   or they will run into the page text. */
.music {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 40px;
}

@media (min-width: 1460px) {
  .music {
    position: fixed;
    left: 16px;
    bottom: 16px;
    margin: 0;
    z-index: 10;
  }
}

.music-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  color: var(--meta);
}

.music-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-main {
  flex: 1;
  min-width: 200px;
}

.music-title,
.music-artist {
  white-space: nowrap;
}

.music-title {
  font-family: var(--font-heavy), monospace;
  font-size: 14px;
  color: var(--link);
}

.music-artist {
  font-size: 12px;
  color: var(--meta);
}

.music-broken .music-artist {
  color: var(--title);
}

.music-progress {
  height: 4px;
  margin: 8px 0 4px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

.music-fill {
  width: 0;
  height: 100%;
  background: var(--title);
}

.music-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--meta);
}

.music-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.music-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.music-btn {
  padding: 3px;
  line-height: 0;
  color: var(--link);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.music-btn:hover {
  color: var(--title);
}

.music-prev svg {
  transform: scaleX(-1);
}

.music-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--meta);
  line-height: 0;
}

.music-volume input {
  width: 76px;
  margin: 0;
  accent-color: var(--title);
  cursor: pointer;
}

/* F2 flash (see flash.js) */
.flash {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
}

/* Marked text. It looks completely normal, but it sits above the flash, so
   while the screen is flashing it stays visible (dark) when everything else
   is covered. As the flash fades it blends back to its normal color.
   To mark a letter or word in a post, wrap it like this:
   <span class="secret">word</span> */
.secret {
  position: relative;
  z-index: 60;
  transition: color var(--flash-fade, 750ms) ease-out;
}

.flash-on .secret {
  color: #000;
  transition: none;
}

/* Code box (see code.js) */
.code-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.code-overlay[hidden] {
  display: none;
}

.code-box {
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100% - 32px);
  padding: 20px;
  background: #000;
  border: 1px solid var(--divider);
}

.code-box label {
  font-family: var(--font-heavy), monospace;
  font-size: 14px;
  color: var(--link);
}

.code-box input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  font-family: var(--font-body), monospace;
  font-size: 16px;
  color: var(--link);
  background: #000;
  border: 1px solid var(--meta);
  border-radius: 0;
}

.code-box input:focus {
  outline: none;
  border-color: var(--title);
}

.code-note {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--title);
}

/* Logging in (see auth.js and _worker.js) */
.sidebar .logout {
  margin-top: 12px;
  font-size: 12px;
  color: var(--meta);
}

/* Anything with class="admin-only" is only shown when you're logged in. */
body:not(.admin) .admin-only {
  display: none;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 300px;
  margin-top: 24px;
}

.login-form label {
  font-family: var(--font-heavy), monospace;
  font-size: 14px;
  color: var(--link);
}

.login-form input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  font-family: var(--font-body), monospace;
  font-size: 16px;
  color: var(--link);
  background: #000;
  border: 1px solid var(--meta);
  border-radius: 0;
}

.login-form input:focus {
  outline: none;
  border-color: var(--title);
}

.login-form button {
  padding: 6px 14px;
  font-family: var(--font-heavy), monospace;
  font-size: 14px;
  color: var(--link);
  background: transparent;
  border: 1px solid var(--meta);
  cursor: pointer;
}

.login-form button:hover {
  color: var(--title);
  border-color: var(--title);
}

.login-note {
  min-height: 18px;
  font-size: 12px;
  color: var(--title);
}