
.wrapper1 {
  animation-name: borderrgb;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.moonstar {
  animation-name: moonstarcolour;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.shrek {
  animation-name: shrekcolour;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.uno {
  animation-name: unocolour;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}


.squidward {
  animation-name: squidwardcolour;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.mushroomman {
  animation-name: mushroommancolour;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.areyouokay {
  animation-name: areyouokaycolour;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

.meme {
  animation-name: memecolour;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.goat {
  animation-name: goatcolour;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.e1 {
  animation-name: bordercmy;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

.e2 {
  animation-name: borderrgb;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

.e3 {
  animation-name: bordercmy;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-delay: 0.3s;
}

.e4 {
  animation-name: bordercmy;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-delay: 0.6s;
}

.e5 {
  animation-name: bordercmy;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

.loremipsum {
  animation: loremipsumfont 4s, memecolour 1s;
  animation-iteration-count: infinite;
}

/* ---------------------------------- */

@keyframes loremipsumfont {
  0% {font-family: arial;}
  15% {font-family: 'Brush Script MT';}
  30% {font-family: verdana;}
  45% {font-family: tahoma;}
  60% {font-family: 'Trebuchet MS';}
  75% {font-family: 'Times New Roman';}
  90% {font-family: 'Courier New';}
}

@keyframes moonstarcolour {
  0% {color: #0f0;}
  50% {color: #f0f;}
  100% {color: #0f0;}
}

@keyframes shrekcolour {
  0% {color: #0f0;}
  50% {color: #00f;}
  100% {color: #0f0;}
}

@keyframes unocolour {
  0% {color: #f00;}
  50% {color: #ff0;}
  100% {color: #f00;}
}

@keyframes squidwardcolour {
  0% {color: #0ff;}
  50% {color: #00f;}
  100% {color: #0ff;}
}

@keyframes mushroommancolour {
  0% {color: #f0f;}
  50% {color: #f00;}
  100% {color: #f0f;}
}

@keyframes areyouokaycolour {
  0% {color: #ff0;}
  50% {color: #0ff;}
  100% {color: #ff0;}
}

@keyframes memecolour {
  0% {color: #f00;}
  16% {color: #ff0;}
  34% {color: #0f0;}
  50% {color: #0ff;}
  66% {color: #00f;}
  84% {color: #f0f;}
  100% {color: #f00;}
}

@keyframes goatcolour {
  0% {color: #0f0;}
  33% {color: #00f;}
  66% {color: #f00;}
  100% {color: #0f0;}
}

@keyframes bordercmy {
  0% {border-color: #ff0;}
  32% {border-color: #ff0;}
  33% {border-color: #f0f;}
  65% {border-color: #f0f;}
  66% {border-color: #0ff;}
  100% {border-color: #0ff;}
}

@keyframes borderrgb {
  0% {border-color: #f00;}
  32% {border-color: #f00;}
  33% {border-color: #0f0;}
  65% {border-color: #0f0;}
  66% {border-color: #00f;}
  100% {border-color: #00f;}
}