/* Colors
*  color: #000000
*  color: #40D330
*  color: #38912E
*  color: #095A00
*  path: #52FF44
*  blocks: #556A54
*/

@import url('https://fonts.googleapis.com/css?family=VT323');

html, body {
	margin:0;
  height: auto;
  overflow: visible;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #C9C9C9;
  width: 100%;
	box-sizing: border-box;
}

#header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFFFFF;

  font-family: "VT323";
  color: #40D330;
  padding: 0 0 5px 0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

#header h1 {
  margin: 0;
  font-size: 350%;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

a, a:visited {
  padding: 5px 10px;
  color: #259319;
  font-size: 150%;
}

a:hover {
  color: #8AF97E;
}

#content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10px;
  padding: 30px;
  height: auto;
	width: 100%;
	overflow: scroll;
	box-sizing: border-box;
}

#main {
  width: 700px;
  border-radius: 10px;
  padding: 20px;
  background-color: #FFFFFF;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.grid {
  font-family: "VT323";
}

.sidebar {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin-right: 20px;

  padding: 30px;
  font-family: "VT323";
  color: #68AB63;

  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.sidebar h2 {
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 280%;
  text-align: center;
}

.sidebar p {
  margin: 0;
  font-size: 150%;
  text-align: left;
}

.sidebar .instructions {
  margin-bottom: 20px;
}

.sidebar .options {
  flex: 1;
  font-size: 150%;
}

.sidebar .options select {
  margin: 10px 0px;
  width: 100%;
  font-size: 80%;
}

select:focus, select:active, button:focus, button:active {
  outline: none;
}

#new-maze-btn {
  width: 100%;
  font-size: 150%;
}

#grid {
  width: 100%;
  height: 100%;
}

.grid-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.grid-cell, .lgd-cell {
  border: 1px solid #0C7800;
}

.legend ul {
  margin: 15px 0 15px 10px;
  padding: 0;
}

.legend li {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 0 5px 0;
  padding: 0;
  list-style: none;
}

.legend li p {
  margin: 0;
  padding: 0;
  font-size: 90%;
  color: #148707;
}

.lgd-cell {
  width: 20px;
  height: 20px;
  margin-right: 20px;
}

.end {
  background-color: #FF5A36;
}

.start {
  background-color: #E337FF;
}

.closed {
  background-color: rgba(93, 124, 255, 0.5);
}

.path {
  background-color: #52FF44;
}

.block {
  background-color: #556A54;
}

.clear { clear: both; }

@media (max-width: 1100px) {
	#content {
	  display: flex;
	  flex-direction: column;
		align-items: center;
	}

	.sidebar {
		max-width: 700px;
		margin-right: 0;
		margin-bottom: 20px;

		flex-direction: row;
		flex-wrap: wrap;
	}

	.sidebar .instructions {
		margin: 0 20px 20px 0;
	}

	#main {
		width: 85%;
	}
}