:root {
  --body-color: #ffeee5;
  --iris-color: #b29a8f;
  --eye-color: #f8e1d6;
  --skin-color: #f0d4c6;
  --shiny-color: white;
  --roundness: 0;
  --cheek-roundness: 0;
}

html,
body,
.background {
  width: 100%;
  height: 100%;
  min-height: 680px;
  min-width: 320px;
  background-color: var(--body-color);
  overflow: hidden;
}

body {
  position: relative;
}

.background {
  width: 90%;
  height: 90%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.eyes-container {
  position: relative;
  width: 100%;
  height: 66%;
  vertical-align: bottom;
  z-index: 0;
}

.glasses-container {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 66%;
  vertical-align: bottom;
  z-index: 1;
}

.glasses-container::after {
  position: absolute;
  content: ' ';
  width: 12%;
  height: 20%;
  background: black;
  top: 43%;
  left: 44%;
}

.glasses-container.monocle {
  height: 66%;
  align-items: flex-end;
  top: 5%;
}

.glasses-container.monocle .glass {
  border-radius: 50%;
}

.glasses-container.monocle .glass:first-child {
  visibility: hidden;
}

.glasses-container.monocle::before {
  content: '';
  height: 60%;
  width: 1%;
  background: black;
  position: absolute;
  right: 7%;
  bottom: -25%;
  border-radius: 20%;
}

.glasses-container.monocle::after {
  display: none;
}

/* eye socket skin */
.eyes-container::after {
    position: absolute;
    top: 0;
    content: '';
    width: 100%;
    height: 0%;
    background-color: var(--body-color);
    z-index: 1;
    transition: 200ms all ease-in-out;
}

.cheeks-container {
  width: 100%;
  height: 20%;
}
.mouth-container {
  width: 100%;
  height: 14%;
}

.eyes-container,
.cheeks-container,
.mouth-container,
.glasses-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.ball {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--skin-color);
  animation: 5s ease-out infinite alternate pulse;
  border-radius: var(--roundness);
}

.ball::after {
  position: absolute;
  top: 9%;
  right: 9%;
  width: 25%;
  height: 25%;
  background: var(--shiny-color);
  content:'';
  border-radius: var(--roundness);
}
.ball::before {
  position: absolute;
  width: 75%;
  height: 75%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--iris-color);
  content:'';
  border-radius: var(--roundness);
}

.close {
  position: absolute;
  display: none;
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
}

.no-glasses {
  display: none;
}

.close:after,
.close:before  {
  content: '';
  height: 100%;
  border-left: 20px solid var(--iris-color);
  position: absolute;
  transform: rotate(20deg);
  left: 50%;
}

.close:before {
  transform: rotate(-20deg);
}

.eyes-container.poked {
  animation: tilt-n-move-shaking 0.15s 3;
}

.eyes-container.poked .ball {
  display: none;
}

.eyes-container.poked .close {
  display: block;
}

.eye, .glass {
  position: relative;
  background: var(--eye-color);
  width: 33%;
  height: 75%;
  margin: 10%;
  border-radius: var(--roundness);
}

.glass {
  width: 50%;
  height: inherit;
  border: 2rem solid black;
  background: rgba(255, 255, 255, 0.2);
  margin: 5%;
  overflow: hidden;
}

.glass::after {
  content:'';
  position: absolute;
  display: block;
  height: 100%;
  width: 10%;
  left: -5%;
  background: rgba(255, 255, 255, 0.4);
  animation: 15s ease-out infinite running shine;
}

.cheek {
  position: relative;
  margin: 5%;
  width: 33%;
  height: 50%;
  background: var(--iris-color);
  border-radius: var(--cheek-roundness);
}

.mouth {
  position: relative;
  width: 10%;
  height: 20%;
  background: var(--iris-color);
  border-radius: var(--roundness);
  transition: 200ms ease-in-out all;
}

.mouth.poked {
  height: 75%;
  width: 7.5%;
}

.blink::after {
  animation-name: blink;
  animation-duration: 600ms;
}

.eyes-container.squished::after {
  height: 60%;
  animation-play-state: paused;
}

@keyframes shine {
  0% { left: -10%; }
  98% { left: -10%; }
  100% { left: 100%; }
}

@keyframes blink {
  0% { height: 0%; }
  60% { height: 100%; }
  100% { height: 0%; }
}

@keyframes pulse {
  0% {
    width: 50%;
    height: 50%;
  }
  90% {
    width: 51%;
    height: 51%;
  }
  100% {
    width: 50%;
    height: 50%;
  }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media only screen and (min-width: 768px) {
  .close:after {
    transform: rotate(45deg);
  }

  .close:before {
    transform: rotate(-45deg);
  }
}