/* the below code makes the container display properly without padding around it */

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

.container {
	width: 60%;
	min-width:900px;
	margin: 0 auto;
	padding: 0;
	min-height: 100vh;
	display:flex;
	flex-direction:column;
	align-items: stretch;
}

/* main content and navigation */
.maincont {
	display: flex;
	flex-direction: row;
	min-width:900px;
	align-items: stretch;
	min-height: 50vh;
	flex: 9;
}

/* section styling */

.container {
	background-color:lightgray;
}

.navigation {
	flex:1;
	background-color:lightpink;
}

.content {
	flex:4;
	background-color:darkseagreen;
}

.footer {
	background-color:lightblue;
}

/* skip buttons */

.skip-to-nav-link, .skip-to-content-link {
  height: 30px;
  width:100%;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color:lightyellow;
}

.skip-to-nav-link {
  display:none; /* hide unless mobile... */
}

.skip-to-content-link {
  top:-1px;
  left:-1px;
  transform: translateY(-100%);
  transition: transform 0.3s;
  position:absolute;
}

.skip-to-content-link:focus, .skip-to-nav-link:focus {
  transform: translateY(0%);
}

@media only screen and (max-width: 900px) {

	.skip-to-nav-link {
  		display:block;
	}

	.container {
		min-width:initial;
		width:100%;
	}

	.maincont {
		flex-direction:column;
		min-width:initial;
		width:100%;
	}

	.content {
		order:1;
	}

	.navigation {
		order:2;
	}

}