html{
  height: 100%;
}
body {
  background: #1D1D1B;
  font-size: 40px;
  height: 100%;
}
@media (max-width: 700px) {
  body {
    font-size: 30px;
  }
}
@media (max-width: 500px) {
  body {
    font-size: 20px;
  }
}
.pacman-wrapper {
  display: flex;
  align-items: end;
  height: 100%;
  overflow: hidden;
}
.container {
  position: relative;
  width: 15em;
  height: 2em;
  margin: 0 auto;
}

.pacman:after, .pacman:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 0.7em solid yellow;
  border-right-color: transparent;
}

.pacman {
  position: absolute;
  top: 0.3em;
  left: 0;
  z-index: 3;
  width: 1.4em;
  height: 1.4em;
  transform-origin: center center;
  animation: movePac 5s linear infinite;
}
.pacman:before {
  animation: jawTop 0.3333333333s linear infinite;
}
.pacman:after {
  animation: jawBottom 0.3333333333s linear infinite;
}

.cover {
  position: absolute;
  top: 0.9em;
  width: 100%;
  z-index: 2;
  height: 0.5em;
  background: #1D1D1B;
  transform-origin: 0 0;
  animation: cover 5s linear infinite;
}

.inky {
  position: absolute;
  z-index: 3;
  top: 0.25em;
  left: -4em;
  width: 1.4em;
  height: 1.2em;
  border-radius: 1em 1em 0 0;
  background: #1CE7E6;
  animation: moveInky 5s linear infinite, colorInky 5s linear infinite;
}
.inky:before {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  top: 0.93em;
  left: -0.215em;
  background: #1CE7E6;
  transform: rotate(45deg);
  animation: colorBottom 5s linear infinite;
  box-shadow: 0.475em -0.475em #1CE7E6, 0.95em -0.95em #1CE7E6;
}
.inky:after {
  content: "";
  position: absolute;
  width: 0.6em;
  height: 1.2em;
  top: 0.7em;
  left: -0.6em;
  background: #1D1D1B;
  box-shadow: 2em 0em #1D1D1B;
}

.eyes {
  position: absolute;
  top: 0.35em;
  left: 0.225em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0.55em 0 #fff;
  animation: changeEyes 5s linear infinite;
}
.eyes:before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0.18em;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: #042251;
  box-shadow: 0.57em 0 #042251;
  animation: removePupil 5s linear infinite;
}

.mouth {
  position: absolute;
  opacity: 0;
  top: -0.1em;
  left: 0.18em;
  height: 1.7em;
  width: 2em;
  font-size: 0.6em;
  border-bottom: 0.22em dotted #fff;
  animation: showMouth 5s linear infinite;
}

.dots {
  position: absolute;
  width: 100%;
  height: 100%;
}
.dots div {
  position: relative;
  float: left;
  width: calc(100%/6);
  height: 100%;
}
.dots div:after {
  content: "";
  position: absolute;
  top: 1em;
  left: 2em;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: #fff;
}
.dots div:nth-child(6n):after {
  top: 0.9em;
  width: 0.4em;
  height: 0.4em;
}

@keyframes movePac {
  50% {
    left: 100%;
    transform: rotateZ(0deg);
  }
  51% {
    transform: rotateZ(180deg);
  }
  100% {
    left: 0;
    transform: rotateZ(180deg);
  }
}
@keyframes moveInky {
  50% {
    left: 11em;
    background: #1CE7E6;
  }
  51% {
    background: #301AC7;
  }
  100% {
    left: -4em;
    background: #301AC7;
  }
}
@keyframes colorInky {
  50% {
    background: #1CE7E6;
  }
  51% {
    background: #301AC7;
  }
  100% {
    background: #301AC7;
  }
}
@keyframes colorBottom {
  50% {
    background: #1CE7E6;
    box-shadow: 0.475em -0.475em #1CE7E6, 0.95em -0.95em #1CE7E6;
  }
  51% {
    background: #301AC7;
    box-shadow: 0.475em -0.475em #301AC7, 0.95em -0.95em #301AC7;
  }
  100% {
    background: #301AC7;
    box-shadow: 0.475em -0.475em #301AC7, 0.95em -0.95em #301AC7;
  }
}
@keyframes removePupil {
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes changeEyes {
  50% {
    transform: scale(1);
    box-shadow: 0.55em 0 #fff;
  }
  51% {
    transform: scale(0.5);
    box-shadow: 1em 0 #fff;
  }
  100% {
    transform: scale(0.5);
    box-shadow: 1em 0 #fff;
  }
}
@keyframes showMouth {
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes jawTop {
  50% {
    transform: rotateZ(45deg);
  }
}
@keyframes jawBottom {
  50% {
    transform: rotateZ(-45deg);
  }
}
@keyframes cover {
  0% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
}