body {
  background-color: #cfd2d7;
}

img {
  box-sizing: border-box;
}

h1 {
  font-family: 'Outfit', sans-serif;
  line-height: 0.8em;
  font-size: 2em;
  margin-left: 1rem;
  display: block;
  float: left;
}
h2 {
  font-family: 'Outfit', sans-serif;
  line-height: 1em;
  margin-right: 1rem;
  font-size: 1.5em;
  text-align: right;
  display: block;
  float: right;
}
h3 {
  font-family: 'Outfit', sans-serif;
  line-height: 1em;
  margin-right: 1rem;
  font-size: 1.5em;
  text-align: center;
  display: block;
  width: auto;
  margin: auto;
  margin-top: 1rem;
}
p {
  font-family: 'Outfit', sans-serif;
  line-height: 1.3em;
  font-size: 1.1em;
  text-align: center;
  /* max-width: 70%; */
}
.image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 25px;
  border: 2px solid black;
  /* box-shadow: 0 0 10px 5px #cfd2d7; */
  display: block;
  margin-left: auto;
  margin-right: auto;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}
a {
  color: maroon;
  text-align: right;
  /* margin-top: 0.5em; */
  line-height: 1.2em;
}
.big-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
}
.header-below {
  display: block;
}
.header-above {
  display: none;
}
/* mobile view */ 
@media screen and (max-width: 40rem) {
  .big-container {
    flex-direction: column;
  }
  .header-below {
    display: none;
  }
  .header-above {
    display: inline;
  }
  .headers {
    display: flex;
    justify-content: space-between;
  }
  .desert-book-images {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .book-image {
    max-width: 80%;
  }
  .blockprints-big {
    flex-direction: column;
  }
  .blockprint-image-container {
    max-width: 80%;
    /* width: 80%; */
  }
  .blockprint-image-container-2 {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    align-items: center;
    justify-content: center;
  }
  .screenprints-big {
    flex-direction: column;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }
}
/* wider (desktop) view */ 
@media screen and (min-width: 40rem) {
  .container {
    max-width: 75%;
  }
  .book-image {
    max-width: 35%;
  }
  .blockprint-image-container-2 {
    max-width: 50%; 
    margin-left: 25%; 
    margin-right: 25%;
  }
  .screenprints-big {
    max-width: 100%;
  }
}
.container {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.container:hover .image {
  opacity: 0.2;
}
.container:hover .middle {
  opacity: 1;
}
.silly-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.caption {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5em;
}
.absurdist-fish {
  background: linear-gradient(to right, #606FA4, pink);
  line-height: 1.2em;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 25px;
}
.screenprint-image {
  max-width: 100%;  
  width: 100%;
  border: 10px solid white;
  display: block;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
  border-radius: 12px;
  height: auto;
}
.screenprints-big {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-evenly;
  align-items: center;
}
.screenprint-image-container {
  flex-basis: 28%;
  /* flex: auto; */
  position: relative;
}
.screenprint-image-container:hover .screenprint-image {
  opacity: 0.2;
}
.screenprint-image-container:hover .screenprint-caption-container {
  opacity: 1;
}
.blockprints-big {
  display: flex; 
  gap: 1rem;
  justify-content: space-evenly;
  align-items: center;
}
.blockprint-image-container {
  flex-basis: 35%;  
  /* flex: auto; */
  position: relative;
}
.blockprint-image-container-2 {
  flex-basis: 35%;
  position: relative;
}
.blockprint-image-container:hover .screenprint-image {
  opacity: 0.2;
}
.blockprint-image-container:hover .screenprint-caption-container {
  opacity: 1;
}
.screenprint-caption-container {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity: 0;
  text-align: center;
}
.s-caption {
  width: 100%;;
  padding: 0.5em;
  font-family: 'Outfit', sans-serif;
  font-size: 1em;
}
.block-printing {
  color: #cfd2d7;
  background: linear-gradient(to right, #326061, #98202D);
  /* background-color: pink; /* #C2A84F */ 
  line-height: 1.2em;
  padding: 1rem;
  border-radius: 25px;
  margin-top: 1rem;
  /* margin-bottom: 1rem;
  padding: 0.5em;
  border: 3px;
  border-radius: 25px; */
}
.desert-book {
  /* background: linear-gradient(to right, #98202D, #C2A84F); */
  background-color: #326061;
  color: #cfd2d7;
  /* background-color: pink; /* #C2A84F */ 
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 3px;
  border-radius: 25px;
  padding: 1rem;
}
.book-image {
  border-radius: 12px;
  border: 10px solid white;
  display: block;
  /* margin-left: auto;
  margin-right: auto; */
  margin-bottom: 1rem;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}
.desert-book-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.riso-printing {
  background: linear-gradient(to right, pink, #C2A84F); 
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 3px;
  border-radius: 25px;
}

details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
  content: "+ (expand)";
  font-family: 'Outfit', sans-serif;
  text-align: right;
  text-justify: right;
}

details[open]:first-of-type summary::marker {
  content: "− (collapse)";
  font-family: 'Outfit', sans-serif;
  text-align: right;
  text-justify: right;
}