html{
	background-image:url(images/robot-bkrnd.jpg)
}

h1{
	color: #960a20;
	font-family:"Titillium Web", sans-serif;
	font-weight:black 900;
	font-size: 3.67em;
	padding: 0 0 0 200px;
}
.nav{
  display: inline;
  width: 6em;
  margin: 0 5px;
  padding: .5em 1em;
  text-decoration: none;
  text-align: center;
  letter-spacing: .1em;
  color: #fff;
  background-color: #190620;
  border: 2px solid #960a20;
  border-radius: 6px;
  text-shadow: #666 .1em .1em .1em;
  box-shadow: 0 4px 2px rgba(0,0,0,.5);
  position: relative;
  top: 0px;
  left: 200px;
  transition:  
    background-color 0.2s,
    border-color 0.2s, 
    top 0.1s, 
    box-shadow 0.1s;
}
	  a:link { color: red; }
      a:visited { color: yellow; }
      a:hover { color: #09C; }
      a:active {color: #0CF;  }

img{
  width: 200px;
  height: 300px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transition: transform 0.3s linear;
  padding:6px;}

  #img1{
	width: 700px;
  height: 400px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);

}

#img2{
	width:300px;
	height: 400px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.4);
}

#img3{
	width: 300px;
  height: 400px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);  
}
#img4{
	width: 400px;
  height: 300px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
#img5{
	width: 330px;
  height: 300px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4); 
}
#img6{
	width: 360px;
  height: 300px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
#img7{
	width: 200px;
  height: 300px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
#img8{
	width: 400px;
  height: 300px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
}


a:hover #img1, a:focus #img1 {
 transform: rotate(5deg) scale(1.5);  
} 
a:hover #img2, a:focus #img2 {
  transform: rotate(5deg) scale(1.5); 
} 
a:hover #img3, a:focus #img3 { 	
  transform: rotate(-7deg) scale(1.5); 
} 
a:hover #img4, a:focus #img4 { 	
  transform: rotate(2deg) scale(1.5); 
}
a:hover #img5, a:focus #img4 { 	
  transform: rotate(2deg) scale(1.5);
}
 a:hover #img6, a:focus #img4 { 	
  transform: rotate(2deg) scale(1.5);
}
a:hover #img7, a:focus #img4 { 	
  transform: rotate(2deg) scale(1.5);
}

a:hover img { 	
  box-shadow: 6px 6px 6px rgba(0,0,0,.3);}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color:rgba(166, 0, 0, 0.5);
  color: white;
  text-align: center;
}