html, body {
  padding: 0;
  margin: 0;
  font-family: monospace;
}

button {
  font-family: monospace;
  border: 0;
  outline: none;
  cursor: pointer;
  transition: 0.2s;
}

input {
  outline: none;
  font-family: monospace;
  font-size: 2vh;
  padding: 1vh;
  margin: 2.75vh 0 0 0;
}

nav button, nav p {
  font-size: 2vh;
  padding: 1vh;
  margin: 2.75vh 0 0 0;
}

#solverButtons button {
  background-color: lightgray;
}

#solverButtons button:hover {
  background-color: #FF652F;
}

#solverButtons #stopAlg { background-color: #FF652F; }

#solverButtons #stopAlg:hover { background-color: lightgray; }

#clickableColors button {
  box-shadow: inset 0 -0.75vh 0 0 rgba(0, 0, 0, 0.5);
}

#clickableColors button:not(.selected):hover {
  box-shadow: inset 0 -1vh 0 0 rgba(0, 0, 0, 0.5);
}

#clickableColors .selected {
  cursor: default;
  box-shadow: none;
}

#wall { background-color: lightgray; }

#eraser { background-color: #747474; color: white; }

#start { background-color: #14A76C; }

#end { background-color: #FF652F; }

#path { background-color: #022449; color: white; }

#explored { background-color: #FFCB9A; }

#visited { background-color: #C38F5E; }

#unclickableColors button {
  cursor: default;
}

nav {
  background-color: #0B4A8E;
  width: 100vw;
  height: 10vh;
  overflow: auto;
}

nav > div {
  display: inline-block;
  padding-left: 1vw;
}

p {
  color: white;
  display: inline-block;
}

main {
  background-color: #272727;
  width: 100vw;
  height: 90vh;
  line-height: 0;
  text-align: center;
}

main button {
  background-color: #747474;
  width: 1vw;
  height: 2vh;
  margin: 0;
  padding: 0;
}

#colorDisplay {
  padding: 1vh;
  transition: 0.2s;
}