:root {
    --eye-size:20vmin;
    --eye-gap:14vmin;
    --eye-color:white;
    --background:#EC87C0;
    --user-button-main:#D770AD;
  }
  
  body {
    min-height: 100vh;
    perspective: 25rem;
    overflow: hidden;
  }
  body .face-container {
    width: 100vw;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--background);
  }
  @keyframes float {
    0%, 100% {
      transform: translateY(-5%);
    }
    50% {
      transform: translateY(5%);
    }
  }
  body .face {
    --left-lower-rotation:0deg;
    --left-lower-position:0%;
    --left-upper-rotation:0deg;
    --left-upper-position:0%;
    --right-lower-rotation:0deg;
    --right-lower-position:0%;
    --right-upper-rotation:0deg;
    --right-upper-position:0%;
    --face-rotation-x:0deg;
    --face-rotation-y:0deg;
    --face-rotation-z:0deg;
    display: grid;
    grid-template-columns: var(--eye-size) var(--eye-gap) var(--eye-size);
    grid-template-rows: var(--eye-size);
    grid-template-areas: "left . right";
    filter: blur(1vmin) contrast(8);
    transform: translateZ(8vmin) rotateX(var(--face-rotation-x)) rotateY(var(--face-rotation-y)) rotateZ(var(--face-rotation-z));
    transition: 0.75s cubic-bezier(0.25, 0.5, 0.5, 1);
    mix-blend-mode: lighten;
  }
  body .face .eye {
    position: relative;
    background: white;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 0 0 2vmin black;
  }
  body .face .eye, body .face .eye * {
    transition: 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  }
  body .face .eye > div {
    --rotation:0deg;
    --position:0%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(var(--rotation));
  }
  body .face .eye > div .lid {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
  }
  body .face .eye > div.lower .lid {
    top: calc(100% - var(--position));
  }
  body .face .eye > div.upper .lid {
    bottom: calc(100% - var(--position));
  }
  body .face .eye.left {
    grid-area: left;
  }
  body .face .eye.left .lower {
    --rotation:var(--left-lower-rotation);
    --position:var(--left-lower-position);
  }
  body .face .eye.left .upper {
    --rotation:var(--left-upper-rotation);
    --position:var(--left-upper-position);
  }
  body .face .eye.right {
    grid-area: right;
  }
  body .face .eye.right .lower {
    --rotation:var(--right-lower-rotation);
    --position:var(--right-lower-position);
  }
  body .face .eye.right .upper {
    --rotation:var(--right-upper-rotation);
    --position:var(--right-upper-position);
  }