button{
position: relative;
float: right;
top: 548px;
margin: 7px;
color: white;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 30px;
height:25px;
width:25px;
outline: none;
z-index: 1;
cursor: pointer;
}

#bdownload{
position: absolute;
top: 40px;
margin: 25px 15px;
right: 1vw;
background-color: transparent;
border-style: solid;
border-color: black;
border-width: 7px;
border-radius: 20px;
height:40px;
width:40px;
z-index: 1;
outline: none;
background-image: url("download.png");
background-size: contain;
cursor: pointer;
}


#byellow{background-color: #FFFF14;margin-right: 15px;}
#bred{background-color: #EA0004;}
#bpink{background-color: #FF00B3;}
#bgreen{background-color: #00EA09;}
#bblue{background-color: #0022ED;}
#bcyan{background-color: #00DBFF;}
#borange{background-color: #FFA600;}
#brandom{background-image: url("random.jpg");background-size: contain;}


.slidecontainer{
  z-index: 1;
  position: relative;
  top: 550px;
  float: right;
  margin: 9px;
}


.p5Canvas{
position:absolute;
top: 0;
left: 0;
}


.slider {
  -webkit-appearance: none;
  width: 100px;
  height: 5px;
  border-radius: 7px;
  border-style: solid;
  border-color: black;
  border-width: 5px;
  background: transparent;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: black;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: black;
  cursor: pointer;
}