/* hamiltonlucas.com — retro landing page styling.
   GeoCities-era energy: tiled-feeling dark background, Comic Sans,
   a CSS rainbow rule (the closest safe modern equivalent to an animated
   rainbow.gif divider), and a CSS blink animation (the <blink> tag itself
   was never standardized and modern browsers ignore it, so this is the
   only way to actually get 90s-web blinking text today). */

body {
  background-color: #000033;
  background-image:
    radial-gradient(circle at 10% 20%, #1a1a4d 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, #1a1a4d 0%, transparent 40%);
  color: #00ff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  font-size: 16px;
}

h1 {
  font-size: 2em;
  text-shadow: 2px 2px 0 #ff00ff;
}

.rainbow-text {
  background-image: linear-gradient(
    90deg,
    red, orange, yellow, green, blue, indigo, violet, red
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-scroll 4s linear infinite;
}

@keyframes rainbow-scroll {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.rainbow-rule {
  border: 0;
  height: 4px;
  background-image: linear-gradient(
    90deg,
    red, orange, yellow, green, blue, indigo, violet
  );
  width: 80%;
}

.blink {
  animation: blink-text 1s steps(1) infinite;
  color: #ffff00;
  font-weight: bold;
}

@keyframes blink-text {
  0%, 49%  { visibility: visible; }
  50%, 100% { visibility: hidden; }
}

.siteframe {
  max-width: 640px;
  border: 4px double #00ffff;
  background-color: #000018;
  text-align: left;
}

a {
  color: #00ffff;
}

a:visited {
  color: #ff00ff;
}

.nav li {
  margin-bottom: 6px;
}

.marquee-fallback {
  color: #888;
  font-style: italic;
}

.counter {
  font-family: "Courier New", monospace;
}

.counter-digits {
  background-color: #000;
  color: #ff0000;
  padding: 2px 6px;
  border: 1px solid #333;
  letter-spacing: 2px;
}

.footer {
  font-size: 0.8em;
  color: #888;
  text-align: center;
}