* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: khaki;

  --color-red: #c31010;
  --color-red-dark: #760a0a;
  --color-purple: #6a30bc;
  --color-purple-dark: #3c177c;
  --color-cyan: #38fedc;
  --color-cyan-dark: #24a9bf;
  --color-black: #181818;
  --color-black-dark: #0b0b0b;
  --color-yellow: #f5f558;
  --color-yellow-dark: #c08922;
  --color-lime: #4fef3a;
  --color-lime-dark: #15a743;
  --color-green: #127f2d;
  --color-green-dark: #0a4d2d;
  --color-orange: #f07e0d;
  --color-orange-dark: #b43d15;
  --color-white: #d7e2f1;
  --color-white-dark: #8696c1;
  --color-blue: #132fd2;
  --color-blue-dark: #08168c;
  --color-brown: #72491e;
  --color-brown-dark: #5e2614;
  --color-pink: #ed53ba;
  --color-pink-dark: #ad2cad;
  --color-gray: #4c4c4c;
  --color-gray-dark: #262626;
  --color-teal: #00a1a1;
  --color-teal-dark: #005252;
  --color-gold: #a18646;
  --color-gold-dark: #4b3e1e;
  --color-silver: #91949b;
  --color-silver-dark: #64656a;
  --color-maroon: #521619;
  --color-maroon-dark: #27090a;
  --color-peach: #fda298;
  --color-peach-dark: #a27a74;
}

.player {
  position: absolute;
  width: 160px;
  height: 200px;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes playerRight {
  0% {
    transform: translateY(-6px);
  }
  25% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
  75% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-6px);
  }
}

@keyframes playerLeft {
  0% {
    transform: rotateY(180deg) translateY(-6px);
  }
  25% {
    transform: rotateY(180deg) translateY(0px);
  }
  50% {
    transform: rotateY(180deg) translateY(-6px);
  }
  75% {
    transform: rotateY(180deg) translateY(0px);
  }
  100% {
    transform: rotateY(180deg) translateY(-6px);
  }
}

.player .shadow {
  position: absolute;
  left: 37px;
  top: 167px;
  width: 100px;
  height: 22px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  z-index: 0;
}

.player .body {
  position: absolute;
  top: 10px;
  left: 40px;
  width: 98px;
  height: 140px;
  border: 8px solid black;
  border-radius: 35% 50px 30% 30px;
  z-index: 1;
  overflow: hidden;
}

.player.red .body {
  background-color: var(--color-red-dark);
}
.player.purple .body {
  background-color: var(--color-purple-dark);
}
.player.cyan .body {
  background-color: var(--color-cyan-dark);
}
.player.black .body {
  background-color: var(--color-black-dark);
}
.player.yellow .body {
  background-color: var(--color-yellow-dark);
}
.player.lime .body {
  background-color: var(--color-lime-dark);
}
.player.green .body {
  background-color: var(--color-green-dark);
}
.player.orange .body {
  background-color: var(--color-orange-dark);
}
.player.white .body {
  background-color: var(--color-white-dark);
}
.player.blue .body {
  background-color: var(--color-blue-dark);
}
.player.brown .body {
  background-color: var(--color-brown-dark);
}
.player.pink .body {
  background-color: var(--color-pink-dark);
}
.player.gray .body {
  background-color: var(--color-gray-dark);
}
.player.teal .body {
  background-color: var(--color-teal-dark);
}
.player.gold .body {
  background-color: var(--color-gold-dark);
}
.player.silver .body {
  background-color: var(--color-silver-dark);
}
.player.maroon .body {
  background-color: var(--color-maroon-dark);
}
.player.peach .body {
  background-color: var(--color-peach-dark);
}

.player .body .shadow {
  position: absolute;
  top: -95px;
  left: 15px;
  width: 80px;
  height: 190px;
  border-radius: 50% 50% 30px 40%;
  z-index: 1;
}

.player.red .body .shadow {
  background-color: var(--color-red);
}
.player.purple .body .shadow {
  background-color: var(--color-purple);
}
.player.cyan .body .shadow {
  background-color: var(--color-cyan);
}
.player.black .body .shadow {
  background-color: var(--color-black);
}
.player.yellow .body .shadow {
  background-color: var(--color-yellow);
}
.player.lime .body .shadow {
  background-color: var(--color-lime);
}
.player.green .body .shadow {
  background-color: var(--color-green);
}
.player.orange .body .shadow {
  background-color: var(--color-orange);
}
.player.white .body .shadow {
  background-color: var(--color-white);
}
.player.blue .body .shadow {
  background-color: var(--color-blue);
}
.player.brown .body .shadow {
  background-color: var(--color-brown);
}
.player.pink .body .shadow {
  background-color: var(--color-pink);
}
.player.gray .body .shadow {
  background-color: var(--color-gray);
}
.player.teal .body .shadow {
  background-color: var(--color-teal);
}
.player.gold .body .shadow {
  background-color: var(--color-gold);
}
.player.silver .body .shadow {
  background-color: var(--color-silver);
}
.player.maroon .body .shadow {
  background-color: var(--color-maroon);
}
.player.peach .body .shadow {
  background-color: var(--color-peach);
}

.player .glasses {
  position: absolute;
  left: 69px;
  top: 32px;
  width: 77px;
  height: 47px;
  border: 8px solid black;
  background-color: #46626c;
  border-radius: 30px 65% 55% 30px;
  z-index: 2;
  overflow: hidden;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes glasses {
  0% {
    width: 77px;
  }
  50% {
    width: 74px;
    transform: translateX(4px);
  }
  100% {
    width: 77px;
  }
}

.player .glasses .shadow {
  position: absolute;
  top: -1px;
  left: 10px;
  width: 53px;
  height: 22px;
  background-color: #91c5d4;
  border-radius: 10px;
  z-index: 2;
  transform: rotateZ(-2deg);
}

.player .glasses .shadow .shadow {
  position: absolute;
  top: 5px;
  left: 16px;
  width: 28px;
  height: 10px;
  background-color: #f1f9f7;
  border-radius: 10px 10px 10px 10px;
  z-index: 2;
  transform: rotateZ(6deg);
}

.player .bag {
  position: absolute;
  left: 17px;
  top: 54px;
  width: 70px;
  height: 90px;
  border: 8px solid black;
  border-radius: 20px 0 0 35%;
  z-index: 0;
  overflow: hidden;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

.player.red .bag {
  background-color: var(--color-red);
}
.player.purple .bag {
  background-color: var(--color-purple);
}
.player.cyan .bag {
  background-color: var(--color-cyan);
}
.player.black .bag {
  background-color: var(--color-black);
}
.player.yellow .bag {
  background-color: var(--color-yellow);
}
.player.lime .bag {
  background-color: var(--color-lime);
}
.player.green .bag {
  background-color: var(--color-green);
}
.player.orange .bag {
  background-color: var(--color-orange);
}
.player.white .bag {
  background-color: var(--color-white);
}
.player.blue .bag {
  background-color: var(--color-blue);
}
.player.brown .bag {
  background-color: var(--color-brown);
}
.player.pink .bag {
  background-color: var(--color-pink);
}
.player.gray .bag {
  background-color: var(--color-gray);
}
.player.teal .bag {
  background-color: var(--color-teal);
}
.player.gold .bag {
  background-color: var(--color-gold);
}
.player.silver .bag {
  background-color: var(--color-silver);
}
.player.maroon .bag {
  background-color: var(--color-maroon);
}
.player.peach .bag {
  background-color: var(--color-peach);
}

@keyframes bag {
  0% {
    left: 17px;
    top: 56px;
  }
  25% {
    top: 54px;
  }
  50% {
    left: 13px;
    top: 56px;
  }
  75% {
    top: 54px;
  }
  100% {
    left: 17px;
    top: 56px;
  }
}

.player .bag .shadow {
  position: absolute;
  top: 10px;
  left: -5px;
  width: 40px;
  height: 90px;
  border-radius: 20px;
  z-index: 0;
}

.player.red .bag .shadow {
  background-color: var(--color-red-dark);
}
.player.purple .bag .shadow {
  background-color: var(--color-purple-dark);
}
.player.cyan .bag .shadow {
  background-color: var(--color-cyan-dark);
}
.player.black .bag .shadow {
  background-color: var(--color-black-dark);
}
.player.yellow .bag .shadow {
  background-color: var(--color-yellow-dark);
}
.player.lime .bag .shadow {
  background-color: var(--color-lime-dark);
}
.player.green .bag .shadow {
  background-color: var(--color-green-dark);
}
.player.orange .bag .shadow {
  background-color: var(--color-orange-dark);
}
.player.white .bag .shadow {
  background-color: var(--color-white-dark);
}
.player.blue .bag .shadow {
  background-color: var(--color-blue-dark);
}
.player.brown .bag .shadow {
  background-color: var(--color-brown-dark);
}
.player.pink .bag .shadow {
  background-color: var(--color-pink-dark);
}
.player.gray .bag .shadow {
  background-color: var(--color-gray-dark);
}
.player.teal .bag .shadow {
  background-color: var(--color-teal-dark);
}
.player.gold .bag .shadow {
  background-color: var(--color-gold-dark);
}
.player.silver .bag .shadow {
  background-color: var(--color-silver-dark);
}
.player.maroon .bag .shadow {
  background-color: var(--color-maroon-dark);
}
.player.peach .bag .shadow {
  background-color: var(--color-peach-dark);
}

.player .legLeft {
  position: absolute;
  left: 95px;
  top: 132px;
  width: 35px;
  height: 45px;
  border: 8px solid black;
  border-radius: 0 0 30% 30%;
  z-index: 0;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

.player.red .legLeft {
  background-color: var(--color-red-dark);
}
.player.purple .legLeft {
  background-color: var(--color-purple-dark);
}
.player.cyan .legLeft {
  background-color: var(--color-cyan-dark);
}
.player.black .legLeft {
  background-color: var(--color-black-dark);
}
.player.yellow .legLeft {
  background-color: var(--color-yellow-dark);
}
.player.lime .legLeft {
  background-color: var(--color-lime-dark);
}
.player.green .legLeft {
  background-color: var(--color-green-dark);
}
.player.orange .legLeft {
  background-color: var(--color-orange-dark);
}
.player.white .legLeft {
  background-color: var(--color-white-dark);
}
.player.blue .legLeft {
  background-color: var(--color-blue-dark);
}
.player.brown .legLeft {
  background-color: var(--color-brown-dark);
}
.player.pink .legLeft {
  background-color: var(--color-pink-dark);
}
.player.gray .legLeft {
  background-color: var(--color-gray-dark);
}
.player.teal .legLeft {
  background-color: var(--color-teal-dark);
}
.player.gold .legLeft {
  background-color: var(--color-gold-dark);
}
.player.silver .legLeft {
  background-color: var(--color-silver-dark);
}
.player.maroon .legLeft {
  background-color: var(--color-maroon-dark);
}
.player.peach .legLeft {
  background-color: var(--color-peach-dark);
}

@keyframes legLeft {
  0% {
    transform: rotate(-45deg) translate(17px, 11px);
  }
  25% {
    top: 115px;
  }
  50% {
    top: 132px;
    transform: rotate(45deg) translate(-48px, 34px);
  }
  75% {
    top: 115px;
  }
  100% {
    top: 132px;
    transform: rotate(-45deg) translate(17px, 11px);
  }
}

.player .legRight {
  position: absolute;
  left: 48px;
  top: 137px;
  width: 38px;
  height: 45px;
  border: 8px solid black;
  border-top: none;
  border-radius: 20% 20% 30% 30%;
  z-index: 1;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

.player.red .legRight {
  background-color: var(--color-red-dark);
}
.player.purple .legRight {
  background-color: var(--color-purple-dark);
}
.player.cyan .legRight {
  background-color: var(--color-cyan-dark);
}
.player.black .legRight {
  background-color: var(--color-black-dark);
}
.player.yellow .legRight {
  background-color: var(--color-yellow-dark);
}
.player.lime .legRight {
  background-color: var(--color-lime-dark);
}
.player.green .legRight {
  background-color: var(--color-green-dark);
}
.player.orange .legRight {
  background-color: var(--color-orange-dark);
}
.player.white .legRight {
  background-color: var(--color-white-dark);
}
.player.blue .legRight {
  background-color: var(--color-blue-dark);
}
.player.brown .legRight {
  background-color: var(--color-brown-dark);
}
.player.pink .legRight {
  background-color: var(--color-pink-dark);
}
.player.gray .legRight {
  background-color: var(--color-gray-dark);
}
.player.teal .legRight {
  background-color: var(--color-teal-dark);
}
.player.gold .legRight {
  background-color: var(--color-gold-dark);
}
.player.silver .legRight {
  background-color: var(--color-silver-dark);
}
.player.maroon .legRight {
  background-color: var(--color-maroon-dark);
}
.player.peach .legRight {
  background-color: var(--color-peach-dark);
}

@keyframes legRight {
  0% {
    transform: rotate(45deg) translate(-21px, 8px);
  }
  25% {
    top: 115px;
  }
  50% {
    top: 132px;
    transform: rotate(-45deg) translate(55px, 41px);
  }
  75% {
    top: 115px;
  }
  100% {
    top: 132px;
    transform: rotate(45deg) translate(-21px, 8px);
  }
}