*{background-color: #000000;
  color: #FFFFFF;
  box-sizing: border-box;}
  

footer{ text-align: center;}
	   
body{}

hr{ color: #FF0000;}

#wrapper{
	width: 95%;
	margin: auto;
	box-shadow: -2px -2px 5px #FF0000;
}

a{text-decoration: none;}


.Banner { width: 75%;}

.die { width: 10%;
		height: 10%;
		float: right;}
		

.race{height: 20%;
	  background-image: url("Race_lineup.jpg");
	  padding: 5px;
	  border: 2px solid #FF0000;}

.race p {width: 50%;
		 background: hsla( 1, 10%, 10%, 0.0);}
		 
.race h2{display: inline;
		background: hsla( 1, 10%, 10%, 0.0);}

.race:hover{border: 2px solid #FFFFFF;
	        transition: .3s;
	}


.class{height: 20%;
	   padding: 5px;
	   border: 2px solid #FF0000;
       background-image: url("Class_lineup.jpg");}
	   
.class p {width: 50%;
          background: hsla( 1, 10%, 10%, 0.0);}
.class h2{background: hsla( 1, 10%, 10%, 0.0);}
.class:hover{border: 2px solid #FFFFFF;
	        transition: .3s;
	}	   
				
.clearboth{ clear: both;}


.Monsters { 
height: 20%;
background-image: url("Monster.jpg");
padding: 5px;
border: 2px solid #FF0000;}

.Monsters p, h2{width: 30%;
background: hsla( 1, 10%, 10%, 0.0);
}
.Monsters:hover{border: 2px solid #FFFFFF;
	        transition: .3s
	}



.World {
	height: 20%;
    background-image: url("Landscape.jpg");
	padding: 5px;
	border: 2px solid #FF0000;}


.World h2{width: 30%;
background: hsla( 1, 10%, 10%, 0.0);}

.World p{width: 30%;
background: hsla( 1, 10%, 10%, 0.0);}
.World:hover{border: 2px solid #FFFFFF;
	        transition: .3s;
	}

.outerplanespng{width: 50%;
float: right;
border: 2px solid #FF0000;}

.Descriptor {width: 50%;
font-size: 1.3em;
float:left;}

.racespng {width: 10em;
float:right;
margin-right: 15%;}'

}


.racespng:hover {width: 20em;
transition: .2s;
margin-right: 10%;}


.outerplanespng:hover {width: 100%;
transition: .2s}

.elemental{width: 80%;
margin: 0% 10% 0% 10%;
border: 2px solid #FF0000;}

.elemental:hover {
	width: 100%;
	margin:0% 0% 0% 0%;
	transition: .1s;
}

.swayRight{Border: 1px solid #FFFFFF;
		   width: 90%;
		   float: right}
		   
.swayLeft{Border: 1px solid #FFFFFF;
		  width: 90%;
		  float: left;}
		  
.swayRight p{font-size: 1em;
			 width: 70%;
			 float: left;}
			 
.swayLeft p{font-size: 1em;
			width: 70%;
            float: right;}
			
.swayLeft img{width: 30%;
		      float: left;}
.swayRight img{width:30%;
			   float: right;}
.racepng {width: 20em;
float:right;
margin-right: 15%;}
	
nav{border-top: 2px solid #FF0000;
	border-bottom: 2px solid #FF0000;}
	
nav li{margin: 0px 5% 0px 5%;
		display: inline-block;}

nav a{font-size: 1.5em;
	 text-align: center;
	 margin: 5px;
	 text-decoration: none;}
	 
nav a:hover{ border-bottom: 3px solid #AF0000;
			  color: #AA0000;
			  font-size: 1.7em;
			  transition: color .5s;}
			  
div p{font-size: 1.7em;}

dl dt,dd{background: hsla( 1, 10%, 10%, 0.0);}

div a:hover{
	margin: 2px solid #123456;
	transition: color .5s;
}

@media (max-width: 800px){
	nav li{display: inline-block;} 
}

@media (max-width: 600px){
	nav li{display: block;
	text-align: center;
	border: 2px solid #FF0000}
	div p{ visibility: hidden;} 
	.dungeondescript {visibility: visible;
					  font-size: 1.5em;}
	.World{height: 75px;}
	.Monsters{height: 75px;}
	.class{height:75px;}
	.race{height: 75px;}
	.Banner{width: 125%;}
	footer nav{ visibility: hidden;}
	.swayLeft img, .swayRight img{ visibility: collapse;}
	.swayLeft, .swayRight{ float: none;
						  display: block;}
	.swayLeft p, .swayRight p{visibility: visible;
							  width: 100%;
							  float: none;}
}

@media (max-width: 1040px) {
	div p{font-size: 1.2em;}
}