body {
  background: rgba(0, 25, 41,1);
  background-image: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExbWYzdGJqOWcyc3owYXIwYXphMXNobmluejh3NjlsM3NmcHJxbncxbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/NANml9RASmTDU9tA5s/giphy.gif');
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  font-family: Verdana;
}

h1 {
  background-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExd255OTdtaG1lcW4wMnpqOWk0aWgyaTJ3dDkxbW9ueXZuNGxzbDRlZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XrnJ3ofl5DCtG/giphy.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-clip: text;
  font-size: 5rem;
  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: #fff;
  color: transparent;
}

img {
  max-width: 100%
}

.footer {
  margin-top: 150px;
  height: 8px;
  background: url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNDhheHBsNmh2YWY1eDh4bXkxcGdpb2JpdDc2NmY5cXFqZHkyNnRjMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/H7F0zSaC9ZHZC/giphy.gif') repeat-x;
}

.outline-dash {
  outline: 1px dashed rgba(255,255,255,.3)
}


/* Dumb Abnoxious Shit */

.shake-text span {
  display: inline-block;
  animation: tinyShake 0.6s ease-in-out infinite;
}

/* Shake each letter, baybeeee! */
.shake-text span:nth-child(1) { animation-delay: 0.00s; }
.shake-text span:nth-child(2) { animation-delay: 0.07s; }
.shake-text span:nth-child(3) { animation-delay: 0.14s; }
.shake-text span:nth-child(4) { animation-delay: 0.21s; }
.shake-text span:nth-child(5) { animation-delay: 0.28s; }
.shake-text span:nth-child(6) { animation-delay: 0.35s; }
.shake-text span:nth-child(7) { animation-delay: 0.42s; }
.shake-text span:nth-child(8) { animation-delay: 0.49s; }
.shake-text span:nth-child(9) { animation-delay: 0.56s; }

@keyframes tinyShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(1px, -1px) rotate(1deg); }
  40% { transform: translate(-1px, 1px) rotate(-1deg); }
  60% { transform: translate(1px, 1px) rotate(1deg); }
  80% { transform: translate(-1px, 0) rotate(-0.5deg); }
}

.shake-element {
  display: inline-block;
  animation: elementShake 0.3s ease-in-out infinite;
  transition: transform 0.2s ease;
}

.shake-element:hover {
  transform: scale(1.2);
  animation: elementShakeHarder 0.15s ease-in-out infinite;
}

@keyframes elementShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(2px, -2px) rotate(1deg); }
  20% { transform: translate(-2px, 1px) rotate(-1deg); }
  30% { transform: translate(2px, 2px) rotate(1deg); }
  40% { transform: translate(-2px, -1px) rotate(-0.5deg); }
  50% { transform: translate(1px, -2px) rotate(0.5deg); }
  60% { transform: translate(-1px, 2px) rotate(-1deg); }
  70% { transform: translate(2px, 1px) rotate(1deg); }
  80% { transform: translate(-2px, -2px) rotate(-0.5deg); }
  90% { transform: translate(1px, 1px) rotate(0.5deg); }
}

@keyframes elementShakeHarder {
  0%, 100% { transform: scale(1.2) translate(0, 0) rotate(0deg); }
  10% { transform: scale(1.2) translate(4px, -4px) rotate(2deg); }
  20% { transform: scale(1.2) translate(-4px, 2px) rotate(-2deg); }
  30% { transform: scale(1.2) translate(4px, 4px) rotate(2deg); }
  40% { transform: scale(1.2) translate(-4px, -2px) rotate(-1deg); }
  50% { transform: scale(1.2) translate(2px, -4px) rotate(1deg); }
  60% { transform: scale(1.2) translate(-2px, 4px) rotate(-2deg); }
  70% { transform: scale(1.2) translate(4px, 2px) rotate(2deg); }
  80% { transform: scale(1.2) translate(-4px, -4px) rotate(-1deg); }
  90% { transform: scale(1.2) translate(2px, 2px) rotate(1deg); }
}

.rainbow-overlay {
  position: relative;
  display: inline-block;
}

.rainbow-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: rainbowOverlay 1s steps(1) infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes rainbowOverlay {
  0%, 100% { background: rgba(255, 0, 0, 0.5); }
  16% { background: rgba(255, 165, 0, 0.5); }
  33% { background: rgba(255, 255, 0, 0.5); }
  50% { background: rgba(0, 255, 0, 0.5); }
  66% { background: rgba(0, 0, 255, 0.5); }
  83% { background: rgba(75, 0, 130, 0.5); }
}
