/* ClanCrate's "under construction" page: the web as it looked in 1996, built with today's HTML and CSS. */
:root {
  --sky: #000033;
  --panel: #c0c0c0;
  --link: #00ffff;
  --visited: #ff66ff;
  --yellow: #ffff00;
  --orange: #ff8c00;
  --hot: #ff00cc;
  --lime: #33ff33;
  --text: #ffffff;
  --old: "Times New Roman", Times, serif;
  --fun: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  --chunky: "Arial Black", Impact, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--sky); }

/* A starfield made from repeating dots, like a tiled background image. */
body {
  margin: 0;
  color: var(--text);
  font: 17px/1.45 var(--old);
  background-color: var(--sky);
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90px 120px, #ffd 50%, transparent 51%),
    radial-gradient(2px 2px at 150px 60px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 170px, #aaf 50%, transparent 51%),
    radial-gradient(1px 1px at 180px 190px, #fff 50%, transparent 51%);
  background-size: 200px 200px;
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--yellow); background: var(--hot); }

.page {
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 12px 40px;
}

/* ---------- Scrolling news ---------- */
.marquee {
  overflow: hidden;
  border: 3px ridge var(--panel);
  background: #000;
  color: var(--lime);
  font: bold 15px "Courier New", monospace;
  white-space: nowrap;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 28s linear infinite;
}

@keyframes scroll { to { transform: translateX(-100%); } }

/* ---------- Masthead ---------- */
.masthead { padding: 16px 0 6px; text-align: center; }
.crate { width: 110px; height: 92px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }

/* WordArt: rainbow letters with a heavy shadow. */
.wordart {
  margin: 6px 0 0;
  font: italic 900 clamp(48px, 12vw, 92px) / 1 var(--chunky);
  letter-spacing: 2px;
  background: linear-gradient(90deg, #ff0000, #ff8c00, #ffff00, #33ff33, #00ffff, #6666ff, #ff00cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(4px 4px 0 #000) drop-shadow(2px 2px 0 #fff);
  transform: skew(-8deg);
}

.tagline {
  margin: 10px 0 0;
  color: var(--yellow);
  font: bold clamp(18px, 4vw, 26px) var(--fun);
  text-shadow: 2px 2px 0 #c00;
}

/* ---------- Under construction ---------- */
.construction {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0;
  padding: 12px;
  border: 4px outset var(--panel);
  background: #222;
}

.construction h2 { margin: 0 0 6px; }
.construction p { margin: 0 0 10px; }
.sign { flex: none; width: 110px; height: 110px; }
.blink { animation: blink 0.9s steps(1) infinite; }
.blink.alt { animation-delay: 0.45s; }
@keyframes blink { 50% { opacity: 0.15; } }

.flash-text {
  color: var(--yellow);
  font: 900 clamp(22px, 5vw, 34px) var(--chunky);
  animation: flash 1s steps(1) infinite;
}

@keyframes flash { 50% { color: var(--hot); } }

.barrier {
  height: 22px;
  border: 2px solid #000;
  background: repeating-linear-gradient(-45deg, #ffcc00 0 18px, #000 18px 36px);
}

/* ---------- The big table layout ---------- */
.layout { width: 100%; border-collapse: separate; border-spacing: 8px; }
.layout td { vertical-align: top; }

.sidebar {
  width: 190px;
  padding: 10px;
  border: 3px ridge var(--panel);
  background: #000066;
  text-align: center;
}

.side-title { margin: 0 0 8px; color: var(--yellow); font: bold 15px "Courier New", monospace; }
.nav { margin: 0 0 14px; padding: 0; list-style: none; text-align: left; }
.nav li { margin: 6px 0; }
.nav li::before { content: "\00bb  "; color: var(--orange); }

.cone { width: 60px; height: 70px; }

.counter-label { margin: 10px 0 4px; font-size: 13px; }

.counter {
  display: inline-block;
  margin: 0;
  padding: 2px 6px;
  border: 2px inset var(--panel);
  background: #000;
  color: #ff2020;
  font: bold 22px "Courier New", monospace;
  letter-spacing: 3px;
  text-shadow: 0 0 6px #f00;
}

.content {
  padding: 4px 14px 14px;
  border: 3px ridge var(--panel);
  background: rgb(0 0 40 / 0.85);
}

.content h3 {
  margin: 18px 0 6px;
  color: var(--orange);
  font: bold 22px var(--fun);
  text-decoration: underline wavy var(--hot);
}

.star { display: inline-block; color: var(--yellow); animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.features { padding-left: 22px; }
.features li { margin: 8px 0; }

.new {
  padding: 0 4px;
  background: #ff0000;
  color: var(--yellow);
  font: bold 12px var(--chunky);
  animation: flash 0.8s steps(1) infinite;
}

.news dt { color: var(--lime); font-weight: bold; }
.news dd { margin: 0 0 10px 18px; }

.download { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.soon { color: var(--yellow); font-style: italic; }

/* Raised grey Windows 95 style button. */
.bevel {
  display: inline-block;
  padding: 6px 14px;
  border: 3px outset #dfdfdf;
  background: var(--panel);
  color: #000;
  font: bold 14px Arial, sans-serif;
  cursor: pointer;
}

.bevel:active { border-style: inset; }
.bevel.disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: not-allowed; }

.guest {
  margin: 8px 0;
  padding: 6px 12px;
  border: 2px dashed var(--visited);
  background: #1a0033;
  font-family: var(--fun);
}

.guest cite { display: block; color: var(--link); font-size: 14px; }

.webring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  border: 2px solid var(--lime);
  font: bold 15px "Courier New", monospace;
}

.ring-name { color: var(--lime); }
.small { font-size: 13px; color: #ccc; }

hr.rainbow {
  height: 6px;
  margin: 18px 0;
  border: 0;
  background: linear-gradient(90deg, #ff0000, #ff8c00, #ffff00, #33ff33, #00ffff, #6666ff, #ff00cc);
}

/* ---------- 88x31 web badges, drawn by hand ---------- */
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
  border: 1px solid #000;
  outline: 1px solid #fff;
  font: 9px/1.05 Verdana, Arial, sans-serif;
  text-align: center;
  overflow: hidden;
}

.b1 { background: linear-gradient(#003366, #0066cc); color: #fff; }
.b2 { background: #000; color: var(--lime); }
.b3 { background: #ffffcc; color: #000; }
.b4 { background: linear-gradient(#660000, #cc0000); color: var(--yellow); }
.b5 { background: linear-gradient(#330066, #9900cc); color: #fff; }
.b6 { background: repeating-linear-gradient(-45deg, #ffcc00 0 6px, #000 6px 12px); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }

.footer { margin-top: 18px; text-align: center; font-size: 14px; }

/* ---------- The pretend Flash intro ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: #000;
}

.intro[hidden] { display: none; }

.intro-box {
  width: min(92vw, 420px);
  padding: 22px;
  border: 3px outset var(--panel);
  background: #111;
  text-align: center;
}

.intro-title { margin: 0 0 10px; color: var(--hot); font: 900 26px var(--chunky); }
.intro-text { margin: 0 0 10px; color: var(--lime); font: bold 15px "Courier New", monospace; }
.intro-small { color: #888; font-size: 12px; }

.intro-bar { height: 18px; border: 2px inset var(--panel); background: #000; }
#intro-fill { width: 0; height: 100%; background: repeating-linear-gradient(90deg, #0000cc 0 10px, #000099 10px 12px); }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .construction { flex-direction: column; text-align: center; }
  .layout, .layout tbody, .layout tr, .layout td { display: block; width: 100%; }
  .sidebar { margin-bottom: 8px; }
}

/* Everything holds still for people who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .marquee span { padding-left: 0; }
}