<div class="upper-body">
	<div class="google-holder-left"></div>
	<div class="google-circle-left"></div>
	<div class="google-shadow-left"></div>
	<div class="google-left">
		<div class="eye-left">
			<div class="eye-ball"></div>
		</div>
	</div>

	<div class="google-line"></div>

	<div class="google-holder-right"></div>
	<div class="google-circle-right"></div>
	<div class="google-shadow-right"></div>
	<div class="google-right">
		<div class="eye-right">
			<div class="eye-ball"></div>
		</div>
	</div>

	<div class="mouth"></div>
	<div class="circle"></div>

	<div class="shirt-shadow-left"></div>
	<div class="shirt-top-left">
		<div class="button"></div>
	</div>

	<div class="shirt-shadow-right"></div>
	<div class="shirt-top-right">
		<div class="button"></div>
	</div>

	<div class="shirt">
		<div class="pocket">
			<div class="logo-1"></div>
			<div class="logo-2"></div>
		</div>
	</div>

	<div class="pant-top-left"></div>
	<div class="pant-top-right"></div>
</div>

<div class="hand-left"></div>
<div class="hand-right"></div>

<div class="lower-body"></div>

<div class="pant-left"></div>
<div class="pant-center"></div>
<div class="pant-right"></div>

<div class="foot"></div>

<div class="shadow"></div>

// colors
$bg-color: #276c94;
$line-color: #5185a5;
$minion-color: #ffd978;
$mouth-color: #2b3149;
$google-color: #bec9e5;
$google-shadow-color: #fec365;
$google-line-color: #2b334a;
$google-holder-color: #7e8ca7;
$google-holder-dark-color: #50617b;
$eye-shadow-color: #d2d2d2;
$eye-border-color: #7c8ca6;
$eye-color: #ffffff;
$eye-ball-color: #2c324a;
$shirt-color: #839fd3;
$button-color: #2d314a;
$logo-color: #2b314b;
$glove-color: #2c324a;
$shirt-shadow-color: #ffb172;
$pant-color: #677fae;
$pant-dark-color: #51627c;
$foot-color: #2c324a;
$shadow-color: #2c4a6c;

html,
body {
  width: 100%;
  height: 100%;
  background: $bg-color;
  overflow: hidden;

  * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;

    &::before,
    &::after {
      content: "";
      position: absolute;
    }
  }
}

.upper-body {
  z-index: 2;
  width: 40vmin;
  height: 49.8vmin;
  background: $minion-color;
  top: -8vmin;
  border-radius: 20vmin 20vmin 2vmin 2vmin;
  overflow: hidden;

  .google-line {
    z-index: -1;
    width: 41vmin;
    height: 4.3vmin;
    background: $google-line-color;
    top: -14.5vmin;

    &::before {
      width: 41vmin;
      height: 1.3vmin;
      background: $google-shadow-color;
      top: 4.25vmin;
    }
  }

  .google-holder-left {
    height: 6.3vmin;
    width: 2vmin;
    background: $google-holder-color;
    top: -14.4vmin;
    left: -35vmin;
    border-radius: 1vmin 0 0 1vmin;

    &::before {
      top: 2.5vmin;
      width: 3vmin;
      height: 1.2vmin;
      background: $google-holder-dark-color;
    }
  }

  .google-circle-left {
    width: 2.5vmin;
    height: 21.2vmin;
    background: $google-holder-color;
    top: -14.2vmin;
    left: -16.5vmin;
    border-radius: 2vmin;

    &::before {
      width: 2.5vmin;
      height: 5vmin;
      background: $google-holder-color;
      top: 2.9vmin;
      left: -5.8vmin;
      border-radius: 2vmin;
      transform: rotate(-20deg);
    }

    &::after {
      width: 2.5vmin;
      height: 5vmin;
      background: $google-holder-color;
      top: 13.3vmin;
      left: -5.8vmin;
      border-radius: 2vmin;
      transform: rotate(20deg);
    }
  }

  .google-shadow-left {
    z-index: -1;
    width: 18.5vmin;
    height: 18.5vmin;
    background: $google-shadow-color;
    top: -12vmin;
    left: -17vmin;
    border-radius: 50%;

    &::before {
      width: 2.5vmin;
      height: 5vmin;
      background: $google-shadow-color;
      top: 14.7vmin;
      left: 8.3vmin;
      border-radius: 2vmin;
    }

    &::after {
      width: 2.5vmin;
      height: 5vmin;
      background: $google-shadow-color;
      top: 12vmin;
      left: 2.3vmin;
      border-radius: 2vmin;
      transform: rotate(15deg);
    }
  }

  .google-holder-right {
    height: 6.3vmin;
    width: 2vmin;
    background: $google-holder-color;
    top: -14.4vmin;
    left: 35vmin;
    border-radius: 0 1vmin 1vmin 0;

    &::before {
      width: 3vmin;
      height: 1.2vmin;
      background: $google-holder-dark-color;
      top: 2.5vmin;
      left: -1vmin;
    }
  }

  .google-circle-right {
    width: 2.5vmin;
    height: 21.2vmin;
    background: $google-holder-color;
    top: -14.2vmin;
    right: -16vmin;
    border-radius: 2vmin;

    &::before {
      width: 2.5vmin;
      height: 5vmin;
      background: $google-holder-color;
      top: 3vmin;
      right: -5.85vmin;
      border-radius: 2vmin;
      transform: rotate(20deg);
    }

    &::after {
      width: 2.5vmin;
      height: 5vmin;
      background: $google-holder-color;
      top: 13.3vmin;
      right: -5.8vmin;
      border-radius: 2vmin;
      transform: rotate(-20deg);
    }
  }

  .google-shadow-right {
    z-index: -1;
    width: 18.5vmin;
    height: 18.5vmin;
    background: $google-shadow-color;
    top: -12vmin;
    right: -17vmin;
    border-radius: 50%;

    &::before {
      width: 2.5vmin;
      height: 5vmin;
      background: $google-shadow-color;
      top: 14.7vmin;
      left: 7.5vmin;
      border-radius: 2vmin;
    }

    &::after {
      width: 2.5vmin;
      height: 5vmin;
      background: $google-shadow-color;
      top: 12.1vmin;
      right: 2.4vmin;
      border-radius: 2vmin;
      transform: rotate(-20deg);
    }
  }

  .eye-abstract {
    width: 14.2vmin;
    height: 14.2vmin;
    background: $eye-shadow-color;
    top: -0.2vmin;
    border: 1.5vmin solid $eye-border-color;
    border-radius: 50%;
    overflow: hidden;

    &::before {
      width: 11.3vmin;
      height: 11vmin;
      background: $eye-color;
      top: 1vmin;
      border-radius: 50%;
    }

    .eye-ball {
      width: 5.2vmin;
      height: 5.2vmin;
      background: $eye-ball-color;
      top: -1.5vmin;
      border-radius: 50%;

      &::before {
        width: 3.8vmin;
        height: 3.7vmin;
        background: $eye-color;
        top: -0.8vmin;
        left: 2.6vmin;
        border-radius: 50%;
      }
    }
  }

  .google-left {
    width: 18.5vmin;
    height: 18.5vmin;
    background: $google-color;
    top: -14.2vmin;
    left: -16.7vmin;
    border-radius: 50%;

    .eye-left {
      @extend .eye-abstract;
    }
  }

  .google-right {
    width: 18.5vmin;
    height: 18.5vmin;
    background: $google-color;
    top: -14.2vmin;
    right: -16vmin;
    border-radius: 50%;

    .eye-right {
      @extend .eye-abstract;
    }
  }

  .mouth {
    z-index: -2;
    width: 13vmin;
    height: 7.5vmin;
    border: 1vmin solid $mouth-color;
    border-top: none;
    top: 7.4vmin;
    border-radius: 0 0 50% 50%;

    &::before {
      width: 17vmin;
      height: 5vmin;
      background: $minion-color;
      top: 0.25vmin;
      left: -2vmin;
    }
  }

  .button-abstract {
    width: 2.5vmin;
    height: 2.5vmin;
    background: $button-color;
    border-radius: 50%;

    &::before {
      width: 0.3vmin;
      height: 1.4vmin;
      background: $pant-color;
      top: 0.55vmin;
      left: 1.2vmin;
      border-radius: 1vmin;
      transform: rotate(45deg);
    }

    &::after {
      width: 0.3vmin;
      height: 1.4vmin;
      background: $pant-color;
      top: 0.55vmin;
      left: 1.1vmin;
      border-radius: 1vmin;
      transform: rotate(-45deg);
    }
  }

  .shirt-top-left {
    z-index: 3;
    width: 3.3vmin;
    height: 16.2vmin;
    background: $pant-color;
    top: 16.5vmin;
    left: -31vmin;
    transform: rotate(-45deg);

    .button {
      @extend .button-abstract;
      top: 12.8vmin;
    }
  }

  .shirt-shadow-left {
    width: 3.3vmin;
    height: 16.2vmin;
    background: $shirt-shadow-color;
    top: 19.2vmin;
    left: -31vmin;
    transform: rotate(-45deg);
  }

  .shirt-top-right {
    z-index: 3;
    width: 3.3vmin;
    height: 16.2vmin;
    background: $pant-color;
    top: 16.5vmin;
    left: 31vmin;
    transform: rotate(45deg);

    .button {
      @extend .button-abstract;
      top: 12.8vmin;
    }
  }

  .shirt-shadow-right {
    width: 3.3vmin;
    height: 16.2vmin;
    background: $shirt-shadow-color;
    top: 19.2vmin;
    left: 31vmin;
    transform: rotate(45deg);
  }

  .shirt {
    width: 26.7vmin;
    height: 14vmin;
    background: $shirt-color;
    top: 36.5vmin;

    &::before {
      width: 45vmin;
      height: 6vmin;
      background: $shirt-color;
      top: 8.7vmin;
      left: -10vmin;
    }

    .pocket {
      width: 11vmin;
      height: 8.5vmin;
      background: $pant-dark-color;
      top: 1vmin;
      border-radius: 1vmin 1vmin 1.5vmin 1.5vmin;
      overflow: hidden;

      &::before {
        width: 11vmin;
        height: 8.5vmin;
        background: $pant-color;
        left: -0.4vmin;
        border-radius: 1vmin 1vmin 1.5vmin 1.5vmin;
      }

      &::after {
        width: 6.4vmin;
        height: 6.4vmin;
        background: $logo-color;
        top: 1.1vmin;
        left: 2.05vmin;
        border-radius: 50%;
      }

      .logo-1 {
        z-index: 2;
        width: 4.55vmin;
        height: 4.55vmin;
        background: $pant-color;
        top: 0.1vmin;
        left: -0.5vmin;
        transform: rotate(-45deg);

        &::before {
          width: 2.2vmin;
          height: 2.2vmin;
          background: $logo-color;
          top: 1.15vmin;
          left: 1.15vmin;
          border-radius: 50%;
        }
      }

      .logo-2 {
        z-index: 2;
        width: 2.5vmin;
        height: 0.45vmin;
        background: $pant-color;
        top: 0.55vmin;
        left: 2vmin;
        border-radius: 1vmin 0 0 1vmin;

        &::before {
          width: 2.3vmin;
          height: 0.3vmin;
          background: $logo-color;
          top: -0.3vmin;
          left: 0.8vmin;
        }
      }
    }
  }

  .pant-top-left {
    width: 10vmin;
    height: 5.3vmin;
    background: $pant-dark-color;
    top: 45.2vmin;
    left: -36.7vmin;
    border-radius: 0 0 10vmin 0;

    &::before {
      width: 9vmin;
      height: 4.5vmin;
      background: $pant-color;
      border-radius: 0 0 10vmin 0;
    }
  }

  .pant-top-right {
    width: 10vmin;
    height: 5.3vmin;
    background: $pant-dark-color;
    top: 45.2vmin;
    left: 33.2vmin;
    border-radius: 0 0 0 10vmin;

    &::before {
      width: 9vmin;
      height: 4.5vmin;
      background: $pant-color;
      left: 1vmin;
      border-radius: 0 0 0 10vmin;
    }
  }
}

.hand-left {
  width: 14.9vmin;
  height: 16.7vmin;
  border: 3.3vmin solid $minion-color;
  top: 20.8vmin;
  left: -32.2vmin;
  border-radius: 10vmin;
  transform: rotate(30deg);

  &::before {
    width: 6.2vmin;
    height: 6vmin;
    background: $glove-color;
    top: 9.3vmin;
    left: 1.1vmin;
    border-radius: 1.6vmin 0 0 1.6vmin;
    transform: rotate(10deg);
  }
}

.hand-right {
  width: 15.1vmin;
  height: 16.7vmin;
  border: 3.3vmin solid $minion-color;
  top: 21.5vmin;
  right: -32vmin;
  border-radius: 10vmin;
  transform: rotate(30deg);

  &::before {
    width: 6.6vmin;
    height: 6vmin;
    background: $glove-color;
    top: 5.6vmin;
    right: -4.6vmin;
    border-radius: 0 1.6vmin 1.6vmin 0;
    transform: rotate(-75deg);
  }
}

.lower-body {
  z-index: 1;
  width: 38vmin;
  height: 10vmin;
  background: $shirt-color;
  top: 43.7vmin;
  border-radius: 0 0 15vmin 15vmin;
}

.pant-left {
  width: 6vmin;
  height: 17.5vmin;
  background: $pant-color;
  top: 43.7vmin;
  left: -20.5vmin;
  transform: skewX(30deg);

  &::after {
    width: 4vmin;
    height: 17.5vmin;
    background: $pant-color;
    right: -5.5vmin;
    border-radius: 0 0 1vmin 0;
    transform: skewX(-30deg);
  }
}

.pant-center {
  width: 4vmin;
  height: 7vmin;
  background: $pant-color;
  top: 52vmin;

  &::before {
    width: 3.2vmin;
    height: 3vmin;
    background: $bg-color;
    top: 5vmin;
    left: 0.25vmin;
    border-radius: 2vmin 2vmin 0 0;
  }
}

.pant-right {
  width: 6vmin;
  height: 17.5vmin;
  background: $pant-color;
  top: 43.7vmin;
  right: -20.5vmin;
  transform: skewX(-30deg);

  &::after {
    width: 4vmin;
    height: 17.5vmin;
    background: $pant-color;
    left: -5.8vmin;
    border-radius: 0 0 0 1vmin;
    transform: skewX(30deg);
  }
}

.foot {
  z-index: 1;
  width: 9.3vmin;
  height: 3vmin;
  background: $foot-color;
  top: 64vmin;
  left: -13.3vmin;
  border-radius: 3vmin 0 1.5vmin 0;

  &::before {
    width: 9.3vmin;
    height: 3vmin;
    background: $foot-color;
    left: 13.2vmin;
    border-radius: 0 3vmin 0 1.5vmin;
  }
}

.shadow {
  width: 35vmin;
  height: 3vmin;
  background: $shadow-color;
  top: 68vmin;
  border-radius: 50%;
}

// design inspire from 
// https://www.uplabs.com/posts/bob-minion