/* reset defaults */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td
{
  margin:0;
  padding:0;
}

@font-face{
  font-family: "Candara";
  src: url("../fonts/candara.eot");
  src: url("../fonts/candara.eot?#iefix")format("embedded-opentype"),
       url("../fonts/candara.woff")format("woff"),
       url("../fonts/candara.woff2")format("woff2"),
       url("../fonts/candara.ttf")format("truetype"),
       url("../fonts/candara.svg#Candara")format("svg");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root {
  --bgcolor: #dbc7b9;
  --headerbgcolor: #988679;
  --headercolor: wheat;
}

body {
  height: 100vh;
  width: 100vw;
  background: var(--bgcolor);
  font-family: 'Candara',Arial,sans-serif;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header, footer {
  height: 2em;
  align-content: center;
  justify-content: center;
  background: var(--headerbgcolor);
  color: var(--headercolor);
  display: flex;
}

header a, header p, footer a, footer p {
  align-self: center;
  color: var(--headercolor);
}

main {
  flex-grow: 1;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 1vw;
  padding: 2vw;
  min-height: 0;
  container-type: size;
}

/* home - closed books */
.book {
  --ratio: 1154/1800;
  --invratio: 1800/1154;
  aspect-ratio: var(--ratio);
  height: min(100cqh, calc(32cqw * var(--invratio)));
  width: auto;
  align-self: center;
  align-items: center;
  background-image: url('../img/book_closed.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  color: black;
  container-type: size;
}

/* when in portrait mode */
@media (max-aspect-ratio: 1) {
  .book {
    width: 100cqw;
    height: auto;
  }
}

.book .book_cover {
  aspect-ratio: var(--ratio);
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  margin: auto;
  --u: 1cqh;
  padding: 10% 10% 5% 5%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.book .book_cover img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  align-self: center;
}

.book .book_cover h2 {
  font-size: 5cqh;
  text-align: center;
  padding: 1cqh;
}

/* one open book */
.book_open {
  --ratio: 1600/1441;
  aspect-ratio: var(--ratio);
  width: min(100cqw, calc(100cqh * var(--ratio)));
  height: auto;
  margin: auto;
  background-image: url(../img/book_open.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.book_open article {
  position: absolute;
  top: 2%;
  bottom: 2%;
  display: flex;
  justify-content: center;
}

.book_open article.left {
  left: 2%;
  right: 51%;
}

.book_open article.right {
  left: 53%;
  right: 2%;
}

.book_open article nav {
  display: flex;
  flex-direction: column;
}

.book_open article img {
  width: 100%;
}

.book_open article .scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  /* gradient with custom properties for top/bottom fades */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    black var(--top-fade, 10%),
    black calc(100% - var(--bottom-fade, 10%)),
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    black var(--top-fade, 10%),
    black calc(100% - var(--bottom-fade, 10%)),
    rgba(0,0,0,0) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  transition: -webkit-mask-image 0.2s, mask-image 0.2s;
}

.book_open article .center {
  align-self: center;
  justify-self: center;
}

.book_open nav.pagination {
  position: absolute;
  bottom: 0.2cqh;
  left: 0;
  right: 0;
}

.book_open nav.pagination img {
  width: 4cqw;
  display: block;
}

.book_open nav.pagination a {
  position: absolute;
  bottom: 0;
}

.book_open nav.pagination a.left {
  left: 0;
  transform: scaleX(-1);
}

.book_open nav.pagination a.right {
  right: 0;
  margin-right: 0.3cqw;
}

/* click-zooming for images */
.image-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-overlay.show {
  opacity: 1;
}

.image-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
}

.image-overlay .caption {
  color: white;
  font-size: 0.9rem;
  margin-top: 1vh;
  text-align: center;
}