body {
	background-color: #f6f6f6;
	color: #000000;
}

a:link {
	color: #0000FF;
}

a:visited {
	color: #0000FF;
}
a:hover {
	color: #000000; text-decoration: none;
}

.header{
	position: fixed; top: 0px;
	justify-content: space-between;
	display: flex;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 20px;
	width: 100%;
}

.instruction{
	font-family: 'DotGothic16', sans-serif;
}

#header_left{
	padding-left: 40px;
	font-family: 'DotGothic16', sans-serif;
	font-size: 20pt;
	line-height: 30px;
}

#header_right{
	padding-right: 40px;
	font-family: 'DotGothic16', sans-serif;
	font-size: 14px;
}

/*The code below was made by amygoodchild and edited by me - available at p5.org*/
.mySliders{
	background-color: transparent;
	-webkit-appearance: none;
}

.mySliders::-webkit-slider-runnable-track {
  background: #000000;
  height: 2px;
  -webkit-appearance: none;
  
  /* Turns the cursor into the hand pointer icon when hovering over the slider  */
  /* Same effect can be achieved using .style('cursor', 'pointer') in p5 */
  cursor: pointer;
  
}

.mySliders::-webkit-slider-thumb {

  width: 7px;
  height: 14px;
  stroke: white;
  stroke-width: 1px;
  background: #000000;
  cursor: pointer;
  -webkit-appearance: none;
  
  /* negative top padding moves it up */
  margin-top: -7px;

  
  /* Border radius gives rounded corners, if they're big enough, you end up with circles */
  border-radius: 0px;
  
}