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

body {
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(45deg, black, grey);
}

.minion {
  position: relative;
  top: 30vmin;
}

.body {
  width: 50vmin;
  height: 70vmin;
  background-color: #f3bc54;
  border-radius: 50% 50% 48% 48% / 38% 38% 28% 28%;
  position: relative;
  overflow: hidden;
}

.outfit {
  width: 50vmin;
  height: 20vmin;
  background-color: #436884;
  border-radius: 0% 0% 49% 49% / 10% 10% 45% 45%;
  position: absolute;
  bottom: 0;
}

.outfit-top {
  width: 30vmin;
  height: 20vmin;
  background-color: #436884;
  bottom: 7vmin;
  position: absolute;
  left: 10vmin;
  bottom: 8vmin;
}

.strap-left,
.strap-right {
  width: 4vmin;
  height: 25vmin;
  background-color: #436884;
  position: absolute;
  top: 24vmin;
}

.strap-left {
  transform: rotateZ(-50deg);
  left: 3vmin;
}

.strap-right {
  transform: rotateZ(50deg);
  right: 3vmin;
}

.left-eye-outer,
.right-eye-outer {
  width: 20vmin;
  height: 20vmin;
  background-color: #919191;
  border-radius: 50%;
  position: absolute;
  top: 10vmin;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-eye-outer {
  left: 5vmin;
}

.right-eye-outer {
  right: 5vmin;
}

.white-eye {
  width: 15vmin;
  height: 15vmin;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brown-eye-outer {
  width: 5vmin;
  height: 5vmin;
  background-color: #a86d4c;
  border-radius: 50%;
  border: 0.4vmin solid #39322e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-eye {
  width: 2.5vmin;
  height: 2.5vmin;
  background-color: #603d29;
  border-radius: 50%;
}

.left-eye-black,
.right-eye-black {
  width: 8vmin;
  height: 5vmin;
  background-color: #000;
  position: absolute;
  top: 18vmin;
}

.right-eye-black {
  right: 0;
}

.mouth {
  width: 13vmin;
  height: 5vmin;
  border-radius: 0 0 48% 48% / 0 0 100% 100%;
  background-color: #000;
  position: absolute;
  top: 35vmin;
  left: 18.5vmin;
}

.teeth {
  display: flex;
  position: absolute;
  top: 34vmin;
  left: 18vmin;
  z-index: 3;
}

.t1,
.t2,
.t3,
.t4 {
  width: 3.4vmin;
  height: 2vmin;
  background-color: #fff;
  border-radius: 0 0 48% 48% / 10% 10% 45% 45%;
}

.left-btn,
.right-btn {
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  background-color: #a06545;
  position: absolute;
  top: 43vmin;
  z-index: 3;
  border-bottom: 1vmin solid #6a4530;
}

.left-btn {
  left: 12vmin;
}

.right-btn {
  right: 12vmin;
}

.left-leg {
  width: 10vmin;
  height: 12vmin;
  background-color: #436884;
  position: relative;
  bottom: 5vmin;
  left: 12vmin;
  z-index: 2;
}

.right-leg {
  width: 10vmin;
  height: 12vmin;
  background-color: #436884;
  position: relative;
  bottom: 17vmin;
  left: 28vmin;
  z-index: 2;
}

.left-shoe {
  width: 12vmin;
  height: 10vmin;
  background-color: #000;
  border-radius: 88% 12% 70% 30%/ 71% 71% 29% 29%;
  position: relative;
  bottom: 20vmin;
  left: 10vmin;
}

.right-shoe {
  width: 12vmin;
  height: 10vmin;
  background-color: #000;
  border-radius: 88% 12% 70% 30%/ 71% 71% 29% 29%;
  position: relative;
  bottom: 30vmin;
  left: 28vmin;
  transform: scaleX(-1);
}

.left-hand {
  width: 5vmin;
  height: 15vmin;
  background-color: #f3bc54;
  position: relative;
  bottom: 76vmin;
  right: 4vmin;
  transform: rotateZ(40deg);
  z-index: 1;
}

.right-hand {
  width: 5vmin;
  height: 15vmin;
  background-color: #f3bc54;
  position: relative;
  bottom: 90vmin;
  left: 49vmin;
  transform: rotateZ(-40deg);
  z-index: 1;
}

.left-palm,
.right-palm {
  position: absolute;
  width: 6vmin;
  height: 7vmin;
  border-radius: 10%;
  background-color: #000;
  bottom: -3vmin;
  left: -0.7vmin;
}

.f1,
.f2,
.f3 {
  width: 3vmin;
  height: 5vmin;
  background-color: #000;
  border-radius: 30%;
  position: absolute;
}

.f1,
.f3 {
  bottom: -6vmin;
  transform: rotate(10deg);
}

.f1 {
  left: -1.5vmin;
  transform: rotate(10deg);
}

.f3 {
  right: -1vmin;
  transform: rotate(-20deg);
}

.f2 {
  left: 1vmin;
  bottom: -7vmin;
}

.big-pocket {
  width: 20vmin;
  height: 10vmin;
  border-radius: 0 0 50% 50%;
  border: 0.7vmin solid #1a2934;
  position: absolute;
  top: 50vmin;
  left: 15vmin;
  z-index: 3;
}

.left-pocket,
.right-pocket {
  width: 5vmin;
  height: 2.5vmin;
  border-radius: 0 0 50% 50%;
  border: 0.2vmin solid #1a2934;
  position: absolute;
  top: 50vmin;
  z-index: 3;
}

.left-pocket {
  left: 4vmin;
}

.right-pocket {
  right: 4vmin;
}