body {
    background: linear-gradient(-45deg, #020407, #03060b, #04080e, #050a13, #060c15, #060d17, #080e19, #09101c, #0a121f, #0a1422, #0c1625, #0d1829, #0e1a2d, #101d30);
    background-size: 500% 500%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

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

.rotate {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    margin-right: 95%;
    transform: rotate(0deg);
  }
  to {
  margin-left: 95%;
    transform: rotate(359deg);
  }
}

.back {
  animation: back 4s infinite linear;
}

@keyframes back {
  from {
    margin-left: 95%;
    transform: rotate(359deg);
  }
  to {
  margin-right: 95%;
    transform: rotate(0deg);
  }
}

.whee {
  animation: whee 4s infinite linear;
}

@keyframes whee {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.eehw {
  animation: eehw 4s infinite linear;
}

@keyframes eehw {
  from {
    transform: rotate(359deg) scaleX(-1);
  }
  to {
    transform: rotate(0deg) scaleX(-1);
  }
}

span.shrimp {
  text-align: center;
  font-family: "Monaco"
  font-size: xxx-large;
}

div.text {
    background: linear-gradient(-100deg, #0c1624, #1c1e28, #6d4838, #f88f56, #f88f56);
    background-size: 300%;
    font-weight: 900;
    font-size: xxx-large;

    text-transform: uppercase;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animated_text 5s ease-in-out infinite;
    -moz-animation: animated_text 5s ease-in-out infinite;
    -webkit-animation: animated_text 5s ease-in-out infinite;
}

@keyframes animated_text {
    0% { background-position: 0px 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0px 50%; }
}