@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  --red: #ff4444;
  --blue: #4488ff;
  --lightblue: #88ccff;
  --darkred: #cc2222;
  --bg: #0a0a1a;
}

* {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M5 0 L5 24 L10 19 L14 28 L18 26 L14 18 L21 18 Z" fill="white" stroke="black" stroke-width="1"/></svg>') 5 0, auto;
}

body {
  margin: 0;
  text-align: center;
  background: var(--bg);
  background-image: url('background.gif');
  background-size: cover;
  background-attachment: fixed;
  color: var(--lightblue);
  font-family: 'VT323', monospace;
  min-height: 100vh;
}

::selection {
  background: var(--red);
  color: white;
}

a {
  color: var(--red);
  transition: color 0.2s;
}

a:hover {
  color: white;
}

.wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

.main-box {
  border: 3px dashed var(--red);
  background: rgba(10, 10, 40, 0.9);
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 0 20px var(--red);
}

h1 {
  font-family: 'VT323', monospace;
  font-size: 4rem;
  color: white;
  text-shadow:
    3px 3px 0 var(--red),
    -1px -1px 0 var(--blue);
  margin: 0;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from { text-shadow: 3px 3px 0 var(--red), -1px -1px 0 var(--blue), 0 0 10px white; }
  to { text-shadow: 3px 3px 0 var(--red), -1px -1px 0 var(--blue), 0 0 30px white; }
}

.subtitle {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: var(--lightblue);
  margin: 10px 0;
}

.marquee {
  background: linear-gradient(90deg, var(--red), var(--blue), var(--red), var(--blue));
  color: white;
  padding: 5px;
  font-weight: bold;
  overflow: hidden;
}

.marquee span {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

nav {
  margin: 20px 0;
  padding: 15px;
  border: 2px solid var(--blue);
  background: rgba(68, 136, 255, 0.1);
}

nav a {
  color: var(--lightblue);
  text-decoration: none;
  margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid var(--blue);
  transition: all 0.3s;
  display: inline-block;
}

nav a:hover {
  background: var(--blue);
  color: white;
  transform: scale(1.1) rotate(-3deg);
}

section {
  margin-top: 30px;
  border: 2px dotted var(--blue);
  padding: 15px;
  background: rgba(68, 136, 255, 0.1);
}

section h2 {
  color: var(--red);
  font-family: 'VT323', monospace;
  font-size: 1.8rem;
  margin-top: 0;
  border-bottom: 1px dashed var(--red);
  padding-bottom: 10px;
}

.decorations {
  font-size: 1.5rem;
  margin: 10px 0;
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.webring {
  margin-top: 30px;
  padding: 10px;
  border: 1px solid var(--blue);
  font-size: 0.9rem;
}

.counter {
  margin-top: 20px;
  padding: 10px;
  background: black;
  border: 2px inset #888;
  display: inline-block;
  font-family: 'VT323', monospace;
  color: var(--lightblue);
}

hr {
  border: none;
  border-top: 2px dashed var(--red);
  margin: 20px 0;
}

img.badge {
  image-rendering: pixelated;
  margin: 5px;
}

.content-box {
  border: 3px dashed var(--blue);
  background: rgba(10, 10, 40, 0.9);
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 0 15px var(--blue);
  text-align: left;
}

.content-box h2 {
  color: var(--red);
  font-family: 'VT323', monospace;
  font-size: 1.8rem;
  margin-top: 0;
  border-bottom: 1px dashed var(--red);
  padding-bottom: 10px;
}

.content-box h2:not(:first-child) {
  margin-top: 25px;
}