*{
	box-sizing:border-box;
}

body{
	font-family:Arial, Helvetica, serif;
	background-color:#3F9BF9;
}

header{
	text-align:center;
	color:#f4b942;
	background-color:#08090a;
}

h1{
	font-family:Georgia;
	font-size:250%;
	letter-spacing:.2em;
	padding:.5em;
	font-size-adjust:auto;
}

h2{
	font-size:110%;
	font-family:Georgia;
	letter-spacing:.2em;
}

hr{
	padding:.5px;
}

nav{
	font-family:Arial;
	font-weight:bold;
	text-align:center;
	padding:10px;	
	margin:0px 0px 5px 0px;
}

nav a{
	margin:8px;
	padding:2px;
	text-decoration:none;
	border:1px double #08090a;
}

nav a:link{
	color:#08090a;
}

nav a:hover{
	color:#687892;
	background-color:#52d2ff;
	font-size: 110%;
	box-shadow: 4px 4px 10px #08090a;
	border:none;
}

nav a:visited{
	color:#6800FF;
}

nav ul{
	margin:0px;
	padding:0px;
}

nav li{
	list-style-type:none;
}

h1{
	margin:0px;
}

ul{
	list-style-type:none;
	padding:0px;
}

main{
	padding: 5px 2% 5px 2%;
	display:block;
	overflow:auto;
}

div{
	padding:5px;
	text-align:center;
	line-height:1.5;
}

section{
	clear:both;
	background-color:#687892;
	margin:10px;
	box-shadow:2px 2px 5px #08090a;
}

p{
	font-size: 110%;
}

footer{
	font-family:TimesNewRoman;
	text-align:center;
	font-size:80%;
	font-style:italic;
	padding:10px;
	color:#f4b942;
	background-color:#08090a;
}

footer a{	
	margin:10px;
}

footer a:visited{
    color:#6457A7;
}

small a{
	color:#000000;
}

form{	
	margin:auto;
	text-align:left;
	display:flex;
	flex-flow: column nowrap;
}

table {
	margin:auto;
	font-family:arial;
	width: 50%;
	background-color:#52D2FF;
	box-shadow:3px 3px 5px #000000;
}

th, td{
	text-align:center;
}

tr:nth-child(even){
	background-color:#878787;
}

table{
	border: dotted;
}

th{
	border:1px solid #000000;
	border-radius:10px;
}

#wrapper{
	background-color:#63d2ff;
	background-repeat:no-repeat;
	background-image:linear-gradient(#52D2FF, #687892);
	padding:0px;
	box-shadow:1px 1px 4px;
}

#selfHero{
	margin:auto;
	height:158px;
	width:167px;
	background:url('media/me.jpg') no-repeat;
	background-size:100% 100%;
	border:3px outset #687892;
}

#sportsHero{

	background:url('media/cornerstone.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	display:inline-block;
	box-shadow: 3px 3px 5px #000000;
}

#mapHero{
	margin:auto;
	background:url('media/map.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	box-shadow: 3px 3px 5px #000000;
	transition: opacity .2 seconds;
}

#logoHero{
	width:150px;
	height:150px;
	background:url('media/logo.png');
	background-repeat:no-repeat;
	background-size:50%;	
	display:inline-block;
}

#valorantHero{
	height:222px;
	width:336px;
	background:url('media/valorant.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	float:left;
	overflow:auto;
}

#spedHero{
	width:100px;
	height:100px;
	background:url('media/sped.png');
	background-repeat:no-repeat;
	background-size:cover;	
	display:inline-block;
}

#jrhigh{
	width:185px;
	height:250px;
	background:url('media/jrhigh.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	float:left;
	overflow:auto;
	border:3px outset #52D2FF;
	margin-bottom:10px;
}

#hschool{
	width:300px;
	height:400px;
	background:url('media/hschool.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	float:right;
	overflow:auto;
	border:3px inset #52D2FF;
	margin-bottom:10px;
}

#awards{
	width:250px;
	height:400px;
	background:url('media/awards.jpg');
	background-repeat:no-repeat;
	background-size:100% 100%;
	display:inline-block;
	border:3px outset #52D2FF;
}

#youtube{
	width:50px;
	height:50px;
	background:url('media/YT.png');
	background-repeat:no-repeat;
	background-size:100% 100%;
	display:inline-block;	
}

#tiktok{
	width:50px;
	height:50px;
	background:url('media/TT.png');
	background-repeat:no-repeat;
	background-size:100% 100%;
	display:inline-block;	
}

#twitch{
	width:50px;
	height:50px;
	background:url('media/T.png');
	background-repeat:no-repeat;
	background-size:100% 100%;
	display:inline-block;
}

#bottomNav a:hover{
	color:#f4b942;
	background-color:#687892;
	font-size:110%;
}

#bottomNav{
	text-align:center;
}

#map{
	min-height:2333px;
	min-width:3532px;
	background-image:url('media/map.jpg');

	margin:0;
}

.fsHidden{
	color:#000000;
	visibility:hidden;
}



@media (min-width: 600px){
	body{
		margin:4px;
	}
	
	hr{
		display:none;
	}	
	
	nav li{
		display:block;
		margin:5px;
		padding:1px;
	}
	
	form{
		width:50%;
		display:grid;
		gap:1em;
		grid-template-rows:auto;
		grid-template-columns:1fr 2fr;
	}
	
	button{grid-row:auto; grid-column:2/3;}
	
	#bottomNav{
		display:none;
	}
	
	#jrhigh, #hschool{
		display:none;
	}
	
	#sportsHero{
		width:40%;
		height:15%;
	}
	
	#mapHero{
		width:55%;
		height:18%;
	}
}




@media (min-width: 1024px)
{
	#wrapper{
		margin:auto;
		width:80%;
		display:grid;
		grid-template-columns:33% 34% 33%;
		grid-template-rows:auto;
	}

	header{grid-row:1/2; grid-column:1/4;}
	nav{grid-row:2/3; grid-column:1/4;}	
	#selfHero{grid-row:3/4; grid-column:2/3;}	
	main{grid-row:4/5; grid-column:1/4;}
	form{
		grid-row:5/6;
		grid-column:1/4;	
	}
	#bottomNav{grid-row:6/7; grid-column:1/4; display:inline-block;}
	footer{grid-row:7/8; grid-column:1/4;}
	
	hr{
		display:block;
	}
	
	nav li{
		display:inline-block;
	}
	
	#jrhigh, #hschool{
		display:block;
	}
	
	#sportsHero{
		width:220px;
		height:160px;
	}
	
	#mapHero{
		width:495px;
		height:264px;
		display:grid;
		grid-template-columns:33% 34% 33%;
		grid-template-rows:33% 34% 33%;
	}
	#mapHero .fsHidden{grid-row:2/3; grid-column:2/3;}
	#mapHero:hover{
		opacity:65%
	}
	#mapHero:hover .fsHidden{
		visibility:visible;		
	}
}