:root {
  --dark: #512d73;
  --bg: #f8f1ee;
  --border: rgba(50, 20, 40, 0.5);
  --btn: #2b634c;
  --txt: #2b264c;
  --alt: #cfe6d6;
}
*{
  font-family: "Garamond", serif;
}
h1, h2, h3{
  font-family: "Courier New", Courier, monospace;
  color: var(--txt);
}
label, input[type=submit]{
  font-family: "Courier New", Courier, monospace;
}
body{
  padding: 0;
  margin: 0;
  width: 100%;
  color: var(--txt);
}
#header{
  width: 100%; 
  background-color: var(--dark); 
  padding: 15px;
}
#header a, #header a:link, #header a:visited{
  color: white;
  font-size: 20px;
  font-family: "Courier New", Courier, monospace;
  padding: 5px;
  margin: 0 15px;
}
#header a:hover, #header a:active{
  
}
.section {
  padding: 30px;
  background-color: var(--bg);
  border: 2px dashed var(--border);
}


/*book display*/
.bookCard{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0px 20px 10px 20px;
  margin: 20px;
  min-width: 160;
  flex: 1 1 300px;
  hyphens: auto;
}
#allBooks{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.fav-icon, .read-icon{
  float: right;
  margin: 5px;
}
.fav-icon, .read-icon, .edit-link {
  vertical-align: bottom; /* this doens't work yet*/
}

/*Filtering*/
.reset-button{
  float: right;
}


/*forms*/
.form-group{
  margin: 10px 0;
}
input[type=text], textarea{
  border: 0px;
  padding: 7.5px;
  width: 100%;
}


input[type=submit], button{
  background-color: var(--btn);
  color: white;
  padding: 5px;
  border: 1px solid var(--border);
  width: 100%;
}


@media  (min-width: 680px) {

  body{
    width: 100vw;
  }
  .section{
    padding: 15px;
    margin: 0px;
    width: 100vw;
  }
  #header{
    padding: 15px;
  }
  #header a, #header a:link, #header a:visited{
    color: white;
    font-size: 30px;
    font-family: "Courier New", Courier, monospace;
    padding: 5px;
    margin: 0 15px;
  }

  p{
    font-size: 2.2em;
  }
  h1{
    font-size: 3em;
  }
  h2{
    font-size: 2.5em;
  }


}