<div class="cap"></div>
<div class="face"></div>
<div class="hair"></div>
<div class="eye"></div>
<div class="moustache"></div>
<div class="chest"></div>
<div class="right">
  <div class="boot"></div>
  <div class="costume"></div>
  <div class="button"></div>
  <div class="arm"></div>
  <div class="hand"></div>
</div>
<div class="left">
  <div class="boot"></div>
  <div class="costume"></div>
  <div class="button"></div>
  <div class="arm"></div>
  <div class="hand"></div>
</div>

* {
    margin: auto;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
*::before,
*::after {
    position: absolute;
    content: '';
}
:root {
    --bg : #5e96fe;
    --red : #D80606;
    --green: #6d6500;
    --yellow: #f7a900;
}
html,
body {
    background: var(--bg);
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.cap {
    background: var(--red);
    width: 35vmin;
    height: 12vmin;
    clip-path: polygon(0% 100%, 0% 50%, 15% 50%, 15% 30%, 33% 30%, 33% 0%, 70% 0%, 70% 40%, 52% 40%, 52% 70%, 100% 70%, 100% 100%);
  top: -75vmin;
}
.hair {
  background: var(--green);
  width: 15vmin;
  height: 18vmin;
  clip-path: polygon(
    0% 80%, 
    0% 40%, 
    25% 40%, 
    25% 12%, 
    45% 12%, 
    45% 0%, 
    80% 0%, 
    80% 25%, 
    100% 25%, 
    100% 55%, 
    70% 55%, 
    70% 12%, 
    45% 12%, 
    45% 70%, 
    55% 70%, 
    55% 85%, 
    65% 85%, 
    65% 100%, 
    30% 100%, 
    30% 80%);
  left: -33.4vmin;
  top: -45vmin;
}
.eye {
  background: var(--green);
  width: 7vmin;
  height: 6vmin;
  clip-path: polygon(0 0, 55% 0, 55% 55%, 100% 55%, 100% 100%, 0 100%);
  top: -57vmin;
  left: -3vmin;
}
.moustache{
  background: var(--green);
  width: 18vmin;
  height: 9vmin;
  clip-path: polygon(
    25% 0%, 
    42% 0%, 
    42% 35%, 
    100% 35%, 
    100% 100%, 
    15% 100%, 
    15% 65%, 
    0% 65%, 
    0% 35%, 
    25% 35%);
  top: -40vmin;
  left: 17vmin;
}
.face {
  background: var(--yellow);
  width: 40vmin;
  height: 25vmin;
  clip-path: polygon(
    70% 0%, 
    70% 12%, 
    88% 12%, 
    88% 24%, 
    100% 24%, 
    100% 42%, 
    87.5% 42%, 
    87.5% 64%, 
    80% 60%, 
    80% 75%, 
    55% 75%,
    55% 92%,
    8% 92%,
    8% 70%,
    0% 70%,
    0% 0%);
  top: -38vmin;
  left: 5vmin;
}
.arm {
  background: var(--green);
  width: 13vmin;
  height: 26vmin;
  clip-path: polygon(100% 0%, 100% 40%, 80% 40%, 80% 100%, 0% 100%, 0% 60%, 20% 60%, 20% 26%, 34% 26%, 34% 15%, 50% 15%, 50% 5%, 75% 5%, 75% 0%);
  left: -42vmin;
  top: 8.5vmin;
}
.hand {
  background: var(--yellow);
  width: 10.5vmin;
  height: 11vmin;
  clip-path: polygon(0% 0%, 0% 42%, 22% 42%, 23% 100%, 72% 100%, 72% 73%, 100% 72%, 100% 0%);
  left: -44.5vmin;
  top: 45.5vmin;
}
.costume {
  background: var(--red);
  width: 22vmin;
  height: 47vmin;
  clip-path: polygon(0% 100%, 0% 85%, 10% 85%, 10% 67%, 25% 66%, 24% 55%, 35% 54%, 32% 0%, 65% 0%, 65% 38%, 100% 38%, 100% 72%, 80% 72%, 80% 100%);
  left: -27.5vmin;
  top: 29.5vmin;
}
.button {
  background: var(--yellow);
  width: 3vmin;
  height: 3vmin;
  left: -24vmin;
  top: 31vmin;
}
.boot {
  background: var(--green);
  width: 24vmin;
  height: 10vmin;
  clip-path: polygon(0% 100%, 0% 50%, 40% 50%, 40% 0%, 100% 0%, 100% 100%);
  top: 84vmin;
  left: -38.5vmin;
}
.left .costume{
  transform: scale(-1, 1);
  left: 16vmin;
}
.left .arm{
  transform: scale(-1, 1);
  left: 30vmin;
}
.left .button {
  transform: scale(-1, 1);
  left: 13vmin;
}
.left .hand {
  transform: scale(-1, 1);
  left: 32.5vmin;
}
.left .boot {
  transform: scale(-1, 1);
  left: 26.5vmin;
}
.chest {
  background: var(--green);
  width: 16vmin;
  height: 19vmin;
  left: -6.5vmin;
  top: 1.5vmin;
}