Decrease the size of several images.

In addition, the header image now exists in three sizes. The right size is selected using CSS media queries.

css/style.css

@@ -96,7 +96,7 @@ a:visited {
 	height: 100%;
 	width: 100%;
 
-	background-image: url("../img/header/background.jpg");
+	background-image: url("../img/header/background-1080.jpg");
 	background-size: cover;
 	background-repeat: no-repeat;
 
@@ -116,55 +116,18 @@ a:visited {
 
 /*--------------------------------------------------------*/
 
-/*
+@media only screen and (max-width: 800px) {
-@media only screen and (max-width: 1200px) {
 	#main-header {
-		height: 650px;
+		background-image: url("../img/header/background-800.jpg");
 	}
 }
 
-@media only screen and (max-width: 880px) {
-	#main-header {
-		height: 500px;
-	}
-
-	#main-header-title {
-		height: 60%;
-		width: 60%;
-
-		left: 20%;
-		top: 20px;
-	}
-}
-
-
 @media only screen and (max-width: 480px) {
 	#main-header {
-		height: 350px;
+		background-image: url("../img/header/background-480.jpg");
-	}
-
-	#main-header-title {
-		height: 75%;
-		width: 75%;
 	}
 }
 
-@media only screen and (max-width: 360px) {
-	#main-header {
-		height: 300px;
-	}
-
-	#main-header-title {
-		height: 70%;
-		width: 70%;
-
-		left: 15%;
-		top: 5%;
-	}
-}
-*/
-
-
 /*--------------------------------------------------------*/
 /* CONTENT
 /*--------------------------------------------------------*/