@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
html, body{
    height: 100%;
    width: 100%;
    font-family: 'Merriweather', sans-serif;
    background-image: url('240617.jpg');
    background-position: center;
    background-size: cover;
    background-position-x: left;
  }
#loading{
  width: 100%;
  height: 100vh;
  background: #000 url('book_preloader.gif') no-repeat center;
  position: fixed;
  z-index: 9999;
}
  .navbar{
    padding: .8rem;
  }
  .navbar-nav li{
    padding-right: 20px;
  }
  .nav-link{
    font-size: 1.1em !important;
  }
#header{
  font-size: 3rem;
}
.book-list{
  margin-top: 50px;
  visibility: hidden;
}
.card{
  opacity: .8;
  margin-top: 2rem;
}
footer{
  background-color: #3f3f3f;
  color: #d5d5d5;
  padding: 2rem;
}
.footer a{
  color: #d5d5d5;
}
hr.light-100{
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}
.icon-bar {
  position: fixed;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.github {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.slack {
  background: #ff3568;
  color: white;
}
/*---Media Queries --*/
@media (max-width: 992px) {
  #header{
    font-size: 3rem;
  }
  .book-list{
    margin-top: 50px;
    visibility: hidden;
  }
  .card{
    opacity: .8;
    margin-left: 4vw;
    margin-right: 4vw;
    margin-left: 8rem;
    margin-right: 7rem;
  }
}
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}


@media (max-width: 768px) {
  #header{
    font-size: 3rem;
  }
  .book-list{
    margin-top: 30px;
    visibility: hidden;
  }
  .card{
    opacity: .8;
    margin-left: 2vw;
    margin-right: 3vw;
    margin-left: 5rem;
    margin-right: 4rem;
  }
}
.icon-bar a {
  display: block;
  text-align: center;
  padding: 13px;
  transition: all 0.3s ease;
  color: white;
  font-size: 17px;
}


@media (max-width: 576px) {
  #header{
    font-size: 3rem;
  }
  .book-list{
    margin-top: 30px;
    visibility: hidden;
  }
  .card{
    opacity: .8;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-left: 2rem;
    margin-right: 3rem;
  }
}
.icon-bar a {
  display: block;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  color: white;
  font-size: 13px;
}
.input{
  padding: 3em;
}