/* ===== BASE ===== */
body {
  background-color: black;

  background-image: url("P1010005.JPG");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;

  color: hotpink;
  font-family: "Times New Roman", serif;
  text-align: center;
}

/* ===== MAIN CONTAINER ===== */
.container {
  width: 700px;
  margin: 40px auto;
  border: 3px solid hotpink;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
}

/* ===== TEXT ===== */
h1 {
  color: hotpink;
  text-shadow: 2px 2px purple;
}

marquee {
  color: hotpink;
  font-weight: bold;
}

/* ===== LINKS ===== */
.links {
  text-align: left;
  margin-top: 20px;
}

/* multicolor links */
.yt { color: red; }
.nina { color: orange; }
.spotify { color: lime; }
.gear { color: yellow; }
.ig { color: cyan; }

.links a {
  text-decoration: underline;
}

.links a:hover {
  color: white;
  font-size: 110%;
}

/* ===== VIDEO ===== */
iframe {
  border: 3px solid hotpink;
  margin-top: 20px;
}

/* ===== FLOATING GIF ===== */
.side-img {
  position: fixed;
  width: 150px;
  z-index: 999;
  pointer-events: none;

  animation: floatAround 40s linear infinite;
}

/* chaotic movement */
@keyframes floatAround {
  0%   { top: 5%; left: 5%; }
  20%  { top: 20%; left: 80%; }
  40%  { top: 80%; left: 60%; }
  60%  { top: 50%; left: 10%; }
  80%  { top: 90%; left: 90%; }
  100% { top: 5%; left: 5%; }
}

/* ===== BLINKING TEXT (OPTIONAL CLASS) ===== */
.blink {
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/* ===== SCROLLBAR CHAOS (some browsers only) ===== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: hotpink;
}

::-webkit-scrollbar-track {
  background: black;
}

/* ===== RANDOM EXTRA CHAOS ===== */
img:hover {
  transform: scale(1.1) rotate(2deg);
}