* {
	box-sizing: border-box;
}

body {
	background-color: #ffffff;
	color: #666666;
	font-family: Verdana;
	background-image: linear-gradient(to bottom, #eeeeee, #ffffff);
	background-attachment: fixed;
	margin: 0;
}

header {
	background-color: #ba1c21;
	color: #ffffff;
	font-family: Georgia;
	grid-area: 1/2/2/8;
}

header h1 {
	line-height: 240%;
	background-image: url(images/dsu.jpg);
	background-position: right;
	background-repeat: no-repeat;
	padding-left: 1em;
	height: 72px;
	margin: 0;
}

header a {
	color: #ffffff;
	text-decoration: none;
}

nav {
	font-weight: bold;
	padding: 0;
	position: sticky;
	top: 0;
	background-color: #424242;
	grid-area:2/2/3/8;
}

nav a {
	text-decoration: none;
	color: #ffffff;
	padding: 1rem 0rem;
	display: block;
	text-align:center;
	transition: all 0.5s ease-out;
}

nav a:hover {
	background-color: #ba1c21;
}

nav ul {
	margin: 0;
	padding:0;
	list-style-type: none;
	display:flex;
	flex-flow: row nowrap;
}

nav ul li{
	width:100%;
}

main {
	padding: 1px 2em 1px 2em;
	display: block;
	background-color: #ffffff;
	grid-area:4/2/5/8;
}

form{
	display:grid;
	grid-template-rows:auto;
	grid-template-columns: 200px 1fr;
	gap: 0.75rem;
	width:100%;
}

label{
	padding:10px;
	text-align:right;
}

input{
	font-size: 1rem;
	padding: 10px;
	color: #666666;
	background-color: #fafafa;
	border-style:none;
}

input:focus{
	outline:none;
	background-color: #f0f0f0;
}

textarea{
	font-size: 1rem;
	padding: 10px;
	color: #666666;
	background-color: #fafafa;
	border-style:none;
}

textarea:focus{
	outline:none;
	background-color: #f0f0f0;
}

section {
	float: left;
	width: 33%;
	padding-right: 1em;
}

h2 {
	color: #424242;
	font-family: Georgia;
}

h3 {
	color: #ba1c21;
	font-weight: bold;
}

.dsu {
	color: #ba1c21;
	font-size: 1.2em;
}

video{
	float:right;
	margin-left: 2em;
}

table{
	margin:0 auto;
	border: 1px solid #424242;
	width: 100%;
	border-collapse: collapse;
}

td,th{
	border: 1px solid #424242;
	padding: 5px;
}

td{
	text-align: center;
}

tr:nth-of-type(even){
	background-color: #F3F3F3;
}

.text{
	text-align: left;
}

footer {
	font-size: 0.7em;
	text-align: center;
	font-style: italic;
	padding: 1em;
	background-color: #ffffff;
	grid-area:5/2/6/8;
}

#wrapper {
	display:grid;
	grid-auto-rows:minmax(0,auto);
	grid-template-columns:minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}

#redbar{
	background-color:#ba1c21;
	grid-area:1/1/2/9;
}

#greybar{
	background-color: #424242;
	grid-area:2/1/3/9;
}

#mySubmit{
	width:10rem;
	grid-column: 2/3;
}

#homehero {
	height: 300px;
	background-image: url(images/homehero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;
}

#studenthero {
	height: 300px;
	background-image: url(images/studenthero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;
}

#facultyhero {
	height: 300px;
	background-image: url(images/facultyhero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;
}

#alumnihero {
	height: 300px;
	background-image: url(images/alumnihero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;
}

#shophero {
	height: 300px;
	background-image: url(images/shophero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;
}

.clear {
	clear: both;
}

@media only screen and (max-width:1100px){
	#wrapper{grid-template-columns:minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);}
}

@media only screen and (max-width:900px){
	nav{grid-area:2/1/3/5;}
	nav ul{flex-flow: column nowrap;}
	#homehero{grid-area:2/5/3/8;	height:auto;}
	#studenthero{grid-area:2/5/3/8;	height:auto;}
	#facultyhero{grid-area:2/5/3/8;	height:auto;}
	#alumnihero{grid-area:2/5/3/8;	height:auto;}
	#shophero{grid-area:2/5/3/8;	height:auto;}
	section{float: none;	width: 100%; padding-right: 0px;}
	video{float:none; margin:0; width:100%; height:auto;}
}

@media only screen and (max-width:600px){
	header h1{background-image: none;	text-align: center;}
	nav{grid-area:2/1/3/9;}
	#homehero{display: none;}
	#studenthero{display: none;}
	#facultyhero{display: none;}
	#alumnihero{display: none;}
	#shophero{display: none;}
	video{float:none; margin:0; width:100%; height:auto;}
}