/*
Theme Name: Nina Geocities
Theme URI: https://example.com/
Author: Davids
Description: Kunterbuntes GeoCities/Nina-Hagen-Style-Theme mit Glitzer, Neon und UFOs.
Version: 1.0
Text Domain: nina-geocities
*/

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #ff00ff, #00ffff, #ffff00);
  background-size: 400% 400%;
  animation: rainbowBG 20s ease infinite;
  font-family: 'Press Start 2P', system-ui, sans-serif;
  color: #ffffff;
  text-shadow: 0 0 4px #000;
}

/* Regenbogen-Animation */
@keyframes rainbowBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Links & Neon-Buttons */

a {
  color: #00ffea;
  text-decoration: underline;
}

a:hover {
  color: #fffb00;
}

.button,
button,
input[type="submit"],
input[type="button"] {
  background: radial-gradient(circle, #ff00ff 0%, #0000ff 40%, #00ffff 100%);
  border: 3px solid #ffffff;
  color: #ffffff;
  padding: 10px 20px;
  text-transform: uppercase;
  font-family: 'Press Start 2P', system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
  text-shadow: 0 0 4px #000;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 0 0 15px #ffff00, 0 0 30px #ff00ff;
}

/* Layout */

.site-wrapper {
  max-width: 960px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.6);
  border: 4px double #ffffff;
  box-shadow: 0 0 20px #ff00ff;
  padding: 10px;
}

/* UFO-Header */

.site-header {
  position: relative;
  padding: 40px 20px 20px;
  text-align: center;
  background: radial-gradient(circle at top, #00ffff 0%, #000033 60%, #000000 100%);
  overflow: hidden;
}

.site-title {
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fffb00;
}

.site-description {
  font-size: 12px;
  color: #ffffff;
}

/* UFO-Grafik (einfacher CSS-UFO) */

.ufo {
  position: absolute;
  top: 10px;
  left: 10%;
  width: 120px;
  height: 60px;
  background: radial-gradient(circle, #cccccc 0%, #666666 60%, #222222 100%);
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 15px #00ffff;
  animation: ufoFloat 6s ease-in-out infinite;
}

.ufo::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 25px;
  width: 70px;
  height: 35px;
  background: radial-gradient(circle, #ffffff 0%, #aaaaaa 60%, #555555 100%);
  border-radius: 50%;
}

.ufo::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 15px;
  width: 90px;
  height: 20px;
  background: radial-gradient(circle, rgba(0,255,255,0.7) 0%, transparent 70%);
  filter: blur(4px);
}

@keyframes ufoFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(10px) translateX(20px); }
}

/* Navigation */

.main-navigation {
  margin-top: 20px;
}

.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.main-navigation a {
  display: inline-block;
  padding: 6px 12px;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  border: 2px solid #ffffff;
  color: #000000;
  text-decoration: none;
  font-size: 10px;
}

.main-navigation a:hover {
  background: linear-gradient(45deg, #ffff00, #ff00ff);
}

/* Content */

.site-content {
  padding: 20px;
}

h1, h2, h3, h4 {
  color: #fffb00;
  text-shadow: 0 0 4px #000;
}

/* 90s GIF-Sticker-Bereich (Sidebar oder Footer) */

.gif-stickers {
  margin-top: 20px;
  text-align: center;
}

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

/* Footer */

.site-footer {
  text-align: center;
  font-size: 10px;
  padding: 10px;
  border-top: 2px dashed #ffffff;
}

/* Glitzer-Cursor (Basis) */

body {
  cursor: url('images/glitter-cursor.png'), auto;
}

/* Fallback: kleiner Kreis, der glitzert (per JS animiert) */

.sparkle {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #ffffff 0%, #ff00ff 40%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: sparkleFade 0.7s linear forwards;
}

@keyframes sparkleFade {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* Responsive */

@media (max-width: 600px) {
  .site-wrapper {
    margin: 0 5px;
  }

  .site-title {
    font-size: 18px;
  }
}