body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-y: hidden;
}

#header-wrapper{
	background: dodgerblue;
}

#header{
	margin:auto;
	width: 100%;
	display:flex;
	align-items: center;
	flex-wrap: wrap;

}
#title{
	display:inline-block;
	flex: 1;
	min-width:40%;

}

#title h1, #title h2 {
	display: inline-block;
}

#title h2 {
	margin-left:10px;

}

#nav{
	text-align: right;
	font-size: 12px;
	display:inline-block;
	color: white;
}

#menu{
	text-align:center;
}

#message {
	display: inline-block;
	color: white;
}


button{
	background: dodgerblue;
	color:black;
	border-radius:30px;
	height: 25px;
	color: white;
	font-weight: 600;

}
button:hover{
	background: yellow;
	color: black;

}

select, input{
	border-radius:30px;
	vertical-align: middle;
	height: 25px;
	background: dodgerblue;
	color: white;
	font-weight: 600;
	padding-left: 4px;

}

input[type=select]{
	height:25px;
}


input[type=text] {
	width: 25px;
	height:25px;
}

#speed-and-diagonal{
	display: inline-block;
}

#speed {
  -webkit-appearance: none;
  width: 75px;
  height: 15px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  direction: rtl
}

#speed:hover {
  opacity: 1;
}

#speed::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius:30px;
  background: darkblue;
  cursor: pointer;
}

#speed::-moz-range-thumb {
  width: 10px;
  height: 10px;
    border-radius:30px;
  background: #darkblue;
  cursor: pointer;
}

#speed-value{
	width:45px;
	display:inline-block;
	text-align:left;
}

#run:hover{
	
}

#menu a:link {
	color: white;
	text-decoration: none;
}
#menu a:visited{
	color: white;
}
#menu a:hover{
	color: yellow;
}
#menu a:active{
	color: white;
}

#page-wrapper{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}


#main-wrapper{
	background: dodgerblue;
	margin: auto;
	width: 100%;
	justify-content: center;
	align-items: center;
	flex: 1 1 auto;
	display:flex;
	flex-direction:column;
}

#main{
	width:100%;
	justify-content: center;
	align-items: center;
	display: flex;
}

#footer-wrapper{
	background: dodgerblue;
}

#footer{
	margin:auto;
	width: 100%;
	text-align: center;
	font-size: .75em;
	color: white;
	font-weight: bold;
}

.grid{
	display: flex;
	flex-wrap: wrap;
	height:100%;
}

.cell{
	border:1px solid black;
	background: dodgerblue;
	font-size: 7px;
	text-align: center;
	color: royalblue;
}

.main-button{
	width:105px;
	background: yellow;
	color:black;
}

.hidden{
	display: none;
}





@keyframes next {
	from {background-color: red;}
  	to {background-color: yellow;}
}

.cell.next{
	background: yellow;
	animation-name: next;
	animation-duration: ..3s;
}




@keyframes queued {
	from {background-color: yellow;}
  	to {background-color: dodgerblue;}
}


.cell.queued {
	background: dodgerblue;
	animation-name: queued;
	animation-duration: .3s;
}

@keyframes current {
	from {background-color: white;}
  	to {background-color: royalblue;}
}

.cell.current{
	background: royalblue;
	animation-name: current;
	animation-duration: .3s;

}


.cell.start {
	background: yellow;
}

.cell.end{
	background: red;
}


.cell.hill{
	background: grey;
}

.cell.wall{
	background: black;
}

@keyframes route {
	from {background-color: dodgerblue;}
  	to {background-color: white;}
}

.cell.route{
	background: white;
	animation-name: route;
	animation-duration: .3s;
}

.clearfix {
	overflow: auto;
}


@media (min-width: 769px){
	
	#header {
		width:90%;
	}
}