@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;600;700;800&display=swap');
/*Organization Elements*/
body {
	padding: 0;
	margin: 0;
	background-color: white;
}
header {
	margin-bottom: 0;
	background-color: #03E0D5;
	padding-top: 0.5em;
	position: fixed;
	width: 100%;
	height: 50px;
	padding-bottom: 0.4em;
	z-index: 10;
}
main {
	padding-top: 5.7em;
	z-index: 1;
}
nav {
	text-align: center;
	padding: 0;
	width: 70%;
	left: 50%;
    transform: translateX(-50%);
	font-weight: 600;
	visibility: hidden;
	position: fixed;
	margin-top: 5.7em;
	z-index: 9;
	transition: visibility 0s ease 0.2s;
}
footer {
	text-align: center;
	background-color: #A4F5EB;
	padding-bottom: 20px;
	border-top: 1px solid black;
	font-size: 1px;
}

/*Style Elements*/
* {
	font-family: 'Open Sans';
	font-size: 11pt;
}
a {
	text-decoration: none;
	color: #000000;
}
h2 {
	font-size: 20pt;
}
h3 {
	font-size: 17pt;
}
h4 {
	font-size: 14pt;
}
h5 {
	font-size: 11pt;
}


/*Sub-Elements*/
header img {
	/*display: inline;*/
	vertical-align: top;
	margin-left: 0.5em;
}
header a {
	display: inline;
	font-size: 24pt;
	font-weight: 800;
	margin-top: 0.5em;
	padding-bottom:0.5em;
}

footer a {
	color: black;
	text-decoration: underline;
}

nav ul{
	list-style-type: none;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}
nav li {
	width: 100%;
	border: 1px black solid;
	border-top: none;
	padding: 0.5em 0;
	background-color: #FF8080;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}


/*Actions*/
#menuButton:hover ~ nav{
	visibility: visible;
	transition: visibility 0s ease 0s;
}
nav:hover {
	visibility: visible;
	transition: visibility 0s ease 0s;
}
nav li:hover {
	background-color: #CF5050;
	color: #A4F5EB;
}
.ytFeedCard:hover {
	background-color: #DFA62E;
}
footer a:hover {
	color: #2277FF;
}


/*Classes*/
.cursorDefault {
	cursor: default;
}
.small {
	visibility: visible;
}
.medium {
	visibility: hidden;
}
.large {
	visibility: hidden;
}
.smallText {
	font-size: small;
}


/*IDs*/
#menuButton {
	margin: 63px auto 0 auto;
	margin-left: auto;
	margin-right: auto;
	background-color: #03E0D5;
	text-align: center;
	margin-bottom: 0;
	border-top: 1px black solid;
	border-bottom: 1px black solid;
	width: 100%;
	font-weight: 700;
	position: fixed;
	z-index: 10;
}
#footerNav ul li {
	display: inline;
	padding: 0 5px;
}




/*Medium*/
@media only screen and (min-width: 600px) {
	/*Organization Elements*/
	html {
		background-color: white;
	}
	main {
		padding-top: 6em;
	}
	nav {
		visibility: visible;
		margin-top: 0;
		width: 100%;
	}


	/*Style Elements*/



	/*Sub-Elements*/
	nav ul {
		margin: 63px auto 0 auto;
		margin-left: auto;
		margin-right: auto;
		background-color: #000000;
		text-align: center;
		margin-bottom: 0;
		border-top: 1px black solid;
		border-bottom: 1px black solid;
		width: 100%;
		position: fixed;
		z-index: 10;
		padding: 0;
		height: 1.7em;
		box-sizing: border-box;
	}
	nav li {
		display: block;
		float: left;
		padding: 0;
		margin: 0;
		height: 1.7em;
		width: 25%;
		border-left: none;
		border-right: none;
		box-sizing: border-box;
		border-top: 1px solid black;
	}
	nav li span {
		vertical-align: middle;
	}


	/*Actions*/
	


	/*Classes*/
	.small {
		visibility: hidden;
	}
	.medium {
		visibility: visible;
	}
	.large {
		visibility: hidden;
	}


	/*IDs*/
	#menuButton {
		width: 80%;
	}


}

/*Large*/
@media only screen and (min-width:1300px) {
	/*Organization Elements*/


	/*Style Elements*/
	


	/*Sub-Elements*/



	/*Links (Anchor)*/
	


	/*Classes*/


	/*IDs*/
	
	
}