/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

body {
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
body {
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.wavy span {
  display: inline-block;
  animation: wave 1s infinite ease-in-out;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-style: italic;
}

.wavy span:nth-child(1)  { animation-delay: 0s; }
.wavy span:nth-child(2)  { animation-delay: 0.05s; }
.wavy span:nth-child(3)  { animation-delay: 0.1s; }
.wavy span:nth-child(4)  { animation-delay: 0.15s; }
.wavy span:nth-child(5)  { animation-delay: 0.2s; }
.wavy span:nth-child(6)  { animation-delay: 0.25s; }
.wavy span:nth-child(7)  { animation-delay: 0.3s; }
.wavy span:nth-child(8)  { animation-delay: 0.35s; }
.wavy span:nth-child(9)  { animation-delay: 0.4s; }
.wavy span:nth-child(10) { animation-delay: 0.45s; }
.wavy span:nth-child(11) { animation-delay: 0.5s; }
.wavy span:nth-child(12) { animation-delay: 0.55s; }
.wavy span:nth-child(13) { animation-delay: 0.6s; }
.wavy span:nth-child(14) { animation-delay: 0.65s; }
.wavy span:nth-child(15) { animation-delay: 0.7s; }
.wavy span:nth-child(16) { animation-delay: 0.75s; }
.wavy span:nth-child(17) { animation-delay: 0.8s; }
.wavy span:nth-child(18) { animation-delay: 0.85s; }
.wavy span:nth-child(19) { animation-delay: 0.9s; }
.wavy span:nth-child(20) { animation-delay: 0.95s; }
.wavy span:nth-child(21) { animation-delay: 1s; }
.wavy span:nth-child(22) { animation-delay: 1.05s; }
.wavy span:nth-child(23) { animation-delay: 1.1s; }
.wavy span:nth-child(24) { animation-delay: 1.15s; }
.wavy span:nth-child(25) { animation-delay: 1.2s; }
.wavy span:nth-child(26) { animation-delay: 1.25s; }
.wavy span:nth-child(27) { animation-delay: 1.3s; }
.wavy span:nth-child(28) { animation-delay: 1.35s; }
.wavy span:nth-child(29) { animation-delay: 1.4s; }
.wavy span:nth-child(30) { animation-delay: 1.45s; }
.wavy span:nth-child(31) { animation-delay: 1.5s; }
.wavy span:nth-child(32) { animation-delay: 1.55s; }
.wavy span:nth-child(33) { animation-delay: 1.6s; }
.wavy span:nth-child(34) { animation-delay: 1.65s; }
.wavy span:nth-child(35) { animation-delay: 1.7s; }
.wavy span:nth-child(36) { animation-delay: 1.75s; }

.wavy {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-style: italic;
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
  background-size: 400%;
  animation: glitter 5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}
.wavy span {
  display: inline-block;
  animation: wave 1s infinite ease-in-out;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-style: italic;
  color: #fff;
  text-shadow:
    0 0 2px #fff,
    0 0 5px red,
    0 0 10px red,
    0 0 15px red;
}

@keyframes glowShift {
  0% {
    text-shadow:
      0 0 2px white,     /* soft white inner glow */
      0 0 5px red,
      0 0 10px red;
  }
  50% {
    text-shadow:
      0 0 2px white,
      0 0 5px blue,
      0 0 10px blue;
  }
  100% {
    text-shadow:
      0 0 2px white,
      0 0 5px red,
      0 0 10px red;
  }
}

.wavy span {
  display: inline-block;
  animation: wave 1s infinite ease-in-out, glowShift 3s infinite ease-in-out;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-style: italic;
  color: white; /* keeps the fill white */
}
.red {
  color: red;
  text-shadow: 0 0 5px red;
}

.blue {
  color: blue;
  text-shadow: 0 0 5px blue;
}

.trashline {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-style: italic;
  font-size: 1.1em;
}
main {
  color: black;
  text-shadow: 0 0 3px white, 0 0 6px white;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  text-align: center;
  margin-top: 2em;
}

footer {
  color: black;
  text-shadow: 0 0 3px white, 0 0 6px white;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  text-align: center;
  margin-bottom: 2em;
}

body {
  margin: 0;
  padding: 0;
  background-color: black;
  overflow: hidden;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(white 1px, transparent 1px);
  background-size: 50px 50px, 100px 100px;
  animation: starDrift 60s linear infinite;
}

@keyframes starDrift {
  0% {
    background-position: 0 0, 100px 100px;
  }
  100% {
    background-position: 1000px 1000px, 1100px 1100px;
  }
}

.oc {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  background-color: black;
  padding: 1em;
  border: 1px solid white;
  border-radius: 50%; /* ← makes it circular */
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-shadow: 0 0 2px white, 0 0 4px white;

.oc {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: monospace;
}

.ascii {
  margin: 0;
  line-height: 1;
}
.oc {
  display: flex;
  align-items: center;
  gap: 16px;
  color: white;
  text-shadow: 0 0 6px white;
  font-family: monospace;
}

.oc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

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

.scuffle-description {
  position: absolute;
  top: 30px; /* Increase this number to move it farther down */
  left: 260px; /* Keeps it far to the right */
  color: white;
  text-shadow: 0 0 6px white;
  font-family: monospace;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

img[src="starscream6.png"] {
  position: fixed;
  left: 10px;
  top: 40%;
  transform: translateY(-50%);
  height: 200px !important;
  width: auto !important;
  z-index: 9999;
}