@import url(https://fonts.googleapis.com/css?family=Merriweather);
@import url('https://fonts.googleapis.com/css?family=Diplomata+SC');

body{
overflow-x: hidden;
}
#navbar{
  z-index:1;
  position:fixed;
  width:100%;
  background-color: #282927;
}
#home{
  background-color:white;
  padding:8% 0 10% 0;
  width:100%;
  background-image:url("../images/environment.jpg");
      background-size: cover;
      position:fixed;
      opacity: 0.8;
      z-index: -1;

}
#abt{
  background-color:white;
  padding:1% 0 5% 0;
  width:100%;
  opacity: 0.8;
  position:relative;
  z-index: 1;

}
#desc{
  color:black;
  font-size:15px;
  font-family:  Merriweather,monospace;
  text-align:center;
  padding:0 2% 0 2%;
}
#col1{
  padding: 2% 5% 1% 2%;
}
#col2{
  padding: 2% 5% 1% 2%;
}
#but{
  padding:1% 10% 1% 10%;
  text-align:center;
  border-color:blue;
  border-width:3px;
}
#but:hover{
  border-color:black;
}

#author{
  text-align:center;
  color:black;
  font-size:14px;
  font-family:  Merriweather,monospace;
  width:100%;
  background-color:grey;
  z-index: 1;
  opacity: 0.9;
  padding-bottom: 15%;
}
#about-p img{
  border-radius:50%;
  text-align: center;
  padding-left: 2%;
  padding-right: 2%;
  width: 80%;
  -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#about-p img:hover{
  -webkit-transform: scale(1.5);
	transform: scale(1.5);
}
#contact{

  padding:10% 2% 10% 2%;
  width:100%;

}
#author:focus{
  margin-left: 50%;
  margin-right: 50%;
}
li:hover{
  background-color:#8D8B8A;
}
#img {
  width:60%;
  margin: 0 1% 1% 20%;

	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#img:hover {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

#book-row{
  padding:8% 0 0 0;
  text-align:center;
}


#contact_header{
  text-align:center;
  font-family: 'Diplomata SC', cursive;
  font-size:40px;
  color:blue;
}
#contact_header:hover
{
  -webkit-transform: rotateZ(-30deg);
  -ms-transform: rotateZ(-30deg);
  transform: rotateZ(-30deg);
}
#contact_body{
  padding:5%;
  text-align:center;
  font-family:  Merriweather,monospace;
  font-size:16px;
}
#span1{
  color:red;
  font-size: 25px;
}
#span2{
  color:blue;
  font-size: 25px;
}
#foot{
  text-align: center;
  padding:2%;
  background-color: black;
  color: white;
  font-size: 15px;
}