styles.css

html, body {
	height: 100%;
	width: 100%;
	font-family: "Poppins", sans-serif;
	overflow-x: hidden;
}

html {
    overflow-y: hidden;
}

button {
	padding: 4px 16px;
	font-family: "Lato", Arial, sans-serif;
	border-radius: 5px;
	border: none;
}

.hidden {
	display: none !important;
}

.line {
	display: inline-block;
}

#banner {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;

	text-align: center;
	padding: 1vh;
	width: 100%;
	font-size: .8rem;

	color: white;
	background-color: #333;
	border-bottom: .5em solid #272727;

	-moz-transition: bottom 1s ease-in-out;
	-o-transition: bottom 1s ease-in-out;
	-webkit-transition: bottom 1s ease-in-out;
	transition: bottom 1s ease-in-out;

	pointer-events: none;
}

@media screen and (min-height: 668px) {
	#banner {
		font-size: 1rem;
	}
}

#banner div {
	padding: .5em 1em;
	flex-grow: 1;
}

#banner span {
	margin: 0;
}

#banner a {
	pointer-events: auto;
}

#banner button {
	pointer-events: auto;
	margin: .5em;
	height: 2em;
	background: #f44336;

}

.disabled {
	background-color: #DCDCDC !important;
	color: #afafaf !important;
	border-color: #afafaf !important;
	cursor: default;
}

#landing {
	width: 100%;
	min-height: 100vh;
	overflow: visible;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#landing h1 {
	max-width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	padding: 10px;
	font-size: 2em;
}

@media screen and (min-width: 903px) {
	#landing h1 {
		font-size: 3em;
	}
}

#landing h1 img {
	height: 2em;
}

#landing h1 .accent {
	color: #3eb375;
}

#landing .content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media screen and (min-width: 768px) {
	#landing .content {
		width: 730px;
	}
}

#landing .content h2 {
	font-size: 1.75em;
	color: #3eb375;
}

@media screen and (min-width: 401px) {
	#landing .content h2 {
		font-size: 2em;
	}
}

#landing .content p {
	padding-top: 10px;
	font-size: 1.2em;
}

#landing hr {
	border-color: lightgray;
	margin-bottom: 0;
}

#landing .content > *:not(hr):not(.buttons) {
	padding: 20px;
}

#landing button {
	margin-top: 32px;
	font-size: 20px;

	color: white;
	background-color: #3eb375;

	border: 2px solid #3eb375;
	margin: 20px;
}

#landing button:nth-of-type(2) {
	color: #3eb375;
	background-color: white;
}

#landing button:not(.disabled):hover {
	transform: scale(1.05);
	transition: transform 0.35s ease-in-out;
}


#landing .buttons {
	display: flex;
}

#main {
	line-height: 1.5em;
	display: flex;
	width: 100%;
	flex-direction: column;
	background-color: #3eb375;
	min-height: 0;
}

/* change layout to column at screens at least 968px in width */
@media screen and (min-width: 968px) {
	#main {
		flex-direction: row;
		height: 100vh;
	}

	#search {
		padding: 50px 0 50px 50px;
	}

	#graph {
		padding: 50px 50px 50px 0;
	}

}

#main h2,
#main h3{
	color: white;
}

.content-header {
	padding: 0 15px;
}

hr {
	border: 0;
	border-top: 1px solid white;
	width: calc(100% - 30px);
	margin: 0 auto;
}

#search {
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	padding: 20px;
	justify-content: start;
}

#search form {
	display: flex;
	width: 100%;
	flex-flow: column nowrap;
	align-items: center;
}

#search form select {
	padding: 10px;
	border: none;
	border-radius: 5px;
}

#search form select option {
	display: flex;
}

.form-item {
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	padding: 15px;
}

.form-item label {
	font-size: 1.5em;
	color: white;
}

.form-item input {
	border: none;
	width: 100%;
	border-radius: 5px;
	padding: .5em;
}

.double-form-item {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
}

#search-button {
	font-size: 1.5em;
	width: calc(100% - 30px);
	color: white;
	background-color: #337ab7;
}

#sections {
	display: flex;
	flex-flow: column nowrap;
	padding: 15px;
}

#sections > h2 {
	padding: 0;
}

#sections > hr {
	/* make hr spaced away from the result pane */
	width: 100%;
	margin-bottom: 1em;
}

#select_result {
	background-color: white;
	max-height: 85vh;
	overflow: auto;
	border-radius: 5px;
	padding: 10px;
}

/* clamp results screen size on desktop */
@media screen and (min-width: 968px) {
	#select_result {
		max-height: 24vh;
	}
}

#select_result li {
	margin-left: 5%;
	padding: 5px;
}

#select_result p {
	color: #a5a5a5;
}

#sections ul{
	color: white;
}

#graph {
	display: flex;
	flex-direction: column;
	justify-items: start;
	padding: 20px;
	flex: 1;
}

#chart {
	color: white;
	padding: 15px;
}

#share {
	display: none;
}

/* hide grade-key until graph is displayed */
#grade-key {
	display: none;
	line-height: 1.2em;
	padding: 15px 0;
}

#grade-key li {
	color: white;
}

#grade-key li .accent {
	font-weight: bold;
}

/* make main content thicker on mobile devices */
@media screen and (max-width: 548px) {
	.content-header {
		padding: 0;
	}

	#main hr {
		width: 100%;
	}

	.form-item {
		padding: 15px 0;
	}

	.double-form-item .form-item:nth-child(1) {
		padding: 15px 15px 15px 0;
	}

	.double-form-item .form-item:nth-child(2) {
		padding: 15px 0 15px 15px;
	}

	#search-button {
		width: 100%;
	}

	#sections {
		padding: 5px 0;
	}

	#chart {
		padding: 15px 0;
	}
}

#footer {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	color: white;
	background-color: #333f50;
	font-family: "Lato", Arial, sans-serif;
}

#footer > * {
	text-align: center;
}

#footer a {
	color: #3eb375;
}