html {
  background: -webkit-gradient(linear, left top, left bottom, from(#7d7d7d), to(#0d0d0d));
  background: linear-gradient(to bottom, #7d7d7d 0%, #0d0d0d 100%);
  height: 100%;
}

body {
  font: normal 100% Arial;
  text-align: center;
}

h2 {
  color: #888;
  font-size: 4vw;
  line-height: .7;
  text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.2), -2px -2px 2px rgba(255, 255, 255, 0.2);
}
h2 span {
  font-size: 50%;
}

a {
  color: #aaa;
}

.stage {
  display: inline-block;
  background-color: #7e64a0;
  border: 1px solid #aaa;
  padding: 10vh 0;
  width: 500px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}

.chicken {
  position: relative;
  display: inline-block;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  height: 220px;
  width: 200px;
  padding: 20px;
  cursor: pointer;
}
.chicken .hair .strand {
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  border-color: transparent;
  border-left-color: #62042e;
  border-left-width: 10px;
  border-left-style: solid;
  border-bottom-width: 10px;
  border-bottom-style: solid;
}
.chicken .hair .strand:after {
  position: absolute;
  content: "";
  z-index: 1;
  width: 56px;
  height: 64px;
  left: -7px;
  top: 1px;
  border-radius: 50%;
  border: inherit;
  border-left-color: #fa7f14;
  border-left-width: 6px;
  border-bottom-width: 6px;
}
.chicken .hair .strand:nth-of-type(1) {
  top: -35px;
  left: 95px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.chicken .hair .strand:nth-of-type(2) {
  top: -25px;
  left: 95px;
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
}
.chicken .hair .strand:nth-of-type(3) {
  top: -15px;
  left: 95px;
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
}
.chicken .hair .strand:nth-of-type(4) {
  top: -0px;
  left: 80px;
  -webkit-transform: rotate(110deg);
          transform: rotate(110deg);
}
.chicken .head-top {
  position: absolute;
  width: 200px;
  height: 210px;
  top: 0;
  border-radius: 50%;
  background-color: #fcdf4a;
  background-image: radial-gradient(ellipse at center, #fcdf4a 0%, #fa7f14 100%);
}
.chicken .head-top:before, .chicken .head-top:after {
  position: absolute;
  content: "";
}
.chicken .head-top:first-child {
  padding: 3px;
  top: -3px;
  left: 17px;
  background: #62042e !important;
}
.chicken .head-top:first-child .head-bottom {
  top: 84px;
  padding: 3px;
  background: #62042e;
  box-shadow: none;
}
.chicken .head-top:first-child .head-bottom:before, .chicken .head-top:first-child .head-bottom:after {
  content: none;
}
.chicken .head-top .eyes {
  position: absolute;
  width: 120px;
  top: 70px;
  left: 40px;
  z-index: 1;
}
.chicken .head-top .eyes:before, .chicken .head-top .eyes:after {
  /* Eyebrows */
  position: absolute;
  content: "";
  z-index: 1;
  border-radius: 50%;
  border-top-style: solid;
  border-top-width: 4px;
  border-top-color: #62042e;
  width: 50px;
  height: 30px;
  top: -20px;
  -webkit-animation: eyebrow 5s linear infinite;
          animation: eyebrow 5s linear infinite;
}
.chicken .head-top .eyes:before {
  left: -4px;
}
.chicken .head-top .eyes:after {
  right: -4px;
}
.chicken .head-top .eyes .eye {
  position: absolute;
  width: 40px;
  height: 60px;
  border-radius: 50%;
  background-color: #E5F6FE;
  border: 3px solid #62042e;
  box-shadow: 0 -5px 20px rgba(184, 40, 0, 0.6);
  overflow: hidden;
}
.chicken .head-top .eyes .eye:before, .chicken .head-top .eyes .eye:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 36px;
  left: 5px;
  top: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3px solid rgba(0, 0, 0, 0.3);
  background-color: #181818;
  background: radial-gradient(ellipse at center, black 0%, black 30%, #53b253 35%, #008a00 65%, #005700 85%, #002400 100%);
  -webkit-animation: eye 5s linear infinite;
          animation: eye 5s linear infinite;
}
.chicken .head-top .eyes .eye:first-child {
  /* Left */
  left: 0;
}
.chicken .head-top .eyes .eye:last-child {
  /* Right */
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  right: 0;
}
.chicken .head-top .eyes .lash {
  display: none;
  position: absolute;
  width: 10px;
  height: 15px;
  border-radius: 50%;
  top: -2px;
  left: -3px;
  z-index: 1;
  border-left-width: 3px;
  border-left-color: #62042e;
  border-left-style: solid;
  -webkit-transform: rotate(-50deg);
          transform: rotate(-50deg);
}
.chicken .head-top .eyes .lash:before, .chicken .head-top .eyes .lash:after {
  position: absolute;
  content: "";
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: 50%;
}
.chicken .head-top .eyes .lash:before {
  left: -8px;
}
.chicken .head-top .eyes .lash:after {
  right: -5px;
}
.chicken .head-top .eyes .lash:nth-of-type(2) {
  right: -3px;
  left: auto;
  -webkit-transform: rotateY(180deg) rotate(-50deg);
          transform: rotateY(180deg) rotate(-50deg);
}
.chicken .head-top .eyes .lash > .lash {
  width: 8px;
  height: 11px;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  top: 5px;
  left: 12px;
}
.chicken .head-bottom {
  position: absolute;
  width: 230px;
  height: 150px;
  top: 40%;
  left: -15px;
  border-radius: 50%;
  background-color: #fcdf4a;
  background-image: radial-gradient(ellipse at top, #fcdf4a 0%, #fa7f14 100%);
  box-shadow: inset 0 -8px 8px -4px #fcdf4a;
}
.chicken .head-bottom:before, .chicken .head-bottom:after {
  /* Cheek highlights */
  position: absolute;
  content: "";
  z-index: 1;
  width: 90px;
  height: 70px;
  bottom: 30px;
  background: radial-gradient(ellipse at center, #fcdf4a 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse at center, #fcdf4a 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 100%);
}
.chicken .head-bottom:before {
  left: 10px;
}
.chicken .head-bottom:after {
  right: 10px;
}
.chicken .head-bottom .beak {
  position: absolute;
  box-sizing: border-box;
  width: 60px;
  height: 40px;
  left: 85px;
  top: 60px;
  border-radius: 50%;
  border: 3px solid #62042e;
  box-shadow: 0 -5px 20px rgba(184, 40, 0, 0.6);
  background: radial-gradient(ellipse at top, #fcdf4a 0%, #b23001 40%, #86131b 100%);
}
.chicken .head-bottom .beak:before, .chicken .head-bottom .beak:after {
  position: absolute;
  content: "";
  z-index: 2;
  top: 15px;
  width: 48px;
  height: 15px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-style: solid;
  border-top-width: 3px;
  border-top-color: #62042e;
}
.chicken .head-bottom .beak:before {
  /* Left */
  left: -21px;
  -webkit-transform: rotate(18deg);
          transform: rotate(18deg);
}
.chicken .head-bottom .beak:after {
  /* Right */
  right: -21px;
  -webkit-transform: rotate(-18deg);
          transform: rotate(-18deg);
}
.chicken .head-bottom .chin {
  /* Chin highlights */
  position: absolute;
  width: 90px;
  height: 50px;
  bottom: 0px;
  left: 70px;
  background: radial-gradient(ellipse at center, #fcdf4a 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
}

.chicken.female .hair:after {
  position: absolute;
  content: "\0255";
  color: #62042e;
  font-size: 40px;
  left: 96px;
  top: -40px;
}
.chicken.female .hair .strand {
  display: none;
}
.chicken.female .head-top {
  background-color: #fad0a8;
  background-image: radial-gradient(ellipse at center, #fad0a8 0%, #fc8391 100%);
}
.chicken.female .head-top .eyes:before, .chicken.female .head-top .eyes:after {
  /* Eyebrows */
  display: none;
}
.chicken.female .head-top .eyes .eye {
  border-radius: 50% / 50% 50% 25% 25%;
  box-shadow: 0 -5px 20px rgba(213, 63, 148, 0.96);
}
.chicken.female .head-top .eyes .eye:before, .chicken.female .head-top .eyes .eye:after {
  top: 24px;
  background: radial-gradient(ellipse at center, black 0%, black 30%, #5375b2 35%, #002e8a 65%, #001d57 85%, #000c24 100%);
  -webkit-animation: eye-female 5s linear infinite;
          animation: eye-female 5s linear infinite;
}
.chicken.female .head-top .eyes .eye:last-child {
  /* Right */
  -webkit-transform: none;
          transform: none;
}
.chicken.female .head-top .eyes .lash {
  display: block;
}
.chicken.female .head-bottom {
  background-color: #fad0a8;
  background-image: radial-gradient(ellipse at top, #fad0a8 0%, #fc8391 100%);
  box-shadow: inset 0 -8px 8px -4px #fad0a8;
}
.chicken.female .head-bottom:before, .chicken.female .head-bottom:after {
  /* Cheek highlights */
  background: radial-gradient(ellipse at center, #fad0a8 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse at center, #fad0a8 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 100%);
}
.chicken.female .head-bottom .beak {
  box-shadow: 0 -5px 20px rgba(213, 63, 148, 0.96);
}
.chicken.female .head-bottom .chin {
  /* Chin highlights */
  background: radial-gradient(ellipse at center, #fad0a8 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
}

@-webkit-keyframes eyebrow {
  0%,70%,80%,90%,100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75%, 85%, 95% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

@keyframes eyebrow {
  0%,70%,80%,90%,100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75%, 85%, 95% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}
@-webkit-keyframes eye {
  0%, 65%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  70% ,95% {
    -webkit-transform: translate(5px, 4px);
            transform: translate(5px, 4px);
  }
}
@keyframes eye {
  0%, 65%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  70% ,95% {
    -webkit-transform: translate(5px, 4px);
            transform: translate(5px, 4px);
  }
}
@-webkit-keyframes eye-female {
  0%, 70%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  72% ,95% {
    -webkit-transform: translate(-6px, 0);
            transform: translate(-6px, 0);
  }
}
@keyframes eye-female {
  0%, 70%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  72% ,95% {
    -webkit-transform: translate(-6px, 0);
            transform: translate(-6px, 0);
  }
}