* {
  box-sizing: border-box;
}

body {
  background-color: #000000;
  color: #ffffff;
  margin: 50px;
  font-size: 30px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  height: calc(100vh - 100px);
  /*background-image: url("baby.gif");*/
}

.align-vert {
  float: left;
  line-height: 3em;
}

a {
  color: inherit;
  text-decoration: none;
}

.fullwidth {
  width: 100%;
}

.center {
  width: intrinsic;
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
  margin: auto;
}

.shaky {
  animation: suddenshakyanim 5s linear 0s infinite normal;
}

.shaky:hover {
  animation: shakyanim 0.25s linear 0s infinite alternate-reverse;
}

.smolshake {
  animation: smolshakeanim 0.25s linear 0s infinite alternate-reverse;
}

.anaglyph-effect {
  width: 100%;
  display: inline;
  position: relative;
  font-family: "Times New Roman", serif;
  letter-spacing: 10px;
  color: rgba(150, 0, 255, 0.5);
}

.anaglyph-effect:after {
  width: 100%;
  content: attr(data-content);
  position: absolute;
  left: 3px;
  top: 3px;
  color: rgba(255, 0, 100, 0.2);
  animation: anaglyphanim 9.4s linear 4.7s infinite normal;
}

.anaglyph-effect::before {
  width: 100%;
  content: attr(data-content);
  position: absolute;
  left: -3px;
  top: -3px;
  color: rgba(100, 255, 0, 0.2);
  animation: anaglyphanim 9.4s linear -4.7s infinite normal;
}

.rainbow {
  background: linear-gradient(to right, red, orange , yellow, green, cyan, blue, violet, red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowanim 3s linear 0s infinite normal;
}

.buddy {
  position: fixed;
  right: 20px;
  bottom: 20px;
  margin: 0px;
  height: 100px;
}

@supports (background-clip: text) {
    .wavy {
      position: relative;
    }
}

@supports not (background-clip: text) {
  .wavy {
    position: relative;
  }
  .rainbow .wavy {
    position: static;
  }
}

.wavy:nth-child(10n) {
  top: 5px;
  animation: wavyanim 2s linear -1.8s infinite normal;
}
.wavy:nth-child(10n+1) {
  top: 3px;
  animation: wavyanim 2s linear -1.6s infinite normal;
}
.wavy:nth-child(10n+2) {
  top: 1px;
  animation: wavyanim 2s linear -1.4s infinite normal;
}
.wavy:nth-child(10n+3) {
  top: -1px;
  animation: wavyanim 2s linear -1.2s infinite normal;
}
.wavy:nth-child(10n+4) {
  top: -3px;
  animation: wavyanim 2s linear -1s infinite normal;
}
.wavy:nth-child(10n+5) {
  top: -5px;
  animation: wavyanim 2s linear -0.8s infinite normal;
}
.wavy:nth-child(10n+6) {
  top: -3px;
  animation: wavyanim 2s linear -0.6s infinite normal;
}
.wavy:nth-child(10n+7) {
  top: -1px;
  animation: wavyanim 2s linear -0.4s infinite normal;
}
.wavy:nth-child(10n+8) {
  top: 1px;
  animation: wavyanim 2s linear -0.2s infinite normal;
}
.wavy:nth-child(10n+9) {
  top: 3px;
  animation: wavyanim 2s linear 0s infinite normal;
}

.whip {
  animation: whipanim 2s linear 0s infinite normal;
}

@keyframes wavyanim {
  0%   {top: 0px;}
  15%  {top: 2px;}
  25%  {top: 3px;}
  35%  {top: 2px;}
  65%  {top: -2px;}
  75%  {top: -3px;}
  85%  {top: -2px;}
  100% {top: 0px;}
}

@keyframes anaglyphanim {
  0%    {left: -3px; top: -3px;}
  24.5% {left: -3px; top: -3px;}
  25.5% {left:3px; top: 3px;}
  74.5% {left:3px; top: 3px;}
  75.5% {left: -3px; top: -3px;}
  100%  {left: -3px; top: -3px;}
}

@keyframes rainbowanim {
  0%   {background-position: 0px 0px}
  100% {background-position: 240px 0px}
}

@keyframes whipanim {
  0%   {transform: translate(0px, 0px);}
  50%  {transform: translate(50px, 0px);}
  100% {transform: translate(0px, 0px);}
}

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

@keyframes suddenshakyanim {
  0%   {transform: translate(1px, 1px) rotate(0deg);}
  0.5% {transform: translate(-1px, -4px) rotate(-1deg);}
  1%   {transform: translate(-6px, 0px) rotate(1deg);}
  1.5% {transform: translate(6px, 4px) rotate(0deg);}
  2%   {transform: translate(1px, -1px) rotate(1deg);}
  2.5% {transform: translate(-1px, 4px) rotate(-1deg);}
  3%   {transform: translate(-6px, 1px) rotate(0deg);}
  3.5% {transform: translate(6px, 1px) rotate(-1deg);}
  4%   {transform: translate(-1px, -1px) rotate(1deg);}
  4.5% {transform: translate(1px, 4px) rotate(0deg);}
  5%   {transform: translate(1px, -4px) rotate(-1deg);}
  5.5% {transform: translate(1px, 1px) rotate(0deg);}
  100% {transform: translate(1px, 1px) rotate(0deg);}
}

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