body{
  background-image: url(https://figu.neocities.org/color/butterflies1.gif);
  overflow:hidden;
}

body:-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

#tl{
  width: 1440px;
  height: 740px;
}

#palate{
  width: 100%;
  font-family: 'PFStardustS';
  background-color: #fff7ce;
}

#trace{
  width: 560px;
  height: 540px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c5b1b0+0,eab4a6+29,e0cdb4+66,e0cdb4+100 */
background: linear-gradient(135deg,  rgba(197,177,176,1) 0%,rgba(234,180,166,1) 29%,rgba(224,205,180,1) 66%,rgba(224,205,180,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-radius: 18px;
  position: absolute;
  left: 150px;
  top: 70px;
}

::-webkit-scrollbar{width: 16px;}
::-webkit-scrollbar-track{background-color: #f5dcc0;}
::-webkit-scrollbar-thumb{background-color: #c5b1b0; border-radius: 10px;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
    width: 10px; background-color: #c5b1b0; 
}

#pane{
  width: 520px;
  height: 500px;
  overflow: scroll;
  overflow-x: hidden;
  background-color: tomato;
  position: absolute;
  left: 20px;
  top: 19px;
}

#b1{
  height: 200px;
  position: relative;
  left: 580px;
  bottom: 40px;
  transform: rotate(30deg);
}

#b2{
  height: 370px;
  position: relative;
  right: -500px;
  top: -100px;
  transform: rotate(-10deg);
  z-index: -2;
}

#b3{
  height: 700px;
  position: relative;
  right: 160px;
  bottom: -100px;
  transform: scaleX(-1);
  z-index: -1;
}

#p1{
  height: 900px;
  position: relative;
  left: 700px;
  bottom: 800px;
  transform: rotate(40deg);
  z-index: -3;
}

#p2{
  height: 360px;
  position: relative;
  left: 1000px;
  bottom: 1700px;
  transform: rotate(20deg);
  z-index: -3;
}

#s1{
  position: relative;
  left: -250px;
  bottom: 1290px;
  z-index: 11;
}

@font-face {
    font-family: 'PFStardustS';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2506-1@1.0/PFStardustS.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

#back{
font-family: 'PFStardustS';
font-size: 20px;
background-color: transparent;
border: none;
position: absolute;
top: 20px;
left: 120px;
border-radius: 50%;
  animation-duration: 1s; 
  animation-name: rainbowLink; 
  animation-iteration-count: infinite;
}

@keyframes rainbowLink {     
 0% { background-color: #ff2a2a55; }
 15% { background-color: #ff7a2a55; }
 30% { background-color: #ffc52a55; }
 45% { background-color: #43ff2a55; }
 60% { background-color: #2a89ff55; }
 75% { background-color: #20208255; }
 90% { background-color: #6b2aff55; } 
 100% { background-color: #e82aff55; }
}