html,
body {
  height: 100%;
  margin: auto;
  font-family: 'Muli', Sans-Serif;
  background: linear-gradient(90deg, #e1dcd9 50%, #8f8681 50%);
  color: #414143;
}

#title {
  font-size: 5rem;
  font-family: 'Merriweather', Serif;
  text-shadow: 2px 2px 1px #fff, -1px -1px 1px #414143;
}

#title:hover {
  color: #a67f78;
}

#madewithlove {
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #414143;
}

#madewithlove-name {
  text-shadow: 0 0 0;
  color: #fff;
}

#madewithlove-name:hover {
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #414143;
  text-decoration: none;
  color: #fff;
}

#madewithlove-heart:hover {
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #414143;
  color: #a67f78; 
}

#searchform {
  height: 100px;
  box-shadow: 2px 2px 10px #414143;
  background: #fff;
}

#searchinput {
  height: 100px;
  margin: auto;
  padding: 2rem;
  border-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  box-shadow: none;
  outline: none;
}

#searchbutton {
  height: 100px;
  background: none;
  color: #414143;
  padding: 2rem;
  border-style: none;
  font-size: 2rem;
  box-shadow: none;
  outline: none;
}

#searchbutton:hover {
  color: #a67f78;
}

#showbooks {
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: 0;
  padding: 0 1rem 2rem;
  box-shadow: 2px 2px 10px #414143;
  background: #414143;
}

.bookcover {
  height: 300px;
  box-shadow: 2px 2px 10px #414143;
}

.card {
  display: flex;
  margin-top: 32px;
  box-shadow: 2px 2px 10px #414143;
  background: #fff;
  color: #414143;
  text-align: center;
}

#noresults {
  margin: auto;
  padding: 3rem;
  color: #414143;
  font-size: 3rem;
  text-align: center;
  text-shadow: 2px 2px 1px #fff, -1px -1px 1px #414143;
}

/* Mobile First Responsive Design */
@media (max-width: 319px)
{
  #title { font-size: 1rem; }
  #noresults { font-size: 0.8rem }
  #madewithlove { font-size: 0.8rem }
  #searchinput { font-size: 0.8rem; }
  #searchbutton { font-size: 0.6rem; }
  .card { max-width: 240px; }
}
@media (min-width: 320px)
{
  #title { font-size: 1.4rem; }
  #noresults { font-size: 1rem }
  #madewithlove { font-size: 1rem }
  #searchinput { font-size: 1rem; }
  #searchbutton { font-size: 1rem; }
  .card { 
    min-width: 260px;
    max-width: 400px; 
  }
}
@media (min-width: 420px)
{
  #title { font-size: 2.2rem; }
  #noresults { font-size: 2rem }
  #madewithlove { font-size: 1.5rem }
  #searchinput { font-size: 1.5rem; }
  #searchbutton { font-size: 1.5rem; }
  .card { 
    min-width: 390px;
    max-width: 400px; 
  }
}

@media (min-width: 420px)
{
  .card { 
    min-width: 400px;
    max-width: 700px; 
  }
}

@media (min-width: 768px)
{
  #title { font-size: 3rem; }
  #madewithlove { font-size: 2rem }
  #searchinput { font-size: 2rem; }
  #searchbutton { font-size: 2rem; }
  .card { 
    min-width: 280px;
    max-width: 300px; 
  }
}

@media (min-width:992px)
{
  #title { font-size: 5rem; }
  #noresults { font-size: 3rem }
  .card { 
    min-width: 380px;
    max-width: 520px; 
  }
}

@media (min-width:1200px)
{
  #title { font-size: 6rem; }
  .card { 
    min-width: 500px;
    }
}