:root {
	--green-note: url("note_green.png");
	--purple-note: url("note_purple.png");
	--red-note: url("note_red.png");
	--yellow-note: url("note_yellow.png");
}

body {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #d1e8ff;
}

a {
	text-decoration: none;
}

#menu_bar {
	width: 100%;
	height: 20%;
	margin: 40px 0%;
	background-image: url("menu_bar_keyboard.png");
	background-size: contain;
	background-repeat: repeat, no-repeat;
}

#menu_bar p {
	position: absolute;
	right: 15px;
	top: 7px;
	margin: 0;
}

#logo_background {
	position: absolute;
	height: 32%;
	aspect-ratio: 1 / 1;
	left: 40px;
	top: 5px;
	z-index: -1;
}

#logo_button {
	position: absolute;
	height: 30.5%;
	aspect-ratio: 1 / 1;
	left: calc(40px + .75vh);
	top: calc(5px + .75vh);
	cursor: pointer;
}

#button_row {
	position: absolute;
	right: 50px;
	top: 18%;
	white-space: nowrap;
}
@media all and (max-width: 1200px) {
	#button_row{
		left: 200px;
	}
}

@media all and (orientation: portrait) {
	#menu_bar {
		height: 17%;
		margin-bottom: 8%;
	}
	#logo_background{
		max-height: 21%;
	}
	#logo_button{
		max-height: 20%;
	}
}

#nav_button {
	position: relative;
	height: 70px;
	margin: 5px 10px;
}
#nav_button:hover {
	cursor: pointer;
}

#front_page_slogan {
	text-align: center;
	font-family: "Merienda", cursive;
	font-size: 24px;
	max-width: 90%;
	margin: 1% 5%;
}

#front_page_quote {
	text-align: center;
	color: darkblue;
	font-family: "Dancing Script", "Segoe Script", cursive;
	font-size: 34px;
	font-size-adjust: 0.35;
	max-width: 60%;
	margin: 1% 20% 3% 20%;
}

#two_column_content {
	margin: 20px 10% 20px 10%;
	display: flex;
}

#column {
	width: 40%;
	float: left;
}

.form_element {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
}
label {
	display: flex;
	width: 30%;
	align-items: left;
}
input {
	display: flex;
	align-items: right;
	width: 100%;
	margin: 10px;
}
textarea {
	width: 100%;
	height: 125px;
	margin: 10px;
}

iframe {
	border: 1px darkgray solid;
}

.footer {
	position: relative;
	width: 100%;
	height: 15%;
	background-color: #B1B1B1;
	display: inline-flex;
	justify-content: space-between;
	align-items: stretch;
}
.footer div {
	max-width: 100%;
	bottom: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	font-size: 14px;
}
#center_footer_div {
	bottom: 0;
	margin: 0;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	text-align: center;
	font-size: 14px;
}
#center_footer_div p {
	margin: 0;
}

@media all and (orientation: portrait) {
	.footer {
		height: 8%;
	}
}
@media all and (orientation: landscape) {
	.footer {
		height: 18%;
	}
}