/* bg animation */
@keyframes bgAnimation {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;
  background-image: url("https://pbs.twimg.com/media/FQuFtQhVIAUamme.jpg")}
}

/* bg color styling */
body {
  background-color: red;
  animation-name: bgAnimation;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
/* h1 animation */
@keyframes h1Animation {
    0%   {left:0px; top:0px; rotate:0deg;}
  25%  {left:200px; top:0px; rotate:90deg;}
  50%  {left:200px; top:200px; rotate:180deg;}
  75%  {left:0px; top:200px ;rotate:270deg;}
  100% {left:0px; top:0px; rotate:360deg;}
}
/* h1 styling */
h1 {
  width: 200px;
  height: 100px;
  position: relative;
  animation-name: h1Animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  font-family: cursive;
  font-size: 48px;
}
/* h2 animation */
@keyframes h2Animation {
    0%   {left:15px; top:0px;}
  25%  {left:100px; top:13px;}
  50%  {left:650px; top:-200px;}
  75%  {left:200px; top:272px;}
  100% {left:15px; top:0px;}
}
/* h2 styling */
h2 {
  width: 200px;
  height: 100px;
  position: relative;
  animation-name: h2Animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  rotate: 4deg;
  font-family: cursive;
}
/* h3 animation */
@keyframes h3Animation {
    0%   {left:-20px; top:40px;}
  25%  {left:400px; top:264px;}
  50%  {left:2px; top:184px;}
  75%  {left:217px; top:0px;}
  100% {left:-20px; top:40px;}
}
/* h3 styling */
h3 {
  width: 400px;
  height: 100px;
  position: relative;
  animation-name: h3Animation;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  font-family: cursive;
}
/* summary animation */
@keyframes sumAnimation {
    0%   {left:300px; top:400px;}
  25%  {left:200px; top:212px;}
  50%  {left:22px; top:164px;}
  75%  {left:217px; top:13px;}
  100% {left:300px; top:400px;}
}
/* summary styling */
.summary {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: sumAnimation;
  animation-duration: 4.5s;
  animation-iteration-count: infinite;
}
/* link animation */
@keyframes aAnimation {
    0%   {left:300px; top:400px;}
  25%  {left:200px; top:212px;}
  50%  {left:22px; top:164px;}
  75%  {left:217px; top:13px;}
  100% {left:300px; top:400px;}
}
/* link styling */
a {
  position: relative;
  animation-name: aAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  font-size: 50px;
}
/* list animation */
@keyframes ulAnimation {
    0%   {left:600px; top:100px;}
  25%  {left:24px; top:0px;}
  50%  {left:287px; top:500px;}
  75%  {left:0px; top:13px;}
  100% {left:600px; top:100px;}
}
/* list styling */
ul {
  position: relative;
  animation-name: ulAnimation;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  font-size: 10px;
}
/* preamble animation */
@keyframes preAnimation {
    0%   {left:100px; top:-200px;}
  25%  {left:100px; top:14px;}
  50%  {left:276px; top:2px;}
  75%  {left:217px; top:55px; rotate:180deg;}
  100% {left:100px; top:-200px;}
}
/* preamble styling */
.preamble {
  width: 500px;
  height: 100px;
  position: relative;
  animation-name: preAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
/* explanation animation */
@keyframes expAnimation {
    0%   {left:220px; top:-1px;}
  25%  {left:140px; top:14px;}
  50%  {left:170px; top:2px;}
  75%  {left:200px; top:55px; }
  100% {left:220px; top:-1px; rotate:1800deg;}
}
/* explanation styling */
.explanation {
  width: 300px;
  height: 200px;
  position: relative;
  animation-name: expAnimation;
  animation-duration: 13s;
  animation-iteration-count: infinite;
}
/* participation animation */
@keyframes parAnimation {
    0%   {left:600px; top:0px;}
  25%  {left:0px; top:600px;}
  50%  {left:600px; top:0px;}
  75%  {left:0px; top:600px; }
  100% {left:600px; top:0px; rotate:360deg;}
}
/* participation styling */
.participation {
  width: 10px;
  height: 200px;
  position: relative;
  animation-name: parAnimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
/* benefits animation */
@keyframes benAnimation {
    0%   {left:100px; top:100px;}
  25%  {left:100px; top:400px;}
  50%  {left:200px; top:0px;}
  75%  {left:0px; top:6000px; }
  100% {left:100px; top:100px; }
}
/* benefits styling */
.benefits {
  width: 300px;
  height: 200px;
  position: relative;
  animation-name: benAnimation;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
/* requirements animation */
@keyframes reqAnimation {
    0%   {left:200px; top:100px;}
  25%  {left:100px; top:600px;}
  50%  {left:500px; top:50px;}
  75%  {left:50px; top:300px; }
  100% {left:200px; top:100px; }
}
/* requirements styling */
.requirements {
  width: 400px;
  height: 200px;
  position: relative;
  animation-name: reqAnimation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
/* p styling */
p {font-family: cursive;
  font-size: 14px;
}