@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  .eyes-wrap {
    position: absolute;
    width: 2vh;
    height: 2vh;
    
    color: #EAE0CE;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .eyes-wrap .eye {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      background: rgb(255, 255, 255);
      width: 50%;
      height: 100%;
      border-radius: 50%;
      display: inline-block;
      overflow: hidden;
  }
  
  .eyes-wrap .eye:before {
        content: '';
        position: absolute;
        margin: auto;
        width: 100%;
        height: 50%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 50%;
        background: rgba(20,20,20,1);
  }
  
  .eyes-wrap .eye.grin:after, .eyes-wrap .eye.sad:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    border-radius: 50%;
    background: #EAE0CE;
    left: 0px;
  }
  
  .eyes-wrap .eye.grin:after {
    bottom: -20%;
  }
  .eyes-wrap .eye.sad:after {
    top: -20%;
  }
  
  .eyes-wrap .eye:first-child {
    left: 0;
  }
  .eyes-wrap .eye:last-child {
    right: 0;
  }
  
  .eyes-wrap .eye.blink {
    animation: blink 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .eyes-wrap .eye.double-blink {
    animation: double-blink 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .eyes-wrap .eye.grin:before {
    animation: grinb 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .eyes-wrap .eye.grin:after {
    animation: grina 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .eyes-wrap .eye.sad:before {
    animation: sadb 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .eyes-wrap .eye.sad:after {
    animation: grina 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .eyes-wrap .eye.up:before {
    animation: grinb 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .eyes-wrap .eye.down:before {
    animation: sadb 10s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  @keyframes blink {
    0%, 8% {height: 100%;}
    10%, 12% {height: 10%;}
    14%, 100% {height: 100%;}
  }
  
  @keyframes double-blink {
    0%, 8% {
      height: 100%;
    }
    10%, 12% {
      height: 20%;
    }
    13% {
      height: 100%;
    }
    14%, 16% {
      height: 0;
    }
    18%, 100% {
      height: 100%;
    }
  }
  
  @keyframes grinb {
    0%, 10% {
      bottom: 0;
    }
    20%, 40% {
      bottom: 50%;
    }
    50%, 100% {
      bottom: 0;
    }
  }
  
  @keyframes grina {
    0%, 10% {
      height: 0;
    }
    20%, 40% {
      height: 100%;
    }
    50%, 100% {
      height: 0;
    }
  }
  
  @keyframes sadb {
    0%, 10% {
      top: 0;
    }
    20%, 40% {
      top: 50%;
    }
    50%, 100% {
      top: 0;
    }
  }

  @keyframes scale-out {
    0% {
      transform: scale(1);
    }
    100% {
      transform:scale(0);
    }
  }
  
  @keyframes scale-in {
    0% {
      transform: scale(0);
    }
    100% {
      transform:scale(1);
    }
  }

  @keyframes scale-half {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scale(0.5);
    }
    100% {
      transform:scale(1);
    }
  }