base.css

body {
  background: linear-gradient(180deg, #DEF2F3 9%,  #669cab 100%);
  background-repeat: no-repeat;
}

:root {
  --white: #ffffff;
  --lightyellow: #ffffad;
  --neonyellow: #f2ff00;
  --yellow: #ffde00;
  --warmyellow: #ffb800;
  --orangeyellow: #ff9100;
  --orange: #ff6300;
  --orangered: #ff4500;
  --red: #e00000;
  --darkred: #ac0000;
  --lightpink: #ff71c2;
  --pink: #fb3995;
  --hotpink: #e2006c;
  --darkpink: #b9006f;
  --redpurple: #a60086;
  --burgundy: #871865;
  --lightpurple: #b669ee;
  --neonpurple: #a935cb;
  --darkpurple: #5f01a1;
  --darkblue: #002585;
  --neonblue: #061ef9;
  --blue: #3470e6;
  --lightblue: #6ec6f7;
  --blueaqua: #1eb9db;
  --darkaqua: #009498;
  --darkgreen: #007850;
  --green: #00a12d;
  --mossgreen: #9bc200;
  --brown: rgb(180, 76, 0);
  --grey: #b0b0b0;
  --black: #000000;
  --placement: 0.965vw;
  --topplacement: 2.894vw;
}

#wrapper {
  position: relative;
  margin: 1vw auto;
  width: 89.8vw;
  height: 65vw;
  overflow: hidden;
  background: linear-gradient(180deg, #DEF2F3 9%, #d6d6d3 10%, #545454 100%);
}

#pencil-body {
  position: absolute;
  top: 5.7vw;
  left: 0;
  height: 60vw;
  width: 0.93vw;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  background: var(--white);
  box-shadow: var(--placement) 0 0 0 var(--white),
              calc(var(--placement) * 2) 0 0 0 var(--white),

              calc(var(--placement) * 3) 0 0 0 var(--lightyellow),
              calc(var(--placement) * 4) 0 0 0 var(--lightyellow),
              calc(var(--placement) * 5) 0 0 0 var(--lightyellow),

              calc(var(--placement) * 6) 0 0 0 var(--neonyellow),
              calc(var(--placement) * 7) 0 0 0 var(--neonyellow),
              calc(var(--placement) * 8) 0 0 0 var(--neonyellow),

              calc(var(--placement) * 9) 0 0 0 var(--yellow),
              calc(var(--placement) * 10) 0 0 0 var(--yellow),
              calc(var(--placement) * 11) 0 0 0 var(--yellow),

              calc(var(--placement) * 12) 0 0 0 var(--warmyellow),
              calc(var(--placement) * 13) 0 0 0 var(--warmyellow),
              calc(var(--placement) * 14) 0 0 0 var(--warmyellow),

              calc(var(--placement) * 15) 0 0 0 var(--orangeyellow),
              calc(var(--placement) * 16) 0 0 0 var(--orangeyellow),
              calc(var(--placement) * 17) 0 0 0 var(--orangeyellow),

              calc(var(--placement) * 18) 0 0 0 var(--orange),
              calc(var(--placement) * 19) 0 0 0 var(--orange),
              calc(var(--placement) * 20) 0 0 0 var(--orange),

              calc(var(--placement) * 21) 0 0 0 var(--orangered),
              calc(var(--placement) * 22) 0 0 0 var(--orangered),
              calc(var(--placement) * 23) 0 0 0 var(--orangered),

              calc(var(--placement) * 24) 0 0 0 var(--red),
              calc(var(--placement) * 25) 0 0 0 var(--red),
              calc(var(--placement) * 26) 0 0 0 var(--red),

              calc(var(--placement) * 27) 0 0 0 var(--darkred),
              calc(var(--placement) * 28) 0 0 0 var(--darkred),
              calc(var(--placement) * 29) 0 0 0 var(--darkred),

              calc(var(--placement) * 30) 0 0 0 var(--lightpink),
              calc(var(--placement) * 31) 0 0 0 var(--lightpink),
              calc(var(--placement) * 32) 0 0 0 var(--lightpink),

              calc(var(--placement) * 33) 0 0 0 var(--pink),
              calc(var(--placement) * 34) 0 0 0 var(--pink),
              calc(var(--placement) * 35) 0 0 0 var(--pink),

              calc(var(--placement) * 36) 0 0 0 var(--hotpink),
              calc(var(--placement) * 37) 0 0 0 var(--hotpink),
              calc(var(--placement) * 38) 0 0 0 var(--hotpink),

              calc(var(--placement) * 39) 0 0 0 var(--darkpink),
              calc(var(--placement) * 40) 0 0 0 var(--darkpink),
              calc(var(--placement) * 41) 0 0 0 var(--darkpink),

              calc(var(--placement) * 42) 0 0 0 var(--redpurple),
              calc(var(--placement) * 43) 0 0 0 var(--redpurple),
              calc(var(--placement) * 44) 0 0 0 var(--redpurple),

              calc(var(--placement) * 45) 0 0 0 var(--burgundy),
              calc(var(--placement) * 46) 0 0 0 var(--burgundy),
              calc(var(--placement) * 47) 0 0 0 var(--burgundy),

              calc(var(--placement) * 48) 0 0 0 var(--lightpurple),
              calc(var(--placement) * 49) 0 0 0 var(--lightpurple),
              calc(var(--placement) * 50) 0 0 0 var(--lightpurple),

              calc(var(--placement) * 51) 0 0 0 var(--neonpurple),
              calc(var(--placement) * 52) 0 0 0 var(--neonpurple),
              calc(var(--placement) * 53) 0 0 0 var(--neonpurple),

              calc(var(--placement) * 54) 0 0 0 var(--darkpurple),
              calc(var(--placement) * 55) 0 0 0 var(--darkpurple),
              calc(var(--placement) * 56) 0 0 0 var(--darkpurple),

              calc(var(--placement) * 57) 0 0 0 var(--darkblue),
              calc(var(--placement) * 58) 0 0 0 var(--darkblue),
              calc(var(--placement) * 59) 0 0 0 var(--darkblue),

              calc(var(--placement) * 60) 0 0 0 var(--neonblue),
              calc(var(--placement) * 61) 0 0 0 var(--neonblue),
              calc(var(--placement) * 62) 0 0 0 var(--neonblue),

              calc(var(--placement) * 63) 0 0 0 var(--blue),
              calc(var(--placement) * 64) 0 0 0 var(--blue),
              calc(var(--placement) * 65) 0 0 0 var(--blue),

              calc(var(--placement) * 66) 0 0 0 var(--lightblue),
              calc(var(--placement) * 67) 0 0 0 var(--lightblue),
              calc(var(--placement) * 68) 0 0 0 var(--lightblue),

              calc(var(--placement) * 69) 0 0 0 var(--blueaqua),
              calc(var(--placement) * 70) 0 0 0 var(--blueaqua),
              calc(var(--placement) * 71) 0 0 0 var(--blueaqua),

              calc(var(--placement) * 72) 0 0 0 var(--darkaqua),
              calc(var(--placement) * 73) 0 0 0 var(--darkaqua),
              calc(var(--placement) * 74) 0 0 0 var(--darkaqua),

              calc(var(--placement) * 75) 0 0 0 var(--darkgreen),
              calc(var(--placement) * 76) 0 0 0 var(--darkgreen),
              calc(var(--placement) * 77) 0 0 0 var(--darkgreen),

              calc(var(--placement) * 78) 0 0 0 var(--green),
              calc(var(--placement) * 79) 0 0 0 var(--green),
              calc(var(--placement) * 80) 0 0 0 var(--green),

              calc(var(--placement) * 81) 0 0 0 var(--mossgreen),
              calc(var(--placement) * 82) 0 0 0 var(--mossgreen),
              calc(var(--placement) * 83) 0 0 0 var(--mossgreen),

              calc(var(--placement) * 84) 0 0 0 var(--brown),
              calc(var(--placement) * 85) 0 0 0 var(--brown),
              calc(var(--placement) * 86) 0 0 0 var(--brown),

              calc(var(--placement) * 87) 0 0 0 var(--grey),
              calc(var(--placement) * 88) 0 0 0 var(--grey),
              calc(var(--placement) * 89) 0 0 0 var(--grey),

              calc(var(--placement) * 90) 0 0 0 var(--black),
              calc(var(--placement) * 91) 0 0 0 var(--black),
              calc(var(--placement) * 92) 0 0 0 var(--black)
              ;
}

#pencil-top1 {
  position: absolute;
  top: 0;
  left: 0vw;
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top1:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--white) 0%, var(--white) 30%, transparent 30%, transparent 100%);
}

#pencil-top2 {
  position: absolute;
  top: 0;
  left: var(--topplacement);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top2:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--lightyellow) 0%, var(--lightyellow) 30%, transparent 30%, transparent 100%);
}

#pencil-top3 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 2);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top3:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--neonyellow) 0%, var(--neonyellow) 30%, transparent 30%, transparent 100%);
}

#pencil-top4 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 3);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top4:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--yellow) 0%, var(--yellow) 30%, transparent 30%, transparent 100%);
}

#pencil-top5 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 4);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top5:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--warmyellow) 0%, var(--warmyellow) 30%, transparent 30%, transparent 100%);
}

#pencil-top6 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 5);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top6:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--orangeyellow) 0%, var(--orangeyellow) 30%, transparent 30%, transparent 100%);
}

#pencil-top7 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 6);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top7:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--orange) 0%, var(--orange) 30%, transparent 30%, transparent 100%);
}

#pencil-top8 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 7);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top8:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--orangered) 0%, var(--orangered) 30%, transparent 30%, transparent 100%);
}

#pencil-top9 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 8);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top9:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--red) 0%, var(--red) 30%, transparent 30%, transparent 100%);
}

#pencil-top10 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 9);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top10:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--darkred) 0%, var(--darkred) 30%, transparent 30%, transparent 100%);
}

#pencil-top11 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 10);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top11:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--lightpink) 0%, var(--lightpink) 30%, transparent 30%, transparent 100%);
}

#pencil-top12 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 11);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top12:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--pink) 0%, var(--pink) 30%, transparent 30%, transparent 100%);
}

#pencil-top13 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 12);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top13:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--hotpink) 0%, var(--hotpink) 30%, transparent 30%, transparent 100%);
}

#pencil-top14 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 13);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top14:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--darkpink) 0%, var(--darkpink) 30%, transparent 30%, transparent 100%);
}

#pencil-top15 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 14);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top15:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--redpurple) 0%, var(--redpurple) 30%, transparent 30%, transparent 100%);
}

#pencil-top16 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 15);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top16:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--burgundy) 0%, var(--burgundy) 30%, transparent 30%, transparent 100%);
}

#pencil-top17 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 16);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top17:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--lightpurple) 0%, var(--lightpurple) 30%, transparent 30%, transparent 100%);
}

#pencil-top18 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 17);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top18:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--neonpurple) 0%, var(--neonpurple) 30%, transparent 30%, transparent 100%);
}

#pencil-top19 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 18);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top19:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--darkpurple) 0%, var(--darkpurple) 30%, transparent 30%, transparent 100%);
}

#pencil-top20 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 19);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top20:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--darkblue) 0%, var(--darkblue) 30%, transparent 30%, transparent 100%);
}

#pencil-top21 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 20);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top21:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--neonblue) 0%, var(--neonblue) 30%, transparent 30%, transparent 100%);
}

#pencil-top22 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 21);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top22:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--blue) 30%, transparent 30%, transparent 100%);
}

#pencil-top23 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 22);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top23:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--lightblue) 0%, var(--lightblue) 30%, transparent 30%, transparent 100%);
}

#pencil-top24 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 23);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top24:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--blueaqua) 0%, var(--blueaqua) 30%, transparent 30%, transparent 100%);
}

#pencil-top25 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 24);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top25:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--darkaqua) 0%, var(--darkaqua) 30%, transparent 30%, transparent 100%);
}

#pencil-top26 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 25);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top26:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--darkgreen) 0%, var(--darkgreen) 30%, transparent 30%, transparent 100%);
}

#pencil-top27 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 26);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top27:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--green) 0%, var(--green) 30%, transparent 30%, transparent 100%);
}

#pencil-top28 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 27);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top28:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--mossgreen) 0%, var(--mossgreen) 30%, transparent 30%, transparent 100%);
}

#pencil-top29 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 28);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top29:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--brown) 0%, var(--brown) 30%, transparent 30%, transparent 100%);
}

#pencil-top30 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 29);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top30:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--grey) 0%, var(--grey) 30%, transparent 30%, transparent 100%);
}

#pencil-top31 {
  position: absolute;
  top: 0;
  left: calc(var(--topplacement) * 30);
  width: 2.9vw;
  height: 6vw;
  background: linear-gradient(90deg, #e6cd84 0%, #e6cd84 30%, #f5e7bf 50%, #e6cd84 70%, #e6cd84 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#pencil-top31:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--black) 0%, var(--black) 30%, transparent 30%, transparent 100%);
}