* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
   user-select: none;
  box-sizing: border-box; }

body, html {
  height: 100%; }

body {
  margin: 0;
  background: #4b4d53; }
  body:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 77px;
    height: 3px;
    background: #3a3c40;
    z-index: 5; }

svg {
  margin-left: -180px;
  width: 300px;
  height: 336px;
  position: absolute;
  z-index: 6;
  bottom: 60px;
  left: 50%; }
  svg:hover {
    cursor: pointer; }

.angry {
  -webkit-transition: fill 0.3s linear;
          transition: fill 0.3s linear; }

.hint {
  position: absolute;
  bottom: 15px;
  left: 65px;
  right: 0;
  font-family: Arial, Sans-serif;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff; }

canvas {
  position: absolute;
  top: 0;
  left: 0; }

.ihatemondays {
  margin-left: -310px;
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: 3; }

.thunder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 77px;
  background: #fff;
  z-index: 4;
  opacity: 0; }

.thunder--boomboom {
  -webkit-animation: 0.35s thunder linear 1;
          animation: 0.35s thunder linear 1; }

@-webkit-keyframes thunder {
  from {
    opacity: 0; }

  30% {
    opacity: 0.9; }

  50% {
    opacity: 0.9; }

  70% {
    opacity: 0.9; }

  to {
    opacity: 0; } }

@keyframes thunder {
  from {
    opacity: 0; }

  30% {
    opacity: 0.9; }

  50% {
    opacity: 0.9; }

  70% {
    opacity: 0.9; }

  to {
    opacity: 0; } }

#head-loaded {
  -webkit-animation: head 2s ease-in-out infinite;
          animation: head 2s ease-in-out infinite; }

@-webkit-keyframes head {
  from {
    -webkit-transform: translateY(59px) translateX(63px);
            transform: translateY(59px) translateX(63px); }

  50% {
    -webkit-transform: translateY(61px) translateX(63px);
            transform: translateY(61px) translateX(63px); }

  to {
    -webkit-transform: translateY(59px) translateX(63px);
            transform: translateY(59px) translateX(63px); } }

@keyframes head {
  from {
    -webkit-transform: translateY(59px) translateX(63px);
            transform: translateY(59px) translateX(63px); }

  50% {
    -webkit-transform: translateY(61px) translateX(63px);
            transform: translateY(61px) translateX(63px); }

  to {
    -webkit-transform: translateY(59px) translateX(63px);
            transform: translateY(59px) translateX(63px); } }

#face-loaded {
  -webkit-transition: 0.1s opacity linear;
          transition: 0.1s opacity linear;
  -webkit-animation: face 2s ease-in-out infinite;
          animation: face 2s ease-in-out infinite; }

@-webkit-keyframes face {
  from {
    -webkit-transform: translateY(70px) translateX(79px);
            transform: translateY(70px) translateX(79px); }

  50% {
    -webkit-transform: translateY(72px) translateX(79px);
            transform: translateY(72px) translateX(79px); }

  to {
    -webkit-transform: translateY(70px) translateX(79px);
            transform: translateY(70px) translateX(79px); } }

@keyframes face {
  from {
    -webkit-transform: translateY(70px) translateX(79px);
            transform: translateY(70px) translateX(79px); }

  50% {
    -webkit-transform: translateY(72px) translateX(79px);
            transform: translateY(72px) translateX(79px); }

  to {
    -webkit-transform: translateY(70px) translateX(79px);
            transform: translateY(70px) translateX(79px); } }

@-webkit-keyframes face2 {
  from {
    -webkit-transform: translateY(68px) translateX(80px);
            transform: translateY(68px) translateX(80px); }

  50% {
    -webkit-transform: translateY(70px) translateX(80px);
            transform: translateY(70px) translateX(80px); }

  to {
    -webkit-transform: translateY(68px) translateX(80px);
            transform: translateY(68px) translateX(80px); } }

@keyframes face2 {
  from {
    -webkit-transform: translateY(68px) translateX(80px);
            transform: translateY(68px) translateX(80px); }

  50% {
    -webkit-transform: translateY(70px) translateX(80px);
            transform: translateY(70px) translateX(80px); }

  to {
    -webkit-transform: translateY(68px) translateX(80px);
            transform: translateY(68px) translateX(80px); } }

#hair-loaded {
  -webkit-animation: hair 2s ease-in-out infinite;
          animation: hair 2s ease-in-out infinite; }

@-webkit-keyframes hair {
  from {
    -webkit-transform: translateY(39px) translateX(64px);
            transform: translateY(39px) translateX(64px); }

  50% {
    -webkit-transform: translateY(41px) translateX(64px);
            transform: translateY(41px) translateX(64px); }

  to {
    -webkit-transform: translateY(39px) translateX(64px);
            transform: translateY(39px) translateX(64px); } }

@keyframes hair {
  from {
    -webkit-transform: translateY(39px) translateX(64px);
            transform: translateY(39px) translateX(64px); }

  50% {
    -webkit-transform: translateY(41px) translateX(64px);
            transform: translateY(41px) translateX(64px); }

  to {
    -webkit-transform: translateY(39px) translateX(64px);
            transform: translateY(39px) translateX(64px); } }

#hair-lines-loaded {
  -webkit-animation: hairlines 2s ease-in-out infinite;
          animation: hairlines 2s ease-in-out infinite; }

@-webkit-keyframes hairlines {
  from {
    -webkit-transform: translateY(37px) translateX(61px);
            transform: translateY(37px) translateX(61px); }

  50% {
    -webkit-transform: translateY(39px) translateX(61px);
            transform: translateY(39px) translateX(61px); }

  to {
    -webkit-transform: translateY(37px) translateX(61px);
            transform: translateY(37px) translateX(61px); } }

@keyframes hairlines {
  from {
    -webkit-transform: translateY(37px) translateX(61px);
            transform: translateY(37px) translateX(61px); }

  50% {
    -webkit-transform: translateY(39px) translateX(61px);
            transform: translateY(39px) translateX(61px); }

  to {
    -webkit-transform: translateY(37px) translateX(61px);
            transform: translateY(37px) translateX(61px); } }

#body-loaded {
  -webkit-animation: body 2s ease-in-out infinite;
          animation: body 2s ease-in-out infinite; }

@-webkit-keyframes body {
  from {
    -webkit-transform: translateY(107px) translateX(71px);
            transform: translateY(107px) translateX(71px); }

  50% {
    -webkit-transform: translateY(106px) translateX(71px);
            transform: translateY(106px) translateX(71px); }

  to {
    -webkit-transform: translateY(107px) translateX(71px);
            transform: translateY(107px) translateX(71px); } }

@keyframes body {
  from {
    -webkit-transform: translateY(107px) translateX(71px);
            transform: translateY(107px) translateX(71px); }

  50% {
    -webkit-transform: translateY(106px) translateX(71px);
            transform: translateY(106px) translateX(71px); }

  to {
    -webkit-transform: translateY(107px) translateX(71px);
            transform: translateY(107px) translateX(71px); } }

#stripes-loaded {
  -webkit-animation: stripes 2s ease-in-out infinite;
          animation: stripes 2s ease-in-out infinite; }

@-webkit-keyframes stripes {
  from {
    -webkit-transform: translateY(112px) translateX(72px);
            transform: translateY(112px) translateX(72px); }

  50% {
    -webkit-transform: translateY(111px) translateX(72px);
            transform: translateY(111px) translateX(72px); }

  to {
    -webkit-transform: translateY(112px) translateX(72px);
            transform: translateY(112px) translateX(72px); } }

@keyframes stripes {
  from {
    -webkit-transform: translateY(112px) translateX(72px);
            transform: translateY(112px) translateX(72px); }

  50% {
    -webkit-transform: translateY(111px) translateX(72px);
            transform: translateY(111px) translateX(72px); }

  to {
    -webkit-transform: translateY(112px) translateX(72px);
            transform: translateY(112px) translateX(72px); } }

#left-hand-loaded {
  -webkit-animation: lefthand 2s ease-in-out infinite;
          animation: lefthand 2s ease-in-out infinite; }

@-webkit-keyframes lefthand {
  from {
    -webkit-transform: translateY(118px) translateX(118px);
            transform: translateY(118px) translateX(118px); }

  50% {
    -webkit-transform: translateY(117px) translateX(118px);
            transform: translateY(117px) translateX(118px); }

  to {
    -webkit-transform: translateY(118px) translateX(118px);
            transform: translateY(118px) translateX(118px); } }

@keyframes lefthand {
  from {
    -webkit-transform: translateY(118px) translateX(118px);
            transform: translateY(118px) translateX(118px); }

  50% {
    -webkit-transform: translateY(117px) translateX(118px);
            transform: translateY(117px) translateX(118px); }

  to {
    -webkit-transform: translateY(118px) translateX(118px);
            transform: translateY(118px) translateX(118px); } }

#right-hand-loaded {
  -webkit-animation: righthand 2s ease-in-out infinite;
          animation: righthand 2s ease-in-out infinite; }

@-webkit-keyframes righthand {
  from {
    -webkit-transform: translateY(98px) translateX(63px);
            transform: translateY(98px) translateX(63px); }

  50% {
    -webkit-transform: translateY(100px) translateX(65px);
            transform: translateY(100px) translateX(65px); }

  to {
    -webkit-transform: translateY(98px) translateX(63px);
            transform: translateY(98px) translateX(63px); } }

@keyframes righthand {
  from {
    -webkit-transform: translateY(98px) translateX(63px);
            transform: translateY(98px) translateX(63px); }

  50% {
    -webkit-transform: translateY(100px) translateX(65px);
            transform: translateY(100px) translateX(65px); }

  to {
    -webkit-transform: translateY(98px) translateX(63px);
            transform: translateY(98px) translateX(63px); } }

#umbrella-loaded {
  -webkit-animation: umbrella 2s ease-in-out infinite;
          animation: umbrella 2s ease-in-out infinite; }

@-webkit-keyframes umbrella {
  from {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0); }

  50% {
    -webkit-transform: translateY(2px) translateX(2px);
            transform: translateY(2px) translateX(2px); }

  to {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0); } }

@keyframes umbrella {
  from {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0); }

  50% {
    -webkit-transform: translateY(2px) translateX(2px);
            transform: translateY(2px) translateX(2px); }

  to {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0); } }