@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:300";
* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  background-color: #7ba7ca;
  font-size: 16px;
  line-height: 1;
}

.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: auto 0;
  flex: 1 0 auto;
}

.snor {
  position: relative;
  margin-top: 5rem;
  -webkit-perspective: 50rem;
          perspective: 50rem;
}
.snor-head-container {
  position: absolute;
  z-index: 2;
  top: -5.5rem;
  left: calc(50% - (11rem / 2));
  height: 7.75rem;
  width: 11rem;
  -webkit-transform-origin: center 10rem;
          transform-origin: center 10rem;
}
.snor-head {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-top-left-radius: 50% 55%;
  border-top-right-radius: 50% 55%;
  border-bottom-left-radius: 35% 45%;
  border-bottom-right-radius: 35% 45%;
  background-color: #315a7b;
  overflow: hidden;
}
.snor-head::before, .snor-head::after {
  content: '';
  position: absolute;
}
.snor-head::before {
  bottom: 0;
  left: 10%;
  height: 85%;
  width: 80%;
  border-top-left-radius: 45% 60%;
  border-top-right-radius: 45% 60%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  background-color: #f6e6bd;
}
.snor-head::after {
  position: absolute;
  bottom: calc(100% - 2.75rem);
  left: calc(50% - (3.5rem / 2));
  height: 3.5rem;
  width: 3.5rem;
  background-color: #315a7b;
  border-bottom-right-radius: 0.25rem;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
          transform: rotate(45deg) skew(-15deg, -15deg);
}
.snor-ears {
  will-change: transform;
}
.snor-ear {
  position: absolute;
  z-index: 1;
  background-color: #315a7b;
  bottom: calc(100% - 4.5em);
  height: 4em;
  width: 3.5em;
  border-top-left-radius: 60% 0.5em;
  border-top-right-radius: 60% 0.5em;
}
.snor-ear-left {
  left: 0;
  border-bottom-left-radius: 0.5em 60%;
  -webkit-transform: skewY(20deg);
          transform: skewY(20deg);
}
.snor-ear-right {
  right: 0;
  border-bottom-right-radius: 0.5em 60%;
  -webkit-transform: skewY(-20deg);
          transform: skewY(-20deg);
}
.snor-face {
  position: absolute;
  z-index: 3;
  top: 3.75rem;
  width: 100%;
}
.snor-eye {
  position: absolute;
  top: 0;
  height: 0.5rem;
  width: 2rem;
  border-top: solid 5px #444;
  border-radius: 50%;
}
.snor-eye-left {
  left: 2rem;
}
.snor-eye-right {
  right: 2rem;
}
.snor-blush {
  position: absolute;
  top: 0.5rem;
  height: 0.75rem;
  width: 1.5rem;
  border-radius: 50%;
  background-color: #e68b9c;
  opacity: 0.7;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.snor-blush-left {
  left: 1.5rem;
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
}
.snor-blush-right {
  right: 1.5rem;
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
}
.snor-mouth {
  position: absolute;
  left: calc(50% - (3rem / 2));
  top: 1rem;
  height: 0.25rem;
  width: 3rem;
  border-bottom: solid 3px #444;
  border-radius: 50%;
}
.snor-mouth::before, .snor-mouth::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.375rem 0.375rem 0.375rem;
  border-color: transparent transparent #fff transparent;
}
.snor-mouth::before {
  left: 0;
}
.snor-mouth::after {
  right: 0;
}
.snor-mouth-inner {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: -3px;
  height: 1rem;
  width: 100%;
  border-radius: 50%;
  background-color: #444;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.snor-body {
  position: relative;
  z-index: 5;
  height: 10.5rem;
  width: 16rem;
  border-top-left-radius: 50% 65%;
  border-top-right-radius: 50% 65%;
  border-bottom-left-radius: 50% 35%;
  border-bottom-right-radius: 50% 35%;
  background-color: #315a7b;
  overflow: hidden;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.snor-body::after {
  content: '';
  position: absolute;
  top: -1%;
  left: 10%;
  height: 70%;
  width: 80%;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  background-color: #f6e6bd;
}
.snor-arm-container {
  position: absolute;
  z-index: 1;
  top: -3rem;
  height: 5.5rem;
  width: 3.75rem;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.snor-arm {
  height: 100%;
  width: 100%;
  border-top-left-radius: 50% 65%;
  border-top-right-radius: 50% 65%;
  border-bottom-left-radius: 10% 30%;
  border-bottom-right-radius: 10% 30%;
  background-color: #2a4d69;
}
.snor-arm-claws {
  z-index: -1;
  top: -0.375rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.snor-arm-claws, .snor-arm-claws::before, .snor-arm-claws::after {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-color: transparent transparent #fff transparent;
}
.snor-arm-claws::before, .snor-arm-claws::after {
  content: '';
  top: 0.5rem;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.snor-arm-claws::before {
  right: calc(100% + 0.5rem);
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
}
.snor-arm-claws::after {
  left: calc(100% + 0.5rem);
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}
.snor-arm-left {
  left: 2.5rem;
}
.snor-arm-right {
  right: 2.5rem;
}
.snor-foot-container {
  position: absolute;
  z-index: 6;
  bottom: -0.25rem;
  height: 5rem;
  width: 5.5rem;
}
.snor-foot {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #f6e6bd;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.snor-foot::after {
  content: '';
  position: absolute;
  bottom: 0.75rem;
  left: 25%;
  height: 50%;
  width: 50%;
  border-radius: 50%;
  background-color: #a47352;
}
.snor-foot-toes {
  z-index: -1;
  top: -0.75rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.snor-foot-toes, .snor-foot-toes::before, .snor-foot-toes::after {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1rem 1rem 1rem;
  border-color: transparent transparent #fff transparent;
}
.snor-foot-toes::before, .snor-foot-toes::after {
  content: '';
  top: 0.75rem;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.snor-foot-toes::before {
  right: calc(100% + 1rem);
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
}
.snor-foot-toes::after {
  left: calc(100% + 1rem);
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}
.snor-foot-left {
  left: -1rem;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.snor-foot-right {
  right: -1rem;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.snor-bubble {
  position: absolute;
  bottom: calc(100% - 2rem);
  left: 2rem;
  height: 3rem;
  width: 3rem;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 10%;
  background-color: #e8f0f6;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  opacity: 0;
}

.poke-flute {
  position: fixed;
  z-index: 5;
  bottom: 2rem;
  right: 2rem;
  height: 4.5rem;
  width: 4.5rem;
  cursor: pointer;
  -webkit-transform: rotate(50deg);
          transform: rotate(50deg);
}
.poke-flute::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0.325rem 0 0 rgba(68, 68, 68, 0.3);
  background-color: #315a7b;
  transition: 0.3s ease-in-out;
}
.poke-flute:hover::before {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.poke-flute-stick {
  position: absolute;
  top: -0.5rem;
  left: calc(50% - 0.625rem);
  height: 6rem;
  width: 1.25rem;
  background-color: #f6e6bd;
  will-change: transform;
}
.poke-flute-stick::before {
  content: '';
  position: absolute;
  top: 0.25rem;
  left: 0;
  height: 0.25rem;
  width: 100%;
  background-color: #cd394a;
}
.poke-flute-ball {
  position: absolute;
  bottom: 0.5rem;
  left: calc(50% - 1.25rem);
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  background-color: #cd394a;
  overflow: hidden;
}
.poke-flute-ball::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background-color: #fff;
}
.poke-flute-holes {
  top: 1.5rem;
}
.poke-flute-holes::before, .poke-flute-holes::after, .poke-flute-holes {
  position: absolute;
  left: calc(50% - 0.25rem);
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  background-color: #444;
}
.poke-flute-holes::before, .poke-flute-holes::after {
  content: '';
}
.poke-flute-holes::before {
  top: -0.75rem;
}
.poke-flute-holes::after {
  top: 0.75rem;
}
.poke-flute-music-note {
  position: absolute;
  left: calc(50% - 0.625rem);
  top: calc(50% - 0.625rem);
  height: 1.25rem;
  width: 1.25rem;
  border: solid 3px currentColor;
  border-top-width: 6px;
  border-bottom: 0;
  color: #e68b9c;
  mix-blend-mode: overlay;
  opacity: 0;
}
.poke-flute-music-note::before, .poke-flute-music-note::after {
  content: '';
  position: absolute;
  bottom: -0.25em;
  height: 0.5em;
  width: 0.75em;
  border-radius: 50%;
  background-color: currentColor;
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
}
.poke-flute-music-note::before {
  right: 100%;
}
.poke-flute-music-note::after {
  right: -3px;
}
.poke-flute-control {
  position: absolute;
  opacity: 0;
}

.poke-flute-control + .poke-flute + .snor .snor-head-container {
  -webkit-transform: translateY(4rem) rotateX(40deg) scale(0.9);
          transform: translateY(4rem) rotateX(40deg) scale(0.9);
  transition: 0.45s 1.3s ease-in;
}
.poke-flute-control + .poke-flute + .snor .snor-mouth-inner {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.poke-flute-control + .poke-flute + .snor .snor-face {
  -webkit-transform: translateY(-1rem);
          transform: translateY(-1rem);
  transition: 0.45s 1.3s ease-in;
}
.poke-flute-control + .poke-flute + .snor .snor-ear {
  transition: 0.45s 1.4s ease-in;
}
.poke-flute-control + .poke-flute + .snor .snor-ear-left {
  -webkit-transform: translateY(40%) rotateX(40deg) skewY(20deg);
          transform: translateY(40%) rotateX(40deg) skewY(20deg);
}
.poke-flute-control + .poke-flute + .snor .snor-ear-right {
  -webkit-transform: translateY(40%) rotateX(40deg) skewY(-20deg);
          transform: translateY(40%) rotateX(40deg) skewY(-20deg);
}
.poke-flute-control + .poke-flute + .snor .snor-arm-container {
  transition: 0.5s 1s ease-in;
}
.poke-flute-control + .poke-flute + .snor .snor-arm-left {
  -webkit-transform: rotate(-130deg);
          transform: rotate(-130deg);
}
.poke-flute-control + .poke-flute + .snor .snor-arm-right {
  -webkit-transform: rotate(130deg);
          transform: rotate(130deg);
}
.poke-flute-control:checked + .poke-flute .poke-flute-stick {
  -webkit-animation: wiggle 1.2s infinite linear;
          animation: wiggle 1.2s infinite linear;
}
.poke-flute-control:checked + .poke-flute .poke-flute-music-note {
  -webkit-animation: moveMusic 2s infinite ease-in-out;
          animation: moveMusic 2s infinite ease-in-out;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-head-container {
  -webkit-transform: translateY(0) rotateX(0deg) scale(1);
          transform: translateY(0) rotateX(0deg) scale(1);
  transition: 0.9s ease-out;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-mouth-inner {
  -webkit-animation: openMouth 2.5s 0.9s 1;
          animation: openMouth 2.5s 0.9s 1;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-face {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition: 0.9s ease-out;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-ear {
  transition: 0.95s ease-out;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-ear-left {
  -webkit-transform: translateY(0) rotateX(0deg) skewY(20deg);
          transform: translateY(0) rotateX(0deg) skewY(20deg);
}
.poke-flute-control:checked + .poke-flute + .snor .snor-ear-right {
  -webkit-transform: translateY(0) rotateX(0deg) skewY(-20deg);
          transform: translateY(0) rotateX(0deg) skewY(-20deg);
}
.poke-flute-control:checked + .poke-flute + .snor .snor-arm-left {
  -webkit-transform: rotate(-63deg);
          transform: rotate(-63deg);
  transition: 0.7s 0.7s ease-out;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-arm-right {
  -webkit-transform: rotate(105deg);
          transform: rotate(105deg);
  transition: 0.7s 1s ease-out;
  -webkit-animation: rotateArmRight 3s 1s 1;
          animation: rotateArmRight 3s 1s 1;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-foot-left {
  -webkit-animation: rotateFootLeft 2.4s 1s infinite ease-in-out;
          animation: rotateFootLeft 2.4s 1s infinite ease-in-out;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-foot-right {
  -webkit-animation: rotateFootRight 2.4s 1s infinite ease-in-out;
          animation: rotateFootRight 2.4s 1s infinite ease-in-out;
}
.poke-flute-control:checked + .poke-flute + .snor .snor-body {
  -webkit-animation: breatheAwake 2.5s infinite;
          animation: breatheAwake 2.5s infinite;
}
.poke-flute-control:not(:checked) + .poke-flute + .snor .snor-body {
  -webkit-animation: breathe 3.5s 1.5s infinite;
          animation: breathe 3.5s 1.5s infinite;
}
.poke-flute-control:not(:checked) + .poke-flute + .snor .snor-bubble {
  -webkit-animation: bubbleGrow 3.5s 3.25s infinite;
          animation: bubbleGrow 3.5s 3.25s infinite;
}

@-webkit-keyframes rotateFootLeft {
  0%, 100% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  40%, 60% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}

@keyframes rotateFootLeft {
  0%, 100% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  40%, 60% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}
@-webkit-keyframes rotateFootRight {
  0%, 100% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  40%, 60% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
@keyframes rotateFootRight {
  0%, 100% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  40%, 60% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
@-webkit-keyframes rotateArmRight {
  0% {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
  50%, 70% {
    -webkit-transform: rotate(63deg);
            transform: rotate(63deg);
  }
  100% {
    -webkit-transform: rotate(105deg);
            transform: rotate(105deg);
  }
}
@keyframes rotateArmRight {
  0% {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
  50%, 70% {
    -webkit-transform: rotate(63deg);
            transform: rotate(63deg);
  }
  100% {
    -webkit-transform: rotate(105deg);
            transform: rotate(105deg);
  }
}
@-webkit-keyframes openMouth {
  0%, 100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  20%, 30% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  50%, 60% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  55% {
    -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
  }
}
@keyframes openMouth {
  0%, 100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  20%, 30% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  50%, 60% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  55% {
    -webkit-transform: scaleY(0.98);
            transform: scaleY(0.98);
  }
}
@-webkit-keyframes breathe {
  0%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  47%, 53% {
    -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
  }
}
@keyframes breathe {
  0%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  47%, 53% {
    -webkit-transform: scaleY(1.04);
            transform: scaleY(1.04);
  }
}
@-webkit-keyframes breatheAwake {
  0%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  47%, 53% {
    -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
  }
}
@keyframes breatheAwake {
  0%, 100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  47%, 53% {
    -webkit-transform: scaleY(1.02);
            transform: scaleY(1.02);
  }
}
@-webkit-keyframes bubbleGrow {
  0%, 100% {
    -webkit-transform: rotate(20deg) scale(0.3);
            transform: rotate(20deg) scale(0.3);
  }
  47%, 53% {
    -webkit-transform: rotate(20deg) scale(1);
            transform: rotate(20deg) scale(1);
    opacity: 0.3;
  }
}
@keyframes bubbleGrow {
  0%, 100% {
    -webkit-transform: rotate(20deg) scale(0.3);
            transform: rotate(20deg) scale(0.3);
  }
  47%, 53% {
    -webkit-transform: rotate(20deg) scale(1);
            transform: rotate(20deg) scale(1);
    opacity: 0.3;
  }
}
@-webkit-keyframes wiggle {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(10deg) scaleY(1.07);
            transform: rotate(10deg) scaleY(1.07);
  }
  75% {
    -webkit-transform: rotate(-10deg) scaleY(0.9);
            transform: rotate(-10deg) scaleY(0.9);
  }
}
@keyframes wiggle {
  0%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(10deg) scaleY(1.07);
            transform: rotate(10deg) scaleY(1.07);
  }
  75% {
    -webkit-transform: rotate(-10deg) scaleY(0.9);
            transform: rotate(-10deg) scaleY(0.9);
  }
}
@-webkit-keyframes moveMusic {
  0% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(0.3);
            transform: rotate(0deg) translate(0, 0) scale(0.3);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-50deg) translate(-4em, 3em) scale(1);
            transform: rotate(-50deg) translate(-4em, 3em) scale(1);
    opacity: 0;
  }
}
@keyframes moveMusic {
  0% {
    -webkit-transform: rotate(0deg) translate(0, 0) scale(0.3);
            transform: rotate(0deg) translate(0, 0) scale(0.3);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-50deg) translate(-4em, 3em) scale(1);
            transform: rotate(-50deg) translate(-4em, 3em) scale(1);
    opacity: 0;
  }
}