style.css

@import url('https://fonts.googleapis.com/css?family=Merriweather|Mina|Montserrat');
html {
    font-family: Montserrat, sans-serif;
}
body {
    font-family: Montserrat, sans-serif;
    width: 50%;
    margin: 0 auto;
    background-color: lightblue;
}
h1{
    font-family: Montserrat, sans-serif;
    font-size: 2em;
    font-weight: bolder;
    text-align: center;
}
h2{
    font-family: Montserrat, sans-serif;
    font-weight: bolder;
    text-align: center;
    
}
h3{
    font-family: Mina, sans-serif;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 0;
}
.bookInfo{
    margin: 0 auto;
}
.bookInfo h4{
    background-color: aliceblue;
    font-family: Mina, sans-serif;
    font-weight: bolder;
    text-align: left;
    margin: 0.1em 0;
    padding: 0.2em 0.2em;
}
.bookinput{
    background-color: aliceblue;
    border: 0.2em solid gray;
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    font: 0.8em Mina, sans-serif;
    margin-top: 0.5em;
    color: black;
}

input{
    font-family: Mina, sans-serif;
    font-size: 1em;
    width: 20%;
    cursor: pointer;
}
.menu a {
    color: black;
    border-bottom-style: solid;
    border-bottom-width: 0.2em;
    border-bottom-color: black;
    margin-bottom: 0.2em;
    font-family: Mina;
    text-align: center;
    text-decoration: none;
    padding: 0.7em;
}
.menu a:hover {
    font-weight: bold;
    border-bottom-color: gray;
}
.menu a:active {
    color: black;
    font-weight: bolder;
}
.book table {
    width: 100%;
}
.book tr td:first-child{
    width:1%;
    white-space:nowrap;
}
.book {
    text-align: left;
    background-color: aliceblue;
    padding:0.5em;
    color: black;
/*    width: 15em;*/
/*    margin: 0 auto;*/
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    border-width: 0.2em;
    border-style: none;
    border-color: gray;
    overflow: hidden;
}
.book:hover {
    background-color: white;
}
.book h1 {
    text-align: left;
    color: black;
    font: 1.0em Mina, sans-serif;
    margin: 0.1em;
    line-height: 1.2em;
}
.book h2 {
    text-align: left;
    color: gray;
    font: 0.8em Merriweather serif;
/*    font-family: "Times New Roman", Times, serif;*/
    display: table-cell;
    vertical-align: middle;
    padding: 0.5em;
}
.book h3 {
    text-align: left;
    color: black;
    font: 0.75em Montserrat, sans-serif;
    margin-bottom: 0.3em;
}
.book h4 {
    text-align: right;
    color: black;
    font-weight: bolder;
    font: 0.85em Montserrat, sans-serif;
    margin-bottom: 0;
}
.mybutton {
    background-color: #4CAF50;
/*    width: 100%;*/
/*    height: 100%;*/
    border: none;
    color: white;
    padding: 0.5em 0.5em;
    text-align: center;
    text-decoration: none;
    font: 0.8em Mina, sans-serif;
    margin-top: 0.5em;
    float: right;
/*    vertical-align: text-bottom;*/
}
.mybutton button:hover{
    background-color: #4CAD00;
}
.booka {
    color:black;
    text-decoration: none;
}
.booka:hover{
    
}
select {
    color: black;
    font: 1.0em Merriweather, sans-serif;
    margin: 0.2em;
    margin-bottom: 0.8em;
    padding: 0.3em;
}
.filter table{
    width: 70%;
    margin: 0 auto;
}
.filter th input{
    text-align:  left;
    display: table-cell;
    width: 70%;
}
.filter tr {
    margin: 0; 
}
.responstable {
  margin: 1em 0;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  color: #024457;
  border-radius: 10px;
  border: 1px solid #167F92;
}
.responstable tr {
  border: 1px solid #D9E4E6;
}
.responstable tr:nth-child(odd) {
  background-color: #EAF3F3;
}
.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #167F92;
  color: #FFF;
  padding: 1em;
}
.responstable th {
  display: table-cell;
  text-align: center;
}
/*
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
*/
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 7em;
}
.responstable td {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #D9E4E6;
}
@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #D9E4E6;
  }
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
  }
}