.lw { 
  font-size: 60px;
  font-family: 'Arvo';
  color:  white;
  text-align: center;
}

body {
  background-color: #36A1D4;
}

canvas {
 border-radius: 24px;
 box-shadow: 2px 2px 8px #000000; 
}
.speed {
	display:inline-block;
	font-family:Arvo;
	color:white;
	font-size:25px;
}
.control-panel {
 border-radius: 24px;
 box-shadow: 2px 2px 8px #000000;	
 float:left;
 width:20%;
}

.algorithms {
 border-radius: 24px;
 box-shadow: 2px 2px 8px #000000;	
 float:right;
 width:20%;
 display:inline;
}

.sort {
	display:none;
}
.button {
	background-color: #E67235;
	width: auto;
	height: 40px;
	color:white;
	font-family:Arvo;
	font-size:20px;
	text-align:center;
	transition-duration:0.1s;
	display:inline;
}

.button:hover {
	background-color: rgb(180,65,42);
	transition-duration:0.1s;
}

.data {
	color:white;
	font-family:Arvo;
	font-size:20px;
	text-align:center;	
}

p.data {
	display: inline-block;
	text-align:center;
}

.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: auto; /* Full-width */
  height: 20px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}