/* || WITH FLEX || */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /*
  --background-color: white; */
  --background-color: rgb(255,191,127);
  --color: #004080;
  --visited-color: rgb(90, 52, 52);
  --hover-color: rgba(90, 52, 52, 0.35);
}

body {
  font-size: 1.4375rem;
  max-width: 75rem;
  background-color: var(--background-color);
  color: var(--color);
  margin: 0 auto;
}

a {
  color: var(--color);
}

a:visited {
  color: var(--visited-color); /*
    color: #004080; */
}

a:hover {
  color: var(--hover-color);
}

p {
   line-height: 4.5vh;
}
h1 img {
  width: 100%;
  padding-bottom: 1rem;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

h2{
  margin-bottom: 1%;
}

img {
  display: block; /* change image from inline element removes space under image */
  margin-top: 0.5rem;
  padding-left: 10px; /* moved book but not container giving slight shadow on left */
  margin-right: 15px; /*
    box-shadow: 2px 2px 15px var(--color);*/
  margin-bottom: 1.5rem;
  align-content: center;
}

figure img {
  -webkit-box-shadow: 12px 12px 15px var(--color);
  -moz-box-shadow: 12px 12px 15px var(--color);
  box-shadow: 12px 12px 15px var(--color);
}

figure {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

figcaption {
  max-width: 180px;
  flex-wrap: wrap;
}

.buddy {
  max-width: 268;
  flex-wrap: wrap;
}

/* space between header and first row of images */
.row {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

.book {
  height: 325;
  width: 181;
  background-color: var(--background-color);
  color: antiquewhite;
  padding: 10px; /*
    padding: .5rem;   */
  padding-bottom: 1rem;
}

.textboxb {
  min-width: 268px;
  height: auto;
  text-align: center;
}
.textbox {
  min-width: 181px;
  height: auto;
  text-align: center;
}
.space {
  padding-top: 51rem;
}