/* Internet Explorer's homepage (siligus.home): the look shared by its pages. 2000s emo
   Neocities style, after ghostk.id's "every box is a window"; see "Internet Explorer's
   homepage" in src/shell/explorer/DEV.md. */
@font-face { font-family: "IBM VGA"; src: url("fonts/Web437_IBM_VGA_8x14.woff") format("woff"); }
@font-face { font-family: "Fixedsys"; src: url("fonts/fixedsys-excelsior.ttf") format("truetype"); }
:root {
  --bg: #0c0b0e;
  --surface: #141217;
  --surface-2: #1d1a21;
  --line: #3a3340;
  --text: #e6e1ea;
  --dim: #8f8796;
  --pink: #ff4f9a;
  --pink-2: #ff8cc0;
  --purple: #b07cff;
  --lime: #9dff6a;
  --pixel: "Fixedsys", "Courier New", monospace;
  --heading: "IBM VGA", "Fixedsys", monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  padding: 14px 10px 24px;
  color: var(--text);
  font: 16px/1.25 var(--pixel);
  -webkit-font-smoothing: none;
  /* Near-black, under the moving starfield (site.js) */
  background: transparent;
}
.starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
a { color: var(--pink-2); text-decoration: underline dotted; }
a:hover { color: var(--lime); }
::selection { background: var(--pink); color: #000; }
.page { position: relative; z-index: 1; max-width: 590px; margin: 0 auto; }
/* Checkered strips down both sides (Daniel's request, 2026-10-25), over the starfield */
body::before, body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 48px; /* three columns of 16px squares */
  z-index: 0;
  pointer-events: none;
  background: repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0 0 / 32px 32px;
}
body::before { left: 0; border-right: 2px solid var(--pink); }
body::after { right: 0; border-left: 2px solid var(--pink); }
.dim { color: var(--dim); }
.accent { color: var(--pink); }
.lime { color: var(--lime); }
code { font: inherit; color: var(--lime); }

/* Header */
header { text-align: center; margin-bottom: 8px; }
h1 {
  margin: 0;
  font: 26px/1.1 var(--heading);
  background: linear-gradient(90deg, var(--pink), #fff, var(--purple), var(--pink-2), #fff, var(--pink));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 4s linear infinite;
}
@keyframes sheen { to { background-position: 300% 0; } }
.tagline { color: var(--dim); margin-top: 6px; }
.tagline b { color: var(--pink); font-weight: normal; }
nav.pages { margin: 8px 0 6px; }
nav.pages a { margin: 0 6px; }
nav.pages a[aria-current] { color: #fff; text-decoration: none; border-bottom: 1px solid var(--pink); }

marquee {
  display: block;
  margin-bottom: 10px;
  padding: 2px 0;
  color: var(--lime);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.construction { text-align: center; color: var(--dim); margin: -2px 0 10px; }
.construction span { display: block; color: #000; background: repeating-linear-gradient(45deg, #ffd000 0 6px, #000 6px 12px); padding: 1px 6px; }
.construction span b { background: #ffd000; font-weight: normal; padding: 0 4px; }

/* Every box is a little window: Name.exe, then ─ □ × */
.cols { display: flex; gap: 10px; align-items: flex-start; }
.side { flex: 0 0 180px; }
.main { flex: 1; min-width: 0; }
.win {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 10px;
}
.win > .bar {
  display: flex;
  justify-content: space-between;
  padding: 2px 6px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #2a1424, var(--surface-2));
  font: 16px/1 var(--heading);
  color: var(--pink-2);
}
.win > .bar .ctl { color: var(--dim); letter-spacing: 4px; }
.win > .in { padding: 8px; background: var(--surface-2); }
.win p { margin: 0 0 8px; }
.win p:last-child { margin-bottom: 0; }
ul { margin: 0; padding-left: 16px; }
li { margin-bottom: 4px; }
li::marker { content: "\2020 "; color: var(--pink); }
/* Room between the cross and the text */
ul:not(.todo):not(.log) > li { padding-left: 6px; }

.details { width: 100%; border-collapse: collapse; }
.details td { padding: 1px 0; vertical-align: top; }
.details td:first-child { color: var(--pink); width: 80px; }

button {
  font: 16px/1 var(--pixel);
  color: #000;
  background: var(--pink);
  border: 1px solid var(--pink-2);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
}
button:hover { background: var(--pink-2); }
button:active { transform: translateY(1px); }
.launch { display: none; }
.in-desktop .launch { display: inline-block; }

/* Flair.exe, after minx98.neocities.org/graphics: each kind of graphic in a grey Win98 group
   box (no titles, Daniel's call), on a black grid, in white pixel text with a hard shadow */
.flair > .in {
  background:
    linear-gradient(#2a2a2a 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, #2a2a2a 1px, transparent 1px) 0 0 / 16px 16px,
    #000;
  color: #fff;
  text-shadow: 2px 0 #000;
}
.flair fieldset {
  margin: 8px 0 0;
  padding: 8px;
  background: #c0c0c0;
  border: 2px groove #fff;
  text-shadow: none;
}

/* 88x31 buttons */
.badges { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.badge {
  height: 31px;
  display: grid; place-content: center;
  padding: 0 2px;
  text-align: center;
  font: bold 8px/1.05 Verdana, Tahoma, sans-serif;
  border: 1px solid #fff; border-right-color: #555; border-bottom-color: #555;
}
.b1 { background: linear-gradient(#ff7ab8, #c2185b); color: #fff; }
.b2 { background: #000; color: var(--lime); }
.b3 { background: linear-gradient(#fff, #c0c0c0); color: #000; }
.b4 { background: var(--purple); color: #fff; }
.b6 { background: #ff7a59; color: #fff; }
.b7 { background: linear-gradient(#5a5a5a, #1e1e1e); color: #ffd23a; }
.b8 { background: #ffd000; color: #000; }
.b8 .cta { display: block; margin-top: 2px; color: #d6192a; animation: cta 0.7s steps(1) infinite; }
@keyframes cta { 50% { visibility: hidden; } }

/* Ribbons, as wide cute blinkies: pastel, a pixel heart bobbing at
   each end (one up while the other's down), the words blinking between two shades */
.ribbons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ribbon {
  --tint: #ff4f9a; --tint-2: #ff8cc0; --paper: #ffd6ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 6px;
  background:
    repeating-linear-gradient(0deg, #ffffff55 0 1px, transparent 1px 3px),
    var(--paper);
  border: 2px solid var(--tint);
  font: 16px/1 var(--heading);
  white-space: nowrap;
}
.ribbon.alt { --tint: #8a4fe8; --tint-2: #b98cff; --paper: #e6d8ff; }
/* The therapist ribbon: squeezed sideways, if ever its words outgrow it */
.ribbon.squeeze { --tint: #1f8f5a; --tint-2: #5bd69a; --paper: #d8ffe8; }
/* Centered over the ribbon, so its natural width doesn't widen it; squeezed to fit by index.html's script */
.ribbon.squeeze { position: relative; }
.ribbon.squeeze .words { position: absolute; left: 50%; transform: translateX(-50%); transform-origin: center; }
.ribbon .words {
  color: var(--tint);
  text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff;
  animation: ribbon-words 1s steps(1) infinite;
}
@keyframes ribbon-words { 50% { color: var(--tint-2); } }
.ribbon .sprite {
  width: 14px; height: 12px;
  color: var(--tint);
  shape-rendering: crispEdges;
  animation: bob 0.8s steps(1) infinite;
}
.ribbon .sprite:last-child { animation-delay: -0.4s; }
@keyframes bob { 50% { transform: translateY(-3px); } }

/* Stamps: deviantART-style 2:1 stamps, a picture on the left and the words beside it */
.stamps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stamp {
  display: grid;
  grid-template-columns: 30px 1fr;
  height: 40px;
  border: 1px solid #000;
  font: bold 10px/1.1 Verdana, Tahoma, sans-serif;
  overflow: hidden;
}
.stamp .art { display: grid; place-items: center; font: 18px/1 var(--heading); }
.stamp .words { display: grid; place-items: center; padding: 2px 4px; text-align: center; }
.s1 { background: #1d6b2c; color: #c8ffb0; }
.s1 .art { background: #0e3a17; color: var(--lime); }
.s2 { background: #ffd000; color: #000; }
.s2 .art { background: #000; color: #ffd000; }
/* Comic Sans, in Comic Sans */
.s3 { background: #fff36b; color: #d6192a; }
.s3 .art { background: #00a2e8; color: #fff; font: bold 15px/1 "Comic Sans MS", "Comic Sans", cursive; }
.s3 .words { font: bold 15px/1.1 "Comic Sans MS", "Comic Sans", cursive; }

/* Blinkies: white text on a solid dark background, blinking to bright pink, with tiny sparkles
   twinkling in the corners (drawn, and kept off the words so they stay readable) */
.blinkies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.blinkie {
  position: relative;
  display: block;
  height: 24px;
  overflow: hidden;
  text-align: center;
  font: 14px/22px var(--pixel);
  border: 1px solid var(--pink);
  background: #2a0a1c;
  color: #fff;
  text-shadow: 1px 1px #000;
  white-space: nowrap;
  animation: blink 1.2s steps(1) infinite;
}
.blinkie:nth-child(2n) { animation-delay: -0.6s; }
.blinkie::before, .blinkie::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px;
  background: #ffd23a;
  transform: rotate(45deg);
  animation: twinkle 0.6s steps(1) infinite;
}
.blinkie::before { left: 3px; top: 3px; }
.blinkie::after { right: 3px; bottom: 3px; animation-delay: -0.3s; }
@keyframes blink { 50% { color: #ff8cc0; } }
@keyframes twinkle { 50% { opacity: 0; } }

.home-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
footer { text-align: center; color: var(--dim); }
.webring { margin: 10px 0; }
.counter {
  display: inline-block;
  font: 16px var(--heading);
  letter-spacing: 2px;
  color: var(--lime);
  background: #000;
  border: 1px solid var(--line);
  padding: 0 4px;
}