/****** Main site styles ***************/

:root {
  --body-font: brown;
  --page-width: min(100vw, 700px);
  --page-offset-left: max(0px, calc(0.5 * (100vw - var(--page-width))));
  --header-height: 120px;
}

::selection {
  background: #b16286;
}

body {
  width: 100%;
  height: 100%;
  font-size: min(20px, 2.4vw);
  font-family: "Gill Sans", sans-serif;
}

a:link, a:visited {
  text-decoration: none;
  color: #b16286;
}

a:hover {
  color: #196094;
}

/****** Header ***************/


#head {
  top: 0;
  left: var(--page-offset-left);
  width: var(--page-width);
  height: var(--header-height);
  line-height: var(--header-height);
  border-bottom: 7px solid black;
  padding-top: 16px;
  padding-bottom: 16px;
  margin: 0 auto;
}

#logo {
}

#logo img {
  height: var(--header-height);
  margin: auto;
  display: block;
}


/****** Contents ***************/

#container {
  top: 24px solid black;
  top: calc(var(--header-height) + 54px);
  left: var(--page-offset-left);
  width: calc(var(--page-width) - 32px);
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  border-top: 7px solid #b16286;
  border-bottom: 7px solid #b16286;
  font-size: min(18px, 5vw);
  line-height: min(22px, 6.1vw);
  text-align: justify;
  hyphens: auto;
  margin: 0 auto;
}

.section {
  padding-top: 1.5em;
}

.section span {
  color: #8f3f71;
  font-size: 1.2em;
  display:inline-block;
  width: 100%;
  border-bottom: 1px dotted #8f3f71;
}

.section p {
}

.section ul {
  padding-top: 0em;
  list-style-type: none;
}

.section ul li {
  padding-top: 1em;
}

.photo-row {
  padding-top: 0.2em;
  padding: 0.2em;
  display: flex;
  justify-content: space-around;
}

.photo-row img {
  height: min(100px, calc(0.15 * (var(--page-width))));
}

.funding {
  padding-top: 1em;
  padding-bottom: 1em;
}

/****** Footer ***************/

#footer {
  left: var(--page-offset-left);
  width: var(--page-width);
  height: 60px;
  margin: 0 auto;
}

#footer span {
  font-size: 0.8em;
  padding-top: 16px;
  margin: 0 auto;
  text-align: center;
  display: block;
}

#footer span a {
  color: #000;
}

/****** Book Page ***************/

.book {
  display: flex;
}

.book h1 {
  font-size: 1.3em;
  line-height: 1.2em;
}

.book h2 {
  font-weight: normal;
  line-height: 1.2em;
  font-size: 1.1em;
}

.book h3 {
  font-weight: normal;
  line-height: 1.2em;
  font-size: 0.9em;
}

.book p {
  padding-top: 1em;
  font-weight: normal;
  line-height: 1.2em;
  font-size: 0.9em;
}

.book a {
  color: #000;
}

.bookimg {
  height: min(300px, 40vw);
  display: inline-block;
}

.bookdiv {
  display: inline-block;
  width: 100%;
  padding-left: 16px;
}

.multi {
  padding-top: 1em;
}

.multi p {
  padding-top: 1em;
}

.book .button-grp {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}

.book .button {
  background-color: #b16286;
  border: none;
  color: white;
  padding: 1em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  border-radius: 1em;
}

/****** Responsive Design ***************/

@media only screen and (max-width: 600px) {

#container {
  text-align: left;
}
.book p {
  display: none;
}

.book h3 {
  font-weight: normal;
  line-height: 1.2em;
  font-size: 0.7em;
}

}


@media only screen and (max-width: 700px) {

.book .button {
  background-color: #b16286;
  border: none;
  color: white;
  padding: 1em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.6em;
  border-radius: 1em;
}
}