:root {
  --face-color: #160c4e;
  --face-height: 100vh;
  --face-width: 100vw;
  --eye-size: 33.33vmin;
  --eye-color: #ffcc00;
  --eyelid-color: #160c4e;
}

body {
  background-color: #160c4e;
  margin: 0px;
}

.buttons {
  position: relative;
  z-index: 3;
}

.face {
  background-color: var(--face-color);
  margin: auto;
  height: var(--face-height);
  width: var(--face-width);
  position: relative;
  overflow: hidden;
}

.face div {
  position: absolute;
}

.eye {
  background-color: var(--eye-color);
  border-radius: 100%;
  height: var(--eye-size);
  width: var(--eye-size);
  bottom: calc(var(--eye-size) / 3);
  z-index: 1;
  transform: rotateX(0);
}

.eye.left {
  left: calc(var(--eye-size) / 3);
}

.eye.right {
  right: calc(var(--eye-size) / 3);
}

.eyelid {
  background-color: var(--eyelid-color);
  height: var(--eye-size);
  width: calc(var(--eye-size) * 1.75);
  z-index: 2;
  transform: rotate(0deg);
}

.eyelid.upper {
  bottom: calc(var(--eye-size) * 1);
  left: calc(var(--eye-size) * -0.375);
}

.eyelid.lower {
  border-radius: 100%;
  bottom: calc(var(--eye-size) * -1);
  left: calc(var(--eye-size) * -0.375);
}