* {
  margin: 0;
  padding: 0;
  
}
header{
	background-color:#C4C4C4;
	width:100%;
	height:5%;
}
nav {
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  font-family: Verdana;
  font-size:20px;
  font-weight:600;
  
}
nav ul {
	
	list-style-type: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background-color: white;
	height:10%;
	
	
}

nav li {
	display: inline-block;
	color: #0A0078;
	padding: 14px;
	text-decoration: none;
	margin-right:20px;
	
}
nav a{
	color:black;
	text-decoration:none;
}

nav li a:hover {
		background-color:white;	
		color: #690000;
		transition: color 0.3s ease;
		
}
body{
	background-color:#C4C4C4;
}
html, body {
  height: 100%;
   }
footer{
	text-align:center;
	cursor:default;
}
footer a{
	text-decoration:none
}
a{
	
}
nav a:visited{
	color:#0A0078;
	
}
.grid {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
}
.grid-fixed {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-gap: 10px;
}
.box {
	
	border: 2px solid #000;
    margin: 3%;
    padding: 1%;
    color: #ffffff;
	box-shadow: 10px 10px 10px black;	
	background-color:black;
	font-size: 18px;
	font-family:"Comic Sans MS"
}
/* Media Query for Mobile Viewport */
@media screen and (max-width: 480px), print {
	.grid {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0px;
    }
  
}