<div class="content playing">
  <h1>Playful Oranges</h1>
  <div class="oranges">
    <img src="https://i.imgur.com/7MOaQfi.png" />
    <img src="https://i.imgur.com/7MOaQfi.png" />
    <img src="https://i.imgur.com/7MOaQfi.png" />
    <img src="https://i.imgur.com/7MOaQfi.png" />    
  </div>
</div>

@import "compass/css3";

@mixin rainbow($position: top) {
  	@include background( linear-gradient($position, red 5%
			, orange 20%
			, yellow 35%
			, green 50%
			, blue 70%
			, purple 100%));
}

html {
  height: 100%;
}
body {
  //@include background(linear-gradient(bottom, white 50%, orange));
    @include rainbow(top left);  
  height: 100%;
}
h1 {
    margin: 10px 0;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 3px rgba(black, 0.65);
  color: orange;
}
.content {
  margin: 20px auto;
  width: 90%;
  text-align: center;
  padding: 0px;
  //border-radius: 10%;
  border: 30px solid rgba(white, .75);
  @include background(linear-gradient( top left, #BADA55, white 30%));
}
@keyframes spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sway{
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateX(50px) rotate(15deg);
  }
  100% {
    transform: translateY(10px);
  }
}
@keyframes shake{
  0% {
    transform: translateY(0px);
  }
  33% {
    transform: translateX(10px) rotate(5deg);
  }
  66% {
    transform: translateX(10px) rotate(-5deg);
  }
  100% {
    transform: translateY(-5px);
  }
}

.oranges img {
  display: inline-block;
}
.playing img:first-of-type{
  animation: spin 5s infinite cubic-bezier(.87,.12,.21,.95);
}
.playing img:nth-of-type(2){
   animation: sway 1s infinite alternate ease-in-out;
  }
.playing img:nth-of-type(3){
   animation: shake steps(2) 500ms infinite both;
  }
.playing img:last-of-type{
  animation: spin 1s steps(8) infinite forwards .5s;
}

$(document).ready(function() {
  $(".oranges img").click(function() {
    $("body").toggleClass("playing");
  });
  
});