* {
  font-family: 'Playfair Display', serif;
}

body {
  background-color: #FFFAE3;
  font-family: 'Playfair Display', serif;

}

.page-container {
  max-width: 100%;
}

.logo-container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
}

#input-form {
  display: inline-flex;
  flex-direction: column;
}

select {
  margin-bottom: 1em;
  background-color: #5D576B;
  color: white;
  font-size: 18px;
  height: 35px;
  text-shadow:5px 1px 7px #263666;

}

#zip {
  margin-bottom: -0.25em;
  text-align: center;
  font-size: 30px;
  height: 50px;
  color: #5D576B;

}

#radius {
  margin-bottom: 1em;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;

}

#submit {
  font-size: 30px;
  height: 50px;
  width: auto;
  color: #5D576B;
}

#myButton {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: white;
  border: 4px solid #5D576B;
  height: 3em !important;
  width: 7em !important;
  margin-bottom: -3em;
  display: none;
}

#canvas {
  align-self: center;
  max-width: 100%;
}

.myButton {
	-moz-box-shadow:inset 0px -8px 10px 3px #29bbff;
	-webkit-box-shadow:inset 0px -8px 10px 3px #29bbff;
	box-shadow:inset 0px -8px 10px 3px #29bbff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	background-color:#2dabf9;
	-moz-border-radius:34px;
	-webkit-border-radius:34px;
	border-radius:34px;
	display:none;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:28px;
	padding:9px 35px;
	text-decoration:none;
	text-shadow:5px 1px 7px #263666;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	background-color:#0688fa;
}


.results {
  display: none;
  text-align: center;
  justify-content: center;
  font-size: 15px;
  color: #5D576B;
}

.final-buttons {
  font-size: 20px;
  margin: 5px;
  background-color: #5D576B;
  color: white;
}

.directions {
  color: #5D576B;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
}

#map {
  height: 300px;
  width: 700px;
  margin: 10px;
  border: 10px solid #5D576B;
 }