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

body {
  background-color: #ff0000;
  font-family: 'Comic Neue', Comic Sans MS, cursive;
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text y="28" font-size="28">🤡</text></svg>'), auto;
}

h1 {
  color: #00ff00;
  animation: move-right 2s infinite, spin 8s linear infinite, colorshift 0.3s infinite;
  font-size: 50px;
  font-style: italic;
  position: relative;
  text-shadow: 4px 4px 0 blue, -4px -4px 0 yellow;
}

label {
  color: #00ff00;
  font-style: bold;
}

/* Random tooltip that covers everything */
body::after {
  content: "ℹ️ TIP: This page works best in Internet Explorer 4.0";
  position: fixed;
  top: 40%;
  left: 30%;
  background: yellow;
  border: 3px solid black;
  padding: 10px;
  font-size: 8px;
  z-index: 99999;
  pointer-events: none;
  animation: tooltip-drift 7s ease-in-out infinite;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
  background: red;
  color: red;
  border: none;
  font-size: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
  background: darkred;
  color: red;
  outline: 20px solid lime;
}

input[type="range"] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 20px;
  height: 200px;
  transform: rotate(180deg);
}

select {
  transform: scaleX(-1);
  background: purple;
  color: lime;
  font-size: 7px;
}

table {
  margin-left: -100px;
}

button {
  transform: rotate(180deg);
}

/* Progress bar goes backwards animation */
#progress_bar {
  animation: go-backwards 4s ease-in-out infinite;
}

#timer {
  animation: colorshift 0.2s infinite;
}

fieldset {
  margin: 20px 0;
}

/* Make scrollbar invisible on TOS */
#tos_container::-webkit-scrollbar {
  width: 1px;
  background: black;
}
#tos_container::-webkit-scrollbar-thumb {
  background: black;
}

@keyframes move-right {
  0%   { left: 300px; }
  50%  { left: 1000px; }
  100% { left: 200px; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes colorshift {
  0%   { color: red; }
  25%  { color: lime; }
  50%  { color: blue; }
  75%  { color: yellow; }
  100% { color: red; }
}

@keyframes go-backwards {
  0%   { width: 87%; }
  30%  { width: 12%; }
  60%  { width: 94%; }
  80%  { width: 3%; }
  100% { width: 87%; }
}

@keyframes guy-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes guy-drift {
  0%   { top: 10%;  left: 10%;  }
  25%  { top: 60%;  left: 70%;  }
  50%  { top: 20%;  left: 50%;  }
  75%  { top: 70%;  left: 20%;  }
  100% { top: 10%;  left: 10%;  }
}

@keyframes tooltip-drift {
  0%   { top: 40%; left: 30%; }
  25%  { top: 20%; left: 60%; }
  50%  { top: 60%; left: 20%; }
  75%  { top: 10%; left: 50%; }
  100% { top: 40%; left: 30%; }
}