/*Global Body*/
*{
  margin: 0px;
  padding: 0px;

}
body{
  background: #C6C6C6;
}

/*Navigation Bar*/

nav{
  width: 100%;
  padding-top: 0.1%;
  padding-bottom: 11%;
  background-color: #161616;
}

 nav ul li{
   list-style: none;
   display: inline-block;
   float:right;
   text-align: center;
   padding-top: 4.5%;
   padding-right: 4%;
   padding-left: 4%;
 }

nav ul li a{
   text-decoration: none;

   color: #FFFFFF;
   font-family: house-slant;
   font-size: 2.5vw;
 }

 nav ul li a.active{
   color: #FF7900;
 }

 nav ul li a:hover,nav ul li a:focus,.footernav li a:hover,.footernav li a:focus{
   color: #FFA300;
 }

 nav ul li a:visited{
   color: #FFFFFF;
 }

 .logo{
   width: 21%;
   float: left;
   padding-left: 2%;
 }

 /*Footer Bar*/
.footerimagecontainer{
  overflow: hidden;
  width:100%;
  height: 200px;
}

.footerimagecontainer img{
  width:100%;
}

.footernavcontainer{
  width:100%;
  padding-bottom: 9%;
  background: #161616;
}

.footernav{
  width: 20%;
  height: 100%;
  float:left;
  margin-left: 10%;
}

.footernav li{
  list-style: none;

  text-align: center;
  vertical-align: middle;

  color: #FFFFFF;

  padding-right: 4%;
  padding-left: 4%;

  font-family: tahoma;
  font-size: 2vw;
}

.footernav li a{
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1vw;
}

/* Landing Page */

#gamecontainer{
  width: 100%;
  text-align: center;
  margin: 2% auto;
}

/* Instructions Page */

.paragraphcontainer{
  overflow: auto;
  width: 65%;
  margin:2% auto;
}

.paragraphcontainer h1{
  font-family: astounder-squared-bb;
  font-size: 5.4vw;
  text-decoration: underline;
  color: #FF811A;
}

.paragraphcontainer h2{
  font-family: astounder-squared-bb;
  font-size: 3vw;
  color: #FF811A;
}

.paragraphcontainer h3{
  font-family: astounder-squared-bb;
  font-size: 3vw;
  color: #FF811A;
  margin-left: 30%;
}

.paragraph{
  font-family: tahoma;
  font-size: 1.1vw;
  text-align: justify;
  padding:1%;
}

.paragraph .leftJ{
  margin-right: 35%;
  padding-top: 2%;
}

.paragraph .rightJ{
  margin-left: 30%;
  margin-right: 10%;
  padding-top: 2%;
}

.rightImage{
  float:right;
}

.rightImage img{
  width: 80%;
}

.leftImage{
  float:left;
}

.leftImage img{
  width: 80%;
}

/*Story & Art Page*/

.gallerycontainer{
  overflow: auto;
  width: 65%;
  margin: auto;
  padding: 2%;
}

.gallery{
  margin:auto;
  float:left;
  width:24.8%;
}

.gallery:hover{
  border: 1px solid white;
}

.gallery img{
  width:100%;
  height: auto;
}

.gallerydescription{
  font-family: tahoma;
  font-size: 0.8vw;
  padding:1%;
  text-align: center;
}