html{
scroll-behavior:smooth;
}

body {
margin: 0;
padding:0;
}
#topBtn {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 999999; 
    border: none; 
    outline: none;
    background-color: #333; 
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 10px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  }
  
  #topBtn:hover {
    background-color: #555;
  }
.banner {
height: auto;
background-image:url('../images/banner.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

ul {
background-color:black;
color:#deb887;
width:100%;
height:auto;
padding:0;
margin:0;
}

li{
background-color:black;
color:#deb887;
width:auto;
height:50px;
padding:5px;
margin:15px;
display:inline-block;
font-size:20px;
cursor:pointer;
}

li:hover {
color:white;
}

.logo {
background-image: url("../images/logo.jpg");
height: 20px;
width:100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.author {
position:relative;
display:inline-block;
height:400px;
width:300px;
bottom:5%;
left:0;
top:5%;
border: 5px solid white;
border-radius:5px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.intro {
position:relative;
display:inline-block;
height:220px;
width:200px;
bottom:12%;
right:1%;
text-shadow: 2px 2px #333333;
background-color:black;
opacity:0.8;
padding:25px;
margin:25px;
border: 5px solid white;
border-radius:5px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.what {
position:relative;
display:inline-block;
height:200px;
width:100%;
text-shadow: 2px 2px #333333;
background-color:black;
opacity:0.8;
padding:25px;
margin:25px;
border: 5px solid white;
border-radius:5px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.btn {
cursor:pointer;
font-size:14px;
color:white;
position:relative;
left:25%;
display:inline-block;
height:25px;
width:auto;
text-shadow: 2px 2px #333333;
background-color:black;
padding-top:10px;
padding-bottom:25px;
padding-left:15px;
padding-right:15px;
margin:5px;
border: 2px solid #deb887;
border-radius:5px;
box-shadow: 5px 5px 5px 0px rgba(250,250,250,0.55);
-webkit-box-shadow: 5px 5px 5px 0px rgba(250,250,250,0.55);
-moz-box-shadow: 5px 5px 5px 0px rgba(250,250,250,0.55);
}

.btn:hover {
background-color:#deb887;
}

.btn2 {
cursor:pointer;
font-size:14px;
color:white;
position:relative;
left:30%;
display:inline-block;
height:15px;
width:auto;
text-shadow: 2px 2px #333333;
background-color:black;
padding-top:5px;
padding-bottom:23px;
padding-left:15px;
padding-right:15px;
margin:5px;
border: 2px solid #deb887;
border-radius:5px;
box-shadow: 5px 5px 5px 0px rgba(250,250,250,0.55);
-webkit-box-shadow: 5px 5px 5px 0px rgba(250,250,250,0.55);
-moz-box-shadow: 5px 5px 5px 0px rgba(250,250,250,0.55);
}

.btn2:hover {
background-color:#deb887;
}

.badge{
position:absolute;
top:-45px;
right:-25px;
z-index:10;
width:100px;
height:100px;
}

.bannerContainer{
position: relative;
display:block;
top:100px;
height:700px;
width:100%;
background-image:url('../images/banner.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index:-1
}

.banner2Photo {
display:inline-block;
position: relative;
height: 460px;
width:300px;
left:100px;
background-image:url('../images/a2.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #ffffff;
border-radius:5px;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
z-index:10;
top:100px;
}

.banner2 {
display:inline-block;
position: relative;
top:20px;
height: 500px;
width:500px;
right:-50px;
background-image:url('../images/banner2.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #ffffff;
border-radius:5px;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

.bookHolder {
position:relative;
top:0px;
width:80%;
height:auto;
background-image:url('../images/bgbooks.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #ffffff;
border-radius:5px;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

.bookContainer{
padding:0;
margin:25px;
width:250px;
height:auto;
display:inline-block;
postion:relative;
border: 5px solid #ffffff;
border-radius:5px;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

.bookImg{
width:100%;
height:auto;
}

.bookInfo{
background-color:black;
}

.tab1 {
position:relative; 
left:20px;
}

.bookTitle{
position:relative;
top:0px;
}

.footerHolder {
width:100%;
height:auto;
position:relative;
top:100px;
left:0px;
right:0px;
background-color:black;
border: 5px solid #000000;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

.footerImg{
width:100px;
height:100px;
left:0px;
}

.contacts {
float:right; 
right:155px; 
top:15px; 
position:relative;
}
.seperator{
height:150px;
}

@media all and (max-width: 900px) {
.intro {
display:block;
top:50px;
}
.banner2Photo {
display:block;
top:400px;
}
.banner2 {
display:block;
top:450px;
left:0px;
}
.bookHolder {
top:650px;
}
.bookTitle{
top:650px;
}
.footerHolder {
top:800px;
}
}

@media all and (max-width: 800px) {
.bookTitle{
display:none;
}
}

@media all and (max-width: 600px) {
.banner2Photo {
display:block;
left:30px;
width:300px;
}
.bookContainer{
margin:15px;
}
.banner2{
background-color:black;
background-image:none;
width:95%;
word-break:break-word;
padding:5px;
height:auto;
}
.tab1 {
left:0px;
}
.bookTitle{
display:none;
}
.bookHolder {
top:700px;
}
.footerHolder {
top:800px;
}
.seperator{
height:0px;
}
}

@media all and (max-width: 500px) {
.bookTitle{
display:none;
}
.footerHolder {
height:200px;
}
.contacts {
right:0px; 
}
#topBtn{
  bottom:100px;
}
}