:root {
  --blue: #0000aa;
  --electric: #00ffff;
  --yellow: #ffff00;
  --hotpink: #ff00ff;
  --lime: #00ff00;
}

* { box-sizing: border-box; }

html {
  background: #000080;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #ffffff;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  background-color: #000080;
  background-image:
    radial-gradient(#ffffff 1px, transparent 1px),
    radial-gradient(#00ffff 1px, transparent 1px);
  background-size: 28px 28px, 41px 41px;
  background-position: 0 0, 14px 11px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.025),
    rgba(255,255,255,0.025) 1px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 3px
  );
}

.page-shell {
  width: min(980px, calc(100% - 24px));
  margin: 14px auto 36px;
  border: 5px ridge #c0c0c0;
  background: #000066;
  box-shadow: 0 0 0 4px #ff00ff, 10px 10px 0 rgba(0,0,0,.55);
}

header, main, footer { padding: 12px; }

.construction-bar {
  margin: -12px -12px 14px;
  padding: 8px;
  color: #000;
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-align: center;
  background: repeating-linear-gradient(135deg, #ffd400 0 18px, #000 18px 36px);
  text-shadow: 1px 1px #ffd400;
  border-bottom: 4px ridge #ddd;
}

.logo-box {
  text-align: center;
  padding: 16px 8px;
  border: 4px outset #c0c0c0;
  background: #000;
}

.pixel-title {
  color: var(--yellow);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(54px, 12vw, 112px);
  letter-spacing: 7px;
  line-height: .9;
  text-shadow: 5px 5px 0 #ff00ff, 10px 10px 0 #00ffff;
}

.subtitle {
  margin-top: 16px;
  color: #00ff00;
  font: bold 16px "Courier New", monospace;
}

marquee {
  margin-top: 8px;
  padding: 7px 0;
  color: #ffff00;
  background: #800080;
  border: 2px inset #fff;
  font-weight: 900;
}

.box, .notice {
  margin: 18px 0;
  padding: 14px;
  border: 4px ridge #c0c0c0;
  background: #000088;
}

.notice.emergency {
  text-align: center;
  color: #000;
  background: #ffff00;
  border: 6px double #ff0000;
  box-shadow: inset 0 0 0 4px #000;
  font-family: "Arial Black", Impact, sans-serif;
}

.blink {
  color: #ff0000;
  font-size: clamp(22px, 5vw, 42px);
  animation: blink 0.75s steps(1) infinite;
}

@keyframes blink { 50% { visibility: hidden; } }

.big-link {
  display: inline-block;
  padding: 10px 16px;
  color: #fff;
  background: #0000ff;
  border: 5px outset #ddd;
  font-size: clamp(18px, 4vw, 28px);
  text-decoration: underline;
}
.big-link:active { border-style: inset; }

h1, h2 {
  text-align: center;
  color: #ffff00;
  text-shadow: 3px 3px #ff00ff;
}

h1 { font-size: clamp(30px, 6vw, 50px); }
h2 { margin-top: 28px; font-size: clamp(24px, 4vw, 34px); }

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.person-card {
  min-width: 0;
  padding: 10px;
  text-align: center;
  color: #000;
  background: #c0c0c0;
  border: 5px outset #efefef;
  font-family: Arial, sans-serif;
}

.person-card:nth-child(odd) { background: #ffff99; }
.person-card:nth-child(3n) { background: #99ffff; }

.person-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 4px inset #fff;
  image-rendering: auto;
  background: #666;
}

.person-card h3 {
  margin: 8px 0 2px;
  color: #000080;
  font-size: 20px;
}

.role {
  margin-bottom: 8px;
  color: #800080;
  font-weight: 900;
}

.person-card a {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 5px;
  color: #0000ee;
  font-weight: bold;
  text-decoration: underline;
}
.person-card a:visited { color: #551a8b; }

.nostalgia { text-align: center; }
.badge {
  display: inline-block;
  margin: 5px;
  padding: 6px 8px;
  color: #fff;
  background: #000;
  border: 3px outset #aaa;
  font: bold 12px "Courier New", monospace;
}

.small { font-size: 13px; }
.tiny { font-size: 11px; }

footer {
  text-align: center;
  color: #ccc;
  font-family: "Courier New", monospace;
}

footer hr {
  height: 5px;
  border: 0;
  background: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
}

.counter {
  margin-top: 12px;
  color: #00ff00;
  font-weight: bold;
}
.counter span {
  padding: 3px 7px;
  color: #ff3300;
  background: #000;
  border: 2px inset #aaa;
  font-family: "Courier New", monospace;
  letter-spacing: 2px;
}

@media (max-width: 760px) {
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .people-grid { grid-template-columns: 1fr; }
  .page-shell { width: calc(100% - 12px); margin-top: 6px; }
  header, main, footer { padding: 8px; }
  .construction-bar { margin: -8px -8px 12px; }
}