h1 {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

h5 {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

p {
	font-family: Arial, Helvetica, sans-serif;
}

body {
	background-color: rgb(240,240,240);
}

.footer {
	text-align: center;
	color: rgb(128,128,128);
}



#canvas {
  display: block;
  margin: 2rem auto;
  border: solid 1px black;
}

#button-container {
	width: 100%;
	text-align: center;
}


#algorithm-buttons {
	width: 100%;
	text-align: center;
}

#algorithm-menu {
	background-color: white;
	color: black;
	border: 2px solid #343A40;
	padding-top: 16px;
	padding-bottom: 16px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	border-radius: 4px;
	transition-duration: 0.4s;
	cursor: pointer;
}
#algorithm-menu:hover {
	background-color: #343A40;
    color: white;	
	
}

.button {
	background-color: white;
	color: black;
	border: 2px solid #343A40;
	text-align: center;
	padding: 16px 32px; 
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	border-radius: 4px;
	transition-duration: 0.4s;
	cursor: pointer;
}

.button-paused {
	background-color: #343A40;
	color: white;
}

.button:hover {
	background-color: #343A40;
    color: white;	
}

.colorcontainer {
	width: 100%;
	text-align: center;
}

/* SLIDER  https://www.w3schools.com/howto/howto_js_rangeslider.asp */
#slider-container {
	width: 100%; /* Width of the outside container */
	text-align: center;
  }
  
  /* The slider itself */
  .slider {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 50%; /* Full-width */
	height: 25px; /* Specified height */
	background: #d3d3d3; /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: opacity .2s;
	border-radius: 4px;
	margin-top: 25px;
	cursor: pointer;
  }

  /* Mouse-over effects */
.slider:hover {
	opacity: 1; /* Fully shown on mouse-over */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 25px; /* Set a specific slider handle width */
	height: 25px; /* Slider handle height */
	background: #343A40; /* Black background */
	cursor: pointer; /* Cursor on hover */
	border-radius: 4px;
  }
  
  .slider::-moz-range-thumb {
	width: 25px; /* Set a specific slider handle width */
	height: 25px; /* Slider handle height */
	background: #343A40; /* Black background */
	cursor: pointer; /* Cursor on hover */
	border-radius: 4px;
  }