$thing-width:25%;
$thing-height:25%;
$skin-color:#e3b88c;
$eye-color:#86bf86;
$crown-color:#fde353;
$clothing-color:#567c15;
$window-bg:#83cbc2;
$stripe-light:#b0302d;
$stripe-dark:#8d2623;
$day-text-light:#a5be3e;
$day-text-dark:#567c15;
$day-text:"10";
@mixin pseudo($size) {
  content:"";
  display:block;
  height:$size;
  width:$size;
}
@mixin animation($ani-name,$ani-time,$ani-delay) {
  /* @for $i from 1 through 10 {
    animation:$ani-name linear $ani-time+$i infinite $ani-delay+$i alternate;
  } */
  animation:$ani-name linear $ani-time infinite $ani-delay alternate;
}
@mixin alts($alt-number,$alt-clothing-color,$alt-skin-color) {
  /* .legs:before,.legs:after */
  .human.alt#{$alt-number} .legs:before,.human.alt#{$alt-number} .legs:after,.human.alt#{$alt-number} .arms:before,.human.alt#{$alt-number} .arms:after,.human.alt#{$alt-number} .body {
    background:$alt-clothing-color;
  }
  .human.alt#{$alt-number} .head {
    background:$alt-skin-color;
  }
  .human.alt#{$alt-number} .arms:after {
    box-shadow:.4rem 0 0 -.1rem $alt-skin-color;
  }
  .human.alt#{$alt-number} .arms:before {
    box-shadow:-.4rem 0 0 -.1rem $alt-skin-color;
  }
}

* {
  box-sizing:border-box;
  position:relative;
}
body {
  background:#333;
  background-image:repeating-linear-gradient(90deg,rgba($stripe-dark,.8),rgba($stripe-dark,.8) 5vmin,rgba($stripe-light,.8) 5vmin,rgba($stripe-light,.8) 10vmin);
  font-size:10px;
  perspective: 1000; /* Thanks to @davidmogar, this makes the shutters actually look like opening shutters. No complex 3d transforms needed! Everyone loves that. =D */
}
h1 {
  color:#fff;
  font-family:"Playfair Display";
  font-size:2rem;
  font-style:italic;
  margin:1.25rem auto;
  text-align:center;
  text-shadow:0 0 .5rem #000;
}
p {
  color:#fff;
  font-size:1rem;
  text-align:center;
  text-shadow:0 0 .5rem #000;
}
span {
  display:block;
}
/* Window
--------------------*/
.window {
  background:$window-bg;
  border:2em solid #362f1f;
  height:25rem;
  margin:1rem auto 0;
  width:25rem;
}
.shutters {
  background:#532900;
  border:1px solid #281400;
  float:left;
  height:100%;
  overflow:hidden;
  transition:transform 800ms;
  width:50%;
  z-index:15;
}
.window:hover .shutters, .window:focus .shutters { /* Work on hover or touch. Cancel when input device is outside the window. */
  transform:rotateY(170deg); /* "Opens" the shutters. */
}
.window:hover .shutters:first-child, .window:focus .shutters:first-child {
  transform:rotateY(-170deg);
}
.shutters:nth-child(1) {
  transform-origin:0%; /* Set the "hinge" on the left-hand side. This is necessary because the default origin is 0,0 or center. */
}
.shutters:nth-child(2) {
  transform-origin:100%; /* Set the "hinge" on the right-hand side. */
}
/* day text
--------------------*/
.shutters:after {
  content:$day-text;
  color:#fff;
  font-family:"Playfair Display";
  font-size:18rem;
  top:-1rem;
  position:absolute;
}
.shutters:nth-child(1):after {
  color:$day-text-light;
  left:20%;
}
.shutters:nth-child(2):after {
  color:$day-text-dark;
  right:15%;
}
.window:hover .shutters:after, .window:focus .shutters:after {
  visibility:hidden;
  transition:visibility 220ms;
}
.window .shutters:after, .window .shutters:after {
  visibility:visible;
  transition:visibility 400ms 220ms;
}
/* human
--------------------*/
.human {
  animation:bounce linear 4s infinite backwards;
  height:$thing-height;
  position:absolute;
  width:$thing-width;
}
/* crown
--------------------*/
.crown {
  left:.05rem;
  position:absolute;
  top:-.5rem;
}
.crown:before,.crown:after {
  @include pseudo(0);
  border-bottom:.25rem solid $crown-color; /* + border-top = crown height */
  border-left:.25rem solid $crown-color;
  border-top:.5rem solid transparent; /* + border-bottom = crown height */
  border-right:.25rem solid $crown-color;
  position:relative;
}
.crown:after {
  left:.5rem; /* border-left + border-right */
  top:-.75rem; /* border-top + border-bottom */
}
/* head
--------------------*/
.head {
  background:$skin-color;
  border-radius:50%;
  height:25%;
  margin:auto;
  top:.5rem;
  width:20%;
  z-index:6;
}
/* body
--------------------*/
.body {
  background:$clothing-color;
  border-radius:20%;
  height:40%;
  margin:auto;
  top:.25rem;
  width:25%;
  z-index:5;
}
/* arms
--------------------*/
.arms:before,.arms:after {
  @include pseudo(30%);
  background:$clothing-color;
  border-radius:.5rem;
  height:.5rem;
  position:absolute;
  top:.25rem;
}
.arms:before {
  @include animation(wavel,1s,0s);
  box-shadow:-.4rem 0 0 -.1rem $skin-color;
  left:12%; /* horizontal position at 90 degrees */
  transform-origin:100% 50%; /* transform-origin at 90 degrees */
}
.arms:after {
  @include animation(waver,1s,0s);
  box-shadow:.4rem 0 0 -.1rem $skin-color;
  right:12%; /* horizontal position at -90 degrees */
  transform-origin:0% 40%; /* transform-origin at -90 degrees */
}
/* legs
--------------------*/
.legs {
  height:2rem;
  margin:auto;
  width:1.2rem;
}
.legs:before,.legs:after {
  @include pseudo(.5rem);
  background:$clothing-color;
  border-radius:.5rem;
  height:2rem;
  position:absolute;
  transform-origin:50% 0; /* transform-origin at 90 degrees */
}
.legs:before {
  @include animation(legl,1s,0s);
  left:40%; /* horizontal position at 90 degrees */
  left:0;
}
.legs:after {
  @include animation(legr,1s,0s);
  right:40%; /* horizontal position at 90 degrees */
  right:0;
}
/* animation
--------------------*/
@keyframes waver {
  0% {
    transform:rotate(-45deg);
  }
  100% {
    transform:rotate(70deg);
  }
}
@keyframes wavel {
  0% {
    transform:rotate(45deg);
  }
  100% {
    transform:rotate(-70deg);
  }
}
@keyframes legr {
  0% {
    transform:rotate(-90deg);
  }
  100% {
    transform:rotate(0deg);
  }
}
@keyframes legl {
  0% {
    transform:rotate(90deg);
  }
  100% {
    transform:rotate(0deg);
  }
}
/* iteration
--------------------*/
.human:nth-of-type(1n+1) {
  bottom:.5rem;
}
.human:nth-of-type(6n+2) {
  left:$thing-width;
}
.human:nth-of-type(6n+3) {
  left:$thing-width*2;
}
.human:nth-of-type(4) {
  left:$thing-width*3;
}
.human:nth-of-type(1n+5) {
  bottom:$thing-height+1;
}
.human:nth-of-type(5) {
  left:$thing-width*.5;
}
.human:nth-of-type(4n+6) {
  left:$thing-width*1.5;
}
.human:nth-of-type(7) {
  left:$thing-width*2.5;
}
.human:nth-of-type(1n+8) {
  bottom:$thing-height*2;
}
.human:last-of-type {
  bottom:$thing-height*3;
}
@include alts(2,#6c4f33,#ffdfdf); /* brown */
@include alts(3,#fff362,#b19178); /* yellow */
@include alts(4,#0c7ced,#b19178); /* blue */
@include alts(5,#ba0734,#e3b88c); /* red */
@include alts(1,#ff6d15,#ffdfdf); /* orange */