body,
  html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    font-family: monospace;
    background-image: radial-gradient(#FFFFFF,#A9C810,#5EB030);
    background-repeat: no-repeat;
    position: relative;
  }
  .sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    width: 100vw;
  }
  :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%);
  }
  .selected-color {
    height: 35vw;
  }
  
  #pencil-body {
    position: absolute;
    bottom: 0vw;
    left: 0;
    height: 2vw;
    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;
    bottom: 2vw;
    left: 0vw;
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--white) 0%, var(--white) 30%, var(--white) 50%, var(--white) 70%, var(--white) 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;
    bottom: 2vw;
    left: var(--topplacement);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--lightyellow) 0%, var(--lightyellow) 30%, var(--lightyellow) 50%, var(--lightyellow) 70%, var(--lightyellow) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 2);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--neonyellow) 0%, var(--neonyellow) 30%, var(--neonyellow) 50%, var(--neonyellow) 70%, var(--neonyellow) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 3);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow) 30%, var(--yellow) 50%, var(--yellow) 70%, var(--yellow) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 4);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--warmyellow) 0%, var(--warmyellow) 30%, var(--warmyellow) 50%, var(--warmyellow) 70%, var(--warmyellow) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 5);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--orangeyellow) 0%, var(--orangeyellow) 30%, var(--orangeyellow) 50%, var(--orangeyellow) 70%, var(--orangeyellow) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 6);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 30%, var(--orange) 50%, var(--orange) 70%, var(--orange) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 7);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--orangered) 0%, var(--orangered) 30%, var(--orangered) 50%, var(--orangered) 70%, var(--orangered) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 8);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--red) 0%, var(--red) 30%, var(--red) 50%, var(--red) 70%, var(--red) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 9);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--darkred) 0%, var(--darkred) 30%, var(--darkred) 50%, var(--darkred) 70%, var(--darkred) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 10);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--lightpink) 0%, var(--lightpink) 30%, var(--lightpink) 50%, var(--lightpink) 70%, var(--lightpink) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 11);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--pink) 0%, var(--pink) 30%, var(--pink) 50%, var(--pink) 70%, var(--pink) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 12);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--hotpink) 0%, var(--hotpink) 30%, var(--hotpink) 50%, var(--hotpink) 70%, var(--hotpink) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 13);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--darkpink) 0%, var(--darkpink) 30%, var(--darkpink) 50%, var(--darkpink) 70%, var(--darkpink) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 14);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--redpurple) 0%, var(--redpurple) 30%, var(--redpurple) 50%, var(--redpurple) 70%, var(--redpurple) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 15);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--burgundy) 0%, var(--burgundy) 30%, var(--burgundy) 50%, var(--burgundy) 70%, var(--burgundy) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 16);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--lightpurple) 0%, var(--lightpurple) 30%, var(--lightpurple) 50%, var(--lightpurple) 70%, var(--lightpurple) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 17);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--neonpurple) 0%, var(--neonpurple) 30%, var(--neonpurple) 50%, var(--neonpurple) 70%, var(--neonpurple) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 18);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--darkpurple) 0%, var(--darkpurple) 30%, var(--darkpurple) 50%, var(--darkpurple) 70%, var(--darkpurple) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 19);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--darkblue) 0%, var(--darkblue) 30%, var(--darkblue) 50%, var(--darkblue) 70%, var(--darkblue) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 20);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--neonblue) 0%, var(--neonblue) 30%, var(--neonblue) 50%, var(--neonblue) 70%, var(--neonblue) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 21);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 30%, var(--blue) 50%, var(--blue) 70%, var(--blue) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 22);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--lightblue) 0%, var(--lightblue) 30%, var(--lightblue) 50%, var(--lightblue) 70%, var(--lightblue) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 23);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--blueaqua) 0%, var(--blueaqua) 30%, var(--blueaqua) 50%, var(--blueaqua) 70%, var(--blueaqua) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 24);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--darkaqua) 0%, var(--darkaqua) 30%, var(--darkaqua) 50%, var(--darkaqua) 70%, var(--darkaqua) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 25);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--darkgreen) 0%, var(--darkgreen) 30%, var(--darkgreen) 50%, var(--darkgreen) 70%, var(--darkgreen) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 26);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--green) 0%, var(--green) 30%, var(--green) 50%, var(--green) 70%, var(--green) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 27);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg, var(--mossgreen) 0%, var(--mossgreen) 30%, var(--mossgreen) 50%, var(--mossgreen) 70%, var(--mossgreen) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 28);
    width: 2.9vw;
    height: 6vw;
    background: linear-gradient(90deg,var(--brown) 0%, var(--brown) 30%, var(--brown) 50%, var(--brown) 70%, var(--brown) 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;
    bottom: 2vw;
    left: calc(var(--topplacement) * 29);
    width: 2.9vw;
    height: 6vw;
    
    background-color:  var(--grey);
    -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-color:  var(--grey);
    
  }
  
  #pencil-top31 {
    position: absolute;
    bottom: 2vw;
    left: calc(var(--topplacement) * 30);
    width: 2.9vw;
    height: 6vw;
    
    background-color: var(--black);
    -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%);
    background-color: var(--black);
  }
  .rcorners {
    border-radius: 60px 60px;
    background: white;
    padding: 20px;
    margin: 20px;
  }


  @media only screen and (max-width: 576px) {
    .spacetop {
        margin-top: 4rem;
    }
  }

  @media only screen and (min-width: 576px) {
    .spacetop {
        margin-top: 2.5rem;
    }
  }
  @media only screen and (min-width: 768px) {
    .spacetop {
        margin-top: 1.5rem;
    }
  }
  @media only screen and (min-width: 992px) {
    .spacetop {
        margin-top: 1rem;
    }
  }