.canvas
  .square
  .square-2
  .square-3
  .square-4
  
  .shadow
  .leg-left
  .foot-left
    .ellipse
    .ellipse-2
    .ellipse-3
    .ellipse-4
  .pokemon
    .foot-right
      .ellipse-5
    .stomach
    .chest
    .hand-left
      .finger
      .finger
      .finger
      .finger
    .hand-right
      .finger
      .finger
      .finger
      .finger
    .tail
    .head-shadow
    .head
      .cheeks
      .brain
      .face-happy
        .lip
        .lip-2
        .mouth
        .eyes
      .ear.ear-left
      .ear.ear-right
  .nose

// 1080x1080px (instagram post)
// For the output: 10px
$size: 10px;
$bg: #030303;
$canvas: #fefefe;

@mixin centered($width, $height) {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: #{$width};
  height: #{$height};
}

// Object colors
$white: #fff;
$dark: #232124;
$black: #000;
$yellow-1: #ffd623;
$yellow-2: #e29820;
$red-1: #ee5660;
$red-2: #ab1b2c;
$red-3: #ff3014;
$red-4: #710807;

html, body {
  background: $bg;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}
.canvas {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 108em;
  height: 108em;
  margin: auto;  
  background: $canvas;
  font-size: $size;
  box-shadow: 0 0.5em 5em 1em rgba(0,0,0,0.2);
}

.pokemon {
  position: relative;
  margin: auto;
  transform: translateY(-10em) translateX(-5em);
  width: 0;
  height: 0;
  filter: 
    drop-shadow(0 -0.2em 0 $dark)
    drop-shadow(0 0.2em 0 $dark)
    drop-shadow(0.2em 0 0 $dark) 
    drop-shadow(-0.2em 0 0 $dark);
}

.shadow {
  @include centered(50em, 20em);
  background: rgba(0,0,0,0.4);
  bottom: -86em;
  left: 0em;
  border-radius: 50%;
}

.foot-right {
  @include centered(5.5em, 12em);
  left: -9em;
  bottom: -90em;
  background-image: 
    radial-gradient(
      circle at 67% -20%, 
      black,
      black 48%, 
      transparent 49%,
      transparent
    ),
    radial-gradient(
      circle at 450% -50%, 
      $yellow-2,
      $yellow-2 88%, 
      $yellow-1 88%,
      $yellow-1
    );
  border-radius: 50%;
  overflow: hidden;
}

.stomach {
  @include centered(35em, 30em);
  left: -17em;
  bottom: -50em;
  transform: rotate(-30deg);
  background-image: 
    radial-gradient(circle at 75% 90%, $yellow-2 0%, $yellow-2 20%, transparent 20%),
    linear-gradient(185deg, transparent 0%, transparent 80%, $yellow-2 80%),
    linear-gradient(230deg, transparent 0%, transparent 84%, $yellow-2 84%),
    linear-gradient(200deg, $yellow-1 0%, $yellow-1 80%, $yellow-2 80%),
    linear-gradient(to bottom, $yellow-1 0%, $yellow-1 85%, $yellow-2 85%);
  box-shadow:
    inset 0em -2em 0 0 $yellow-2;
  border-radius: 80% 20% 30% 30% / 80% 50% 80% 50%;
  overflow: hidden;
  z-index: 30;
  
}

.chest {
  @include centered(20em, 30em);
  left: -14em;
  bottom: -25em;
  transform: rotate(3deg);
  background: $yellow-1;
  z-index: 20;
  
  &::before {
    content: "";
    @include centered(20em, 30em);
    background: $yellow-1;
    left: 7em;
    transform: rotate(-15deg);
  }
}

.hand-left, .hand-right {
  @include centered(25em, 10em);
  position: relative;
  left: 8em;
  top: -2em;
  transform: rotate(-15deg) perspective(20em);
  background-image:
    linear-gradient(
      133deg,
      $yellow-1,
      $yellow-1 25%, 
      transparent 25%,
      transparent
    ),
    radial-gradient(
      ellipse at 1050% -8em,
      $yellow-1 0, 
      $yellow-1 92%,
      $yellow-2 92%
    ),
    linear-gradient( 
      to bottom, 
      $yellow-1 0%, 
      $yellow-1 100% 
    );
  box-shadow: 
    inset 0em -1em 0em $yellow-2;
  border-radius: 10% 200% 200% 10% / 0% 100% 100% 0%;
  z-index: 30;
  
  .finger {
    @include centered(0, 0);
    position: absolute;
    display: block;
    margin: auto;
    left: 24em;
    content: "";
    border-bottom: 1.5em solid transparent;
    border-left: 1.5em solid $yellow-1;
    border-top: 1em solid transparent;
    border-radius: 1em;
    &:nth-child(1) {
      top: -2.5em;
      left: 23.5em;
      transform: rotate(-35deg);
    }
    &:nth-child(2) {
      top: -1em;
      left: 24.2em;
      transform: rotate(0deg);
    }
    &:nth-child(3) {
      top: 1em;
      left: 24em;
      transform: rotate(15deg);
    }
    &:nth-child(4) {
      top: 2.7em;
      left: 23.5em;
      transform: rotate(45deg);
    }
  }
}

.hand-right {
  transform: scaleX(-1);
  left: -36em;
  top: -7em;
}

.tail {
  @include centered(50em, 40em);
  position: absolute;
  top: 25em;
  margin-top: -34em;
  left: 14em;
  background: linear-gradient(
    25deg,
    $red-4 0%,
    $red-4 15%,
    $yellow-2 15%,
    $yellow-2 28%,
    $yellow-1 28%,
  );
  z-index: 10;
  clip-path: polygon(
    0% 85%, 14% 84%, 
    14% 70%, 28% 72%, 
    32% 42%, 74% 35%, 
    70% 62%, 39% 64%, 
    35% 85%, 23% 82%, 
    22% 98%, 0% 93%
  );
}

.head-shadow {
  @include centered(16em, 12em);
  position: absolute;
  background-image:
    linear-gradient(
      135deg,
      transparent 60%, $yellow-2 60%, $yellow-2
    );
  left: -10em;
  top: 12.5em;
  margin-top: -12.5em;
  border-radius: 35%;
  transform: rotate(45deg);
  opacity: 1;
  z-index: 80;
}

.head {
  @include centered(1em, 1em);
  position: relative;
  top: -25em;
  left: -3em;
  z-index: 50;
  filter:     
    drop-shadow(0 0.3em 0 $dark);
  
  .cheeks {
    @include centered(26em, 26em);
    background-image: linear-gradient(-220deg, $yellow-1 0%, $yellow-1 83%, transparent 83%, transparent 100%);
    top: 1em;
    left: -12em;
    transform: rotate(40deg);
    border-radius: 50% 60% 40% 30% / 50% 30% 40% 50%;
    overflow: hidden;
    z-index: 50;
    
    &::before, &::after {
      @include centered(7em, 7em);
      content: "";
      background: $red-3;
      border-radius: 50%;
      top: 23em;
      left: -17em;
      z-index: 51;
      box-shadow: 0 0 0 0.25em black; 
    }
    &::after {
      top: -16em;
      left: 21em;
    }
  }
}

.brain {
  @include centered(26em, 25em);
  position: relative;
  background: $yellow-1;
  top: -16em;
  left: -12.8em;
  border-radius: 45% / 35%;
  transform: rotate(-5deg);
  z-index: 49;
}

.face-happy {
  .lip, .lip-2 {
    @include centered(5.5em, 2.4em);
    position: relative;
    top: -26.5em;
    left: -0.5em;
    background: $yellow-1;
    z-index: 60;
    clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
    border-left: 0.25em solid black;
    border-top: 0.25em solid black;
    border-top-left-radius: 1em;
    transform: rotate(197deg) skewX(-25deg) scaleY(60%);
  }
  .lip-2 {
    top: -28.7em;
    left: -6em;
    transform: scaleX(-73%) scaleY(60%) rotate(213deg) skewX(-25deg);
  }
  .mouth {
    @include centered(7.5em, 11em);
    position: relative;
    top: -30.75em;
    left: -2.7em;
    transform: rotate(-20deg);
    border-radius: 0% 0% 90% 30% / 0% 0% 100% 100%;
    clip-path: polygon(
      0% 0%, 59% 0%, 100% 25%, 100% 100%, 0% 100%  
    );
    background-image:       
      radial-gradient(
        circle at bottom,
        $red-1 0%,
        $red-1 45%,
        $red-2 45%,
        $red-2 60%,
        $black 60%,
        $black 62.5%,
        $red-4 62.5%,
        $red-4
      ),
      linear-gradient(
        to bottom,
        $red-4 0%,
        $red-4 100%
      );
    border: 0.25em solid $dark;
    border-top: none;
    z-index: 58;
  }
  .eyes {
    @include centered(5em, 5em);
    top: -34em;
    left: 3em;
    background: transparent;
    border-radius: 50%;
    background: transparnet;
    z-index: 70;
    box-shadow: 
      -0.5em 9em 0em -1.5em white,
      0em 10em 0em 0em black,
      -11.5em 10em 0em -1.5em white,
      -12em 11em black;
  }  
}

.foot-left {
  @include centered(2em, 13em);
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0;
  top: -3em;
  left: 3em;
}

.ellipse {
  @include centered(3em, 13em);
  top: 36em;
  margin-top: -18em;
  left: -2.5em;
  background: 
    radial-gradient(circle at 50% 50%, $yellow-2 80%, transparent 80%)
    transparent;
  z-index: 80;
  border-radius: 50%;
  transform: rotate(-25deg);  
  border-left: 3px solid black;
}

.ellipse-2 {
  @include centered(2em, 13em);
  top: 34em;
  margin-top: -18em;
  left: -5em;
  background: $yellow-1;
  z-index: 80;
  border-radius: 50%;
  transform: rotate(-20deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
  border-top: 0.5em solid black;
}

.ellipse-3 {
  @include centered(2.5em, 16em);
  top: 34em;
  margin-top: -19em;
  left: -2.2em;
  background: $yellow-1;
  z-index: 80;
  border-radius: 50%;
  transform: rotate(-20deg);
  border-top: 0.5em solid black;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

.ellipse-4 {
  @include centered(2.2em, 16em);
  top: 34em;
  margin-top: -19em;
  left: 0.2em;
  background: $yellow-1;
  z-index: 80;
  border-radius: 50%;
  transform: rotate(-20deg);
  border-top: 0.5em solid black;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

.leg-left {
  @include centered(14em, 18em);
  top: 37em;
  left: 8em;
  background: 
    radial-gradient(circle at 39% 10%, transparent 50%, $yellow-2 50%),
    transparent;
  z-index: 40;
  border-radius: 50%;
  box-shadow: 
    inset 0 -2em 0 0 $yellow-2,
    -1px -1px 0 0 black;
  clip-path: polygon(-1% -1%, 80% -1%, 80% 85%, -1% 85%);
}


.square {
  @include centered(5em, 9em);
  top: -39em;
  left: 39.9em;
  background: transparent;
  z-index: 80;
  transform: rotate(2deg);
  box-shadow:
    -39.1em 2.3em 0em -0.5em $yellow-1,
    -39.5em 2.3em 0em -0.6em black;
}

.square-2 {
  @include centered(2em, 6em);
  top: -40em;
  left: 39.7em;
  background: transparent;
  z-index: 18;
  transform: rotate(-15deg);
  box-shadow:
    -15.5em -5em 0em 1em $yellow-1,
    -15.1em -5em 0em 0.8em $dark;
}

.square-3 {
  @include centered(5em, 1em);
  top: -39.5em;
  left: 39.7em;
  background: transparent;
  z-index: 18;
  transform: rotate(0deg);
  box-shadow:
    -27.5em 3em 0em 1em $yellow-1
}

.square-4 {
  @include centered(1em, 16em);
  position: absolute;
  top: -39.5em;
  left: 39.7em;
  margin-top: 65.6em;
  background: transparent;
  z-index: 18;
  transform: rotate(40deg);
  border-radius: 1em;
  box-shadow:
    -2.9em 23.8em 0em 0.2em $yellow-2;
}

.nose {
    @include centered(0em, 0em);
    top: -35em;
    left: -17em;
    background: transparent;
    z-index: 92;
    transform: rotate(45deg);
    border-top: 0em solid black;
    border-right: 0em solid transparent;
    border-bottom: 1em solid black;
    border-left: 1em solid transparent;
}

.ellipse-5 {
  @include centered(1.5em, 10em);
  top: 5em;
  left: 0em;
  background: transparent;
  z-index: 80;
  border-radius: 50%;
  transform: rotate(-180deg);
  border-left: 0.2em solid black;
  border-right: 0.2em solid black;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);  
}

.ear {
    @include centered(7em, 25em);
    top: -35em;
    left: -37em;
    background: $yellow-1;
    z-index: 92;
    transform: skewX(5deg) skewY(-40deg);
  
  &.ear-left {
    top: -45em;
    left: -16em;
    border-radius: 70% 30% 30% 30% / 70% 70% 50% 50%;
    transform: skewY(-50deg) scaleY(0.8) scaleY(0.8) scalex(1.2) rotate(5deg);
    background-image: 
      radial-gradient(
        circle at -150% 100%,
        transparent,
        transparent 70%,
        black 70%,
        black
      ),
      linear-gradient(
        45deg,
        $yellow-1,
        $yellow-1 15%,
        transparent 15%,
        transparent
      ),
      radial-gradient(
        circle at -150% 50%,
        $yellow-1,
        $yellow-1 80%,
        $yellow-2 80%,
        $yellow-2
      );
  }
  
  &.ear-right {
    top: -26em;
    left: 16em;
    border-radius: 70% 30% 50% 50% / 70% 70% 50% 50%;
    transform: scaleX(1) scaleY(0.7) rotate(100deg);
    border: none;
    border-left: 1px solid black;
    background-image: 
      linear-gradient(
        -35deg,
        $yellow-1,
        $yellow-1 15%,
        transparent 15%,
        transparent
      ),
      radial-gradient(
        circle at -150% 100%,
        transparent,
        transparent 70%,
        black 70%,
        black
      ),
      radial-gradient(
        circle at -300% 70%,
        $yellow-1,
        $yellow-1 80%,
        $yellow-2 80%,
        $yellow-2
      );
  }
}

/*
* Pikachu
* CSS Only
*/