body
{
	font-family: "American Typewriter";
}

html /*for get started button*/
{
	scroll-behavior: smooth 
}

.backgroundimage /*for viewroutes page*/
{
	background-image: url("wall.JPG");
	background-size: cover;
}

input[type="checkbox"]
{
	display: none;
}

.checkbox
{
	width: 100px;
	height: 80px;
	transform: rotate(90deg);
	opacity: 0.6;
}

.small_checkbox
{
	width: 40px;
	height: 40px;
	transform: rotate(90deg);
	opacity: 0.5;
}

.set_hold
{
	width: 40px;
	height: 40px;
	transform: rotate(90deg);
	opacity: 1;
}

.box
{
	width: 80px; /*specifies height and width of each hold image*/
	height: 100px;
}

.small-box /*smaller images for route overview page*/
{
	width: 40px;
	height: 40px;
	margin: 0%;
}

label input:checked ~ img /*when the input is checked, image opacity = 1*/
{
	opacity: 1;
}

.hold_row
{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0%;
}

.inline
{
	display: inline;
}

.form
{
	position: relative;
	top: 50px; 
	text-align: center;
	width: auto;
}

.center
{
	text-align: center;
}

.formq
{
	font-size: 20px;
	margin-bottom: 5%;
}

.big
{
	font-size: 25px;
	color: #990000;
}

.routes
{
	font-family: "Verdana";
	border-collapse: collapse;
	width: 75%;
	margin: auto;
}

.routes td, .routes th /*formatting for table rows*/
{
	border: 2px solid #000066;
	padding: 8px;
}

.routes tr
{
	background-color:  #e6ffff;
	opacity: 0.75;
}

.routes tr:hover /*change color of box when user hovers over it*/
{
	background-color: #ddd;
}

.routes th 
{
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #0000e6;
  text-align: left;
  color: white;
}

.drop 
{
  background-color: #0000e6;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: 1px #0000e6;
  cursor: pointer;
}

.dropdown 
{
  position: relative;
  display: inline-block;
  margin-bottom: 20%;
}

.dropcontent 
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropcontent button 
{
  color: black;
  padding: 12px 16px;
  display: block;
}

.dropcontent button:hover 
{
	background-color: #f1f1f1
}

.dropdown:hover .dropcontent 
{
  display: block;
}

.dropdown:hover .drop 
{
  background-color: #4d94ff;
}

.hidden
{
	display:none;
}

.topElement
{
	display:inline;
	margin: 2%;
}

#top
{
	display: flex;
	justify-content: center;
	align-items: center;

	border: 4px #6666ff solid;
	padding: 10px;
	background-color:  #ff99c2;
	width: 900px;
	margin: auto;
	margin-bottom: 2%;
	margin-top: 3%;
}

h1
{
	color:  #6666ff;
	font-size: 50px;
}

h3
{
	color: #0000e6;
	text-align: center;
}

h4
{
	color:  #6666ff;
	font-size: 35px;
	text-align: center;
}

#lower
{
	position: relative;
	top: 25px;
}

table
{
	position: relative;
}

.row_link::before 
/* I used this source to format the links from the viewroutes table to the routeview page:
https://stackoverflow.com/questions/4904938/link-entire-table-row */
{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5em;
}

.yellow-border 
{
	border-style: solid;
	border-width: 5px;
	border-color: yellow;
	padding: 10px;
	margin: auto;
	width: 330px;
}

.blue-border
{
	border-style: solid;
	border-color: blue;
	border-width: 8px;
	margin: 5%;
	background-color: #e6e6ff;
}

.back-button
{
	background-color: #b3b3b3; 
	color: black;
	font-family: "American Typewriter";
	font-size: 15px;
	padding: 12px 28px;
	position: relative;
	cursor: pointer; /*formats cursor when user hovers over it*/
}

.home-buttons
{
	margin-bottom: 100px;
}

.top-button
{
	position: relative;
	top: 25px;
	bottom: 25px;
	left: 25px;
}

.bottom-left
{
	position: relative;
	top: 50px;
	margin-bottom: 100px;
	left: 25px;
}

#logo
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
}

p
{
	font-size: 20px;
	width: 400px;
	text-align: center;
	margin: auto;
	color: #595959;
}

.all-items
{
	display: flex; /*positions items next to each other*/
	justify-content: center; 
	align-items: center;
}

.item 
{
	display:inline;
	margin: 2%; 
}

.rotate /*rotate images that are shown sideways*/
{
	transform: rotate(90deg);
}

#board /*sets size of image*/
{
	width: 300px;
}

button /*changes cursor when user hovers over it*/
{
	cursor: pointer;
}

.error-format
{
	position: relative;
	top: 75px;
}