/* 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;
  
  a, p {
    align-self: center;
    color: var(--headercolor);
  }
}

main {
  flex-grow: 1;
  overflow:  scroll;
  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) {
    width: 100cqw;
    height: auto;
  }
  
  .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;
    
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      align-self: center;
    }

    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;

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

    &.left {
      left: 2%;
      right: 51%;
    }

    &.right {
      left: 53%;
      right: 2%;
    }

    nav {
      display: flex;
      flex-direction: column;
    }
  
    img {
      width: 100%;
    }

    .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;
    }
  
    .center {
      align-self: center;
      justify-self: center;
    }
  }

  nav.pagination {
    position: absolute;
    bottom: 0.2cqh;
    left: 0;
    right: 0;
    
    img {
      width: 4cqw;
      display: block;
    }

    a {
      position: absolute;
      bottom: 0;
    }
    
    a.left {
      left: 0;
      transform: scaleX(-1);
    }
    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;

  &.show {
    opacity: 1;
  }
  
  img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
  }

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