/*
 * Steve's Stylesheet!!!
 * Made by Steve Business
 * "I watched a CSS tutorial on YouTube" - Steve, 2019
 *
 * NOTE TO SELF: Comic Sans is professional right???
 * NOTE TO SELF: Sterling said something about "accessibility" but idk
 */

/* EVERYTHING IS COMIC SANS - THIS IS PROFESSIONAL */
* {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif !important;
}

body {
  /* Steve saw this tiling thing on a cool website */
  background-color: #FFFFFF;
  /* Steve considered a tiled background but his Mom said no */
  margin: 0;
  padding: 0;
}

/* Steve's custom cursor - everywhere is clickable!!! */
body, a, button, input {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='24' font-size='24'>👆</text></svg>"), pointer !important;
}

/* The main title - Steve is proud of this */
.main-title {
  font-size: 48px;
  color: #FF6600;
  text-shadow: 3px 3px #FFD700, 5px 5px #FF0000;
  /* Steve learned about text-shadow!!! */
}

.subtitle {
  font-size: 18px;
  color: #0066CC;
  font-style: italic;
}

/* Marquee text styling */
.marquee-text {
  font-size: 20px;
  font-weight: bold;
  color: #FF0000;
}

/* Steve's clip art emojis */
.clip-art {
  font-size: 48px;
  /* Steve: "Emojis ARE clip art right???" */
}

/* Links - Steve learned about hover effects */
a {
  color: #0000FF;
  text-decoration: underline;
}

a:hover {
  color: #FF0000;
  text-decoration: none;
  /* Steve thinks this is VERY professional */
}

a:visited {
  color: #800080;
}

/* Make the blink tag work (Steve REALLY wanted blink) */
blink {
  animation: blink-animation 1s steps(2, start) infinite;
}

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

/* HR styling - Steve likes thick colorful lines */
hr {
  height: 5px;
  border: none;
}

/* Lists - Steve thinks bullets are cool */
ul {
  list-style-type: disc;
}

li {
  margin-bottom: 5px;
}

/* Tables - Steve learned about border-collapse but decided against it */
table {
  border-collapse: separate;
}

/* Steve's "responsive design" - he doesn't really know what this is */
@media screen and (max-width: 800px) {
  body {
    /* Steve: "It should work on phones right?" */
    /* Narrator: It does not work well on phones */
  }
}

/* Steve's special effects section */

/* Rainbow text - Steve saw this somewhere */
.rainbow {
  background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-move 3s linear infinite;
}

@keyframes rainbow-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Sparkle effect - for important things */
.sparkle::after {
  content: " ✨";
}

/* Steve's "professional" color scheme */
.steve-red { color: #FF0000; }
.steve-blue { color: #0000FF; }
.steve-yellow { background-color: #FFFF00; }
.steve-green { color: #00FF00; }

/* Steve's attempt at a shadow effect */
.steve-shadow {
  box-shadow: 5px 5px 0px #FFD700, 10px 10px 0px #FF6600;
}

/* Visitor counter styling */
#counter {
  font-family: 'Courier New', monospace !important;
  font-size: 24px;
  letter-spacing: 5px;
}

/* Steve's signature */
.steve-signature {
  font-style: italic;
  color: #666666;
}

/*
 * END OF STEVE'S CSS
 *
 * Sterling's note: Steve, this is... a lot.
 * Steve's reply: Thanks!!! I worked really hard on it!!!
 * Sterling's note: That wasn't a compliment.
 * Steve's reply: :D :D :D
 */