/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* General formatting */
/* Skin inspired by the cover design of the novel Katabasis by R. F. Kuang */

body {
  background-color: goldenrod;
  color: rgb(30, 79, 63);
  font-family: Georgia, serif;
}
  
  a {
   color: gold;
}

h1 {
   color: gold;
   text-align: center;
}
   
h2 {
   color: gold;
}
 div {
            color: white;
            background-color: rgb(30, 79, 63);
            margin: 20px 0;
            padding: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* Optional: Adds subtle shadow */
        }
        
        table {
          margin: 20px 0;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          border: 1px solid brown;
          background-color: linear(sienna, wheat)
        }
        
      th {
        color: black;
        font-weight: bold;
      }
        
      th, td {
        border: 1px solid brown;
        padding: 15px;
        }
        
        .eh {
               text-shadow: 2px 4px 4px rgb(0 0 0 / 0.6);
        }
        
        blockquote {
          color: black;
          background-color: white
        }
        
        /* Photopile script courtesy of https://ribo.zone/free/snippets/ */
        
      .photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.photopile figure { 
  display: inline-block;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border: 2px rgb(0,0,0) inset;
}
.photopile figcaption, .popovers figcaption {
  font-family: Georgia, serif;
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile button { 
  background: none; 
  border: none;
  max-width: 40%;
}
.photopile button:hover, .photopile button:focus { 
  z-index: 3;
  cursor:pointer;
}
.photopile button:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile button:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile button:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile button:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile button:nth-child(6n) {
  transform: rotate(-7deg);
}
:popover-open {
  border: none;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
}
.popovers figure:popover-open {
  display: block;
  background: white;
  width: 88vmin;
}
.popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 4vmin 1rem;
  font-size: 175%;
  color: black;
}
.popovers figure:popover-open img {
  margin: 4vmin 4vmin 0 4vmin;
  max-width: 80vmin;
  border: 4px rgb(0,0,0) inset;
}


/* Book script courtesy of ibid. */
.book {
  border: 7px solid black;
  background-color: white;
  border-radius: 15px;
  padding: 0 4px;
  width: 500px; /* adjust size */
  max-width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
}
.pageL,	.pageR {
  height: 100%;
  width: 50%;
  display: inline-block;
  position: relative;
  border-radius: 10px;
}
.pageL {
  border-left: 1px grey solid;
}
.pageR { 
  border-right: 1px grey solid;
}
.seam {
  width: 7px;
  background:
    linear-gradient(to right,
    white, grey, white);
}