* {box-sizing: border-box;}

body {
	color: white;
	background-color: #0f0f0f;
	font-family: "Arial";
	background-image: url("../resources/graphics/noise2.png");
	background-repeat: repeat;
}

@font-face {
  font-family: parker;
  src: url(../resources/fonts/Parker.ttf);
}

.container {
	display: grid;
	margin: auto;
	width: 80%;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
}

.item {
	font-family: parker;
	letter-spacing: 2px;
	background-image: url("../resources/graphics/woody.png");
	background-repeat: no-repeat;
	background-size: cover;
	border: 4px outset;
	border-radius: 5%;
	border-color: #995A48;
	margin: 5%;
}

.item img {
	width: 75%;
	border-radius: 5%;
	border: 4px inset;
	border-color: #C67C5F;
}

.logo {width: 25%; margin-left:8%; margin-right:8%;}
.gif {width: 20%;}

.item a:link{color: black;}
.item a:visited {color: black;}

a:link, a:visited {color: white;}

a {text-decoration: none;}

#HelloHeader{
	position: relative;
	text-align:center;
	margin-top: 1%;
	margin-bottom: 1%;
}

#Navigator {font-size: 2.5vw; position:relative; text-align:center;}

#foot{
	position: relative;
	text-align: center;
	font-size: 1vw;
}

@media only screen and (max-width:1220px){
	#Navigator {font-size: 3vw;}
	#HelloHeader{font-size: 4.8vw;}
	#foot {font-size: 1.5vw;}
	.container {grid-template-columns: 1fr 1fr 1fr 1fr;}
	.logo {width: 35%; margin-left:1%; margin-right:1%;}
	.gif {width: 25%;}
}

@media only screen and (max-width:960px){
	#Navigator {font-size: 4.5vw;}
	#HelloHeader{font-size: 6vw;}
	#foot {font-size: 2.5vw;}
	.container {grid-template-columns: 1fr 1fr 1fr;}
	.logo {width: 50%;}
	.gif {display: none;}
}

@media only screen and (max-width:768px){
	#Navigator {font-size: 6vw;}
	#HelloHeader{font-size: 7vw;}
	#foot {font-size: 4vw;}
	.container {grid-template-columns: 1fr 1fr;}
	.logo {width: 80%;}
}

@media only screen and (max-width:480px){
	#Navigator {font-size: 10vw;}
	#foot {font-size: 5vw;}
	.container {grid-template-columns: 1fr; width: 75%;}
}