Update main.css

history website/main.css

@@ -9,7 +9,20 @@ body {
   padding: 0;
   height: 100%;
   width: 100%;
+  font-family: 'Press Start 2P', cursive;
 }
+/*-------loading game page-----*/
+div.loader {
+  background-color: black;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: 999;
+  background-image: url(images/loader.gif);
+  background-repeat: no-repeat;
+  background-position: 100% 100%;
+}
+
 
 /*------Cover/Title------*/
 div.cover {
@@ -18,23 +31,27 @@ div.cover {
   height: 100%;
   width: 100%;
   position: relative;
-  background-attachment: fixed;
-  background-image: url(images/introbg.jpg);
-  overflow: auto;
-
+  background-color: white;
+  background-image: url(images/wallpaper4.jpg);
+  background-repeat: no-repeat;
+  background-position: center;
+  overflow: hidden;
 }
 
-p.cover {
+p.cover1 {
   margin: 0;
   padding: 0;
   right: 0;
+  top: 30%;
   text-align: center;
-  height: 100%;
+  height: 30%;
+  vertical-align: middle;
   position: absolute;
   width: 40%;
-  /*border: 5px solid red;*/ <-------border of title/quo tes place
+  border: 1px solid red; */<-------border of title/quo tes place
   font-size: 30px;
-
+  color: white;
+  background-color: black;
 }
 
 /* nav Bar */
@@ -46,19 +63,38 @@ p.cover {
     height: 50px;
     width: 100%;
     border: 1px dotted blue;
-    background-color: purple;
-    z-index: 1;
+    background-image: url(images/wallpaper2.jpg);
+    background-size: cover;
+    border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+    z-index: 2;
 }
 
 ul.header li {
   margin: 0;
   text-align: center;
-  color: white;
-  padding: 20px;
+  color: #EF7126;
+  padding: 0;
   display: inline-block;
+  border: 10px solid black;
+  text-shadow: 2px 3px black;
 }
 
+ul.header a:link {
+  color: #EF7126;
+  text-decoration: none;
+}
+ul.header a:visited {
+  color: #EF7126;
+  text-decoration: none;
+}
+ul.header a:active {
+  color: #473E3F;
+  text-decoration: none;
+}
+ul.header a:active {
 
+}
 
 
 /*------intro of Mr.Sewell segment------*/
@@ -68,7 +104,10 @@ div.intro {
   height: 75%;
   width: 100%;
   position: relative;
-  background-color: purple;
+  background-image: url(images/wallpaper1.jpg);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  z-index: 1;
 }
 
 p.intro{
@@ -79,6 +118,7 @@ p.intro{
   height:98%;
   width:40%;
   background-color: red;
+  opacity: .2;
 }
 
 p.intro2 {
@@ -89,6 +129,7 @@ p.intro2 {
   width: 58%;
   background-color: pink;
   position: absolute;
+  opacity: .2;
 }
 
 
@@ -98,10 +139,24 @@ p.intro2 {
 div.music {
   margin:0;
   padding: 0;
-  height: 30%;
+  height: 40%;
   position: relative;
   width: 100%;
-  background-color: grey;
+  background-image: url(images/wallpaper2.jpg);
+  background-repeat: no-repeat;
+}
+
+
+p.music1 {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  background-color: black;
+  color: white;
+  left: 30%;
+  top: 50%;
+  height: 10%;
+  width: 40%;
 }
 
 
@@ -115,9 +170,11 @@ div.chapters {
   padding:0;
   height: 100%;
   width: 100%;
-  background-color: blue;
+  background-image: url(images/wallpaper3.jpg);
+  background-size: contain;
   position: relative;
   top: 0;
+  z-index: 6;
 }
 
 p.chapter1 {