@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital@1&display=swap');

:root {
  --border: hsl(330, 60%, 50%);
  --page-bg: hsl(330, 50%, 90%);
  --page-bg-hover: hsl(330, 70%, 60%);
  --book-width: 35vmin;
}

body {
 margin: 0;
 padding: 0;
}

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  font-family: 'Vollkorn', serif;
  }

#header h2 {
  color: gray;
}

#header {
  border-bottom: 1px solid var(--page-bg-hover);
}

#footer {
  border-top: 1px solid var(--page-bg-hover);
  padding-top: 1em;
  padding-bottom: 1em;
}

#header, #footer {
  text-align: center;
  background-color: var(--page-bg);
}

.bookdesc {
  display: flex;
  flex-flow: column nowrap;
  align-items:  center;
  border: 1px solid  var(--border);
  border-radius: 1em;
  margin: 1em;
  background-color: var(--page-bg);
  width: var(--book-width);

}

.coverimage {
  width: var(--book-width);
  aspect-ratio: 1;
}

.bookdesc>.footer {
  margin-top: 1em;
  color: darkgray;
  border-top: 1px solid var(--page-bg-hover);

}
.contentlink{
  display: block;
}

.contentlink img{
  width: 1rem;
}

.bookdesc img {
  margin-top: 2em;
}

.bookdesc .author {
  color: gray;
  font-size: 0.8em;
  font-style: italic;
}

.bookdesc > div.footer {
   padding-top: 1em;
  padding-bottom: 0.5em;
}

.page {
 display: flex;
 flex-flow: row wrap;
}