/* STYLING */
:root {
  /* change colors and fonts here */
  --nav-background-color: rgb(255, 202, 227);
  --nav-background-color-hover: rgb(255, 131, 189);
  --border-colorpink: rgb(255, 100, 180);
  --border-colorblue: rgb(156, 225, 255);
  --nav-text-color: red;
  --nav-font: "Tilt Neon", sans-serif;
  --main-text-color: rgb(26, 26, 26);
  --main-font: Verdana;
  --aside-background-color: rgb(255, 202, 227);
  --aside-text-color: red;
  --aside-font: "Tilt Neon", sans-serif;
  --sidebar-font-size: 15px;
  --footer-textcolor: rgb(255, 0, 157);
  --scrollbar-color: rgb(255, 146, 224) rgb(255, 252, 255);
  --h1-font-size: 18px;
}

html {
  height: 100%;
}

body {
  background-image: url(../images/images-per-page/library-page/bg_pasteleyes.gif);
  overflow-x: hidden;
  min-height: 100%;
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: bold;
}

p {
  font-weight: bold;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  box-sizing: border-box;
  scrollbar-color: var(--scrollbar-color);
  font-family: "Tilt Neon", sans-serif;
  cursor: url(../images/images-per-page/library-page/cursor_book.gif), auto;
}

/* STYLING END */

/* important for gallery box positioning */
img {
  max-inline-size: 100%;
}

/* Grid for page layout */
.main-grid-box {
  display: grid; 
  grid-template:
    "myLeftSidebar myMainContent myRightSidebar"
    "myLeftSidebar Footer myRightSidebar"
      / 7rem 1fr 10rem; 
  min-height: 100vh;
}

/* Left Sidebar */
nav {
  grid-area: myLeftSidebar;
  position: sticky;
  top: 0;
  left: 0;
  max-width: 7rem;
  min-height: 100vh;
  /* border frame from broider @ https://maxbittker.github.io/broider/ */
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFaADAAQAAAABAAAAFQAAAAAIGxIOAAAAkklEQVQ4Ee2TwQqAMAxDh/7/wS9Wg7xQVi9jHXhwl4TYvpVttnM/znYvNHpl5FGjV71WymIQ/VP+0tBBUk8KIA1q4hAMclI5nC19qQigV7DEMM9mkmyOzSSQdvHWnKl2qJrWHBvmn1TzbL4GZB4N+F9U/ZNac6Y8J5RbHFX6Uf9RCghRwfFon5Gjww1qpBntN7kAzw25GYb9p/gAAAAASUVORK5CYII=') 7 /  7px / 0 round;
  border-width:  2px;
  border-style:  solid; 
  background-color: var(--aside-background-color);
  color: var(--aside-text-color);
  font-family: var(--aside-font);
}

nav a img:hover {
  transform: scale(1.1);
  filter: drop-shadow(1px 1px 1px var(--nav-background-color-hover));
}

/* Book Image Gallery */
main {
  grid-area: myMainContent;
  color: var(--main-text-color);
  font-family: var(--main-font);
}
  

/* Flexbox for Custom Headers */
.frame-border {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  max-width: 100vw;
  border-color: var(--border-colorpink);
  box-shadow: 0 5px 10px rgb(255, 143, 203);
  border-width:  5px;
  border-style:  solid; 
}

.about-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* summary and detail styling */

/* this removes the default triangle */
summary {
  display: block;
}

/* this creates a new custom triangle on the right side */
summary::after {
  color: black;
  display: inline-block;
  content: '➯';
  transition: 0.2s;
}

.about-details {
  background-color: rgb(213, 241, 255);
  text-align: center;
  padding: 10px;
  max-width: 500px;
  border-color: var(--border-colorblue);
  box-shadow: 0 5px 10px rgb(255, 143, 203);
  border-width:  2px;
  border-style: dotted; 
}

.about-details > p {
  font-style: italic;
}

details > summary {
  cursor: url(../images/favicons-pixels/cat_pinkpaw.gif), auto;
}

.past-years-reading-toggle {  
  justify-content: center;
  background-color: var(--nav-background-color);
}

.past-years-reading-toggle > p {
  color: black;
  font-size: 12px;
}

.past-years-reading-toggle > summary > h3 {
  color: rgb(0, 0, 0);
  font-style: italic;
  font-weight: bold;
}

/* Right Sidebar */
aside {
  grid-area: myRightSidebar;
  top: 0;
  /* this moves aside to the right */
  right: 0;
  max-width: 10rem;
  min-height: 100vh;
  /* border frame from broider @ https://maxbittker.github.io/broider/ */
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFaADAAQAAAABAAAAFQAAAAAIGxIOAAAAkklEQVQ4Ee2TwQqAMAxDh/7/wS9Wg7xQVi9jHXhwl4TYvpVttnM/znYvNHpl5FGjV71WymIQ/VP+0tBBUk8KIA1q4hAMclI5nC19qQigV7DEMM9mkmyOzSSQdvHWnKl2qJrWHBvmn1TzbL4GZB4N+F9U/ZNac6Y8J5RbHFX6Uf9RCghRwfFon5Gjww1qpBntN7kAzw25GYb9p/gAAAAASUVORK5CYII=') 7 /  7px / 0 round;
  border-width:  2px;
  border-style:  solid; 
  background-color: var(--aside-background-color);
  color: var(--aside-text-color);
  font-family: var(--aside-font);
}

.right-sidebar-content {
  margin: 1rem 0 1rem 0;
}

/* Right Sidebar Content */
.blinkies {
  display: flex;
  flex-direction: column;
  margin: -1rem 0 0 0;
  padding: 0;
}

.stamps {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(75px, 75px));
  justify-content: center;
  align-items: center;
}

.content2 {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(50px, 50px));
    justify-content: space-evenly;
  align-items: stretch;
  margin: .5rem;
  border: 2px dotted var(--border-colorpink);
  box-shadow: inset 0 0 5px 3px rgba(255, 158, 223, 0.4), inset 0 0 5px 2px rgb(255, 202, 227), 2px 2px 10px 2px rgba(255, 255, 255, 0.5);
}

.book-inspo {
  display: grid;
  margin: .5rem;
  text-align: center;
  border: 2px dotted var(--border-colorpink); 
  box-shadow: inset 0 0 5px 3px rgba(255, 158, 223, 0.4), inset 0 0 5px 2px rgb(255, 202, 227), 2px 2px 10px 2px rgba(255, 255, 255, 0.5);
}

.book-inspo a img:hover {
  cursor: url(../images/favicons-pixels/cat_pinkpaw.gif), auto;
  transform: scale(1.1);
}

.goodreads a img:hover {
  cursor: url(../images/favicons-pixels/cat_pinkpaw.gif), auto;
  transform: scale(1.1);
}

.book-inspo-img {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
}

.goodreads {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: .5rem;
}

.content2 img {
  object-fit: contain;
}

.content3 {
  display: flex;
  justify-content: space-around;
  object-fit: contain;
  margin: .5rem;
}

.orange-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: .5rem;
}

.book-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.random {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.random img {
  object-fit: contain;
}

footer {
  grid-area: Footer;
}

.update {
  display: flex;
  margin: 0 10rem 8px 10rem;
  justify-content: center;
  place-items: center;
  text-align: center;
  color: var(--footer-textcolor);
  /* border frame from broider @ https://maxbittker.github.io/broider/ */
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFaADAAQAAAABAAAAFQAAAAAIGxIOAAAAkklEQVQ4Ee2TwQqAMAxDh/7/wS9Wg7xQVi9jHXhwl4TYvpVttnM/znYvNHpl5FGjV71WymIQ/VP+0tBBUk8KIA1q4hAMclI5nC19qQigV7DEMM9mkmyOzSSQdvHWnKl2qJrWHBvmn1TzbL4GZB4N+F9U/ZNac6Y8J5RbHFX6Uf9RCghRwfFon5Gjww1qpBntN7kAzw25GYb9p/gAAAAASUVORK5CYII=') 7 /  7px / 0 round;
  border-width:  2px;
  border-style:  solid; 
  padding: .5rem;
  background-color: var(--nav-background-color);
}


/* Book Gallery Grid */
.gallery {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(150px, 150px));
    justify-content: center;
  gap: 20px;
  padding: 50px;
  align-items: stretch;
  margin-top: -25px;
}

.gallery figure {
  display: table;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  box-shadow: 0px 0px 7px 3px rgb(255, 191, 221);
}

.gallery img {
  object-fit: cover;
  vertical-align: middle;
  object-fit: cover;
  max-width: 100%;
  grid-area: 1 / 1 / -1 / -1;
}

.gallery figcaption {
  display: table-caption;
  caption-side: bottom;
  margin: 0 0;
  padding: 7px;
  justify-content: center;
  background: #eeeeee;
  border-bottom: 3px solid #cccccc;
}


/* Book Gallery Popup Stuff */
.book-popup-text {
  font-family: var(--main-font);
  color: var(--main-text-color);
  font-weight: lighter;
  font-size: 14px; 
  line-height: 1.75rem;
  margin: 0; 
}

.popover {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 1rem;
  border: 0;
  box-shadow: 0 0 1em rgb(0 0 0 / .4em);
  color:rgb(255, 237, 250);
  max-width: 90ch;
  max-height: 45ch;
  scrollbar-color: rgb(123, 9, 9) rgb(255, 225, 249);
  scrollbar-width: thin;
}

.popover::backdrop {
  background: rgb(0 0 0 / .4);
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Makes thoughtbubble emoji popup when hovering over bookcard buttons */
button img {
  border: none;
  cursor: url(../images/images-per-page/library-page/hover_thoughts.gif), auto;
}

button b, button:hover {
  transform: scale(1.1);
  cursor: url(../images/images-per-page/library-page/hover_thoughts.gif), auto;
}

/* Individual Element Styles */

ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 1rem;
  list-style: none;
}

li {
  text-align: center;
  font-size: var(--sidebar-font-size);
  padding: 8px;
}

li a {
  cursor: url(../images/favicons-pixels/cat_pinkpaw.gif), auto;

}


/* Links and Hover Effects */

a:hover {
  color: rgb(155, 142, 2);
  animation: rainbow 2s linear 0s infinite;
}

a:link {
  color: red; 
}

a:visited {
  color: rgb(6, 207, 76);
  text-shadow: 0 0 3px black;
  text-decoration: none;
}

@keyframes rainbow {
  from {
    color: #be73ff;
  text-shadow:
    0 0 3px #be73ff;
  }
  10% {
    color: #76e75a;
  text-shadow:
    0 0 3px #76e75a;
  }
  50% {
    color: #fbac36;
  text-shadow:
    0 0 3px #fbac36;
  }
  75% {
    color: #ff97e1;
  text-shadow:
    0 0 3px #ff97e1;
  }
  100% {
    color: #be73ff;
  text-shadow:
    0 0 3px #be73ff;
  }
}

@media (max-width: 768px) {
  .about-details {
    min-width: 30vw;
    min-height: 10vh; 
    margin: 1.5rem;
  }

  h1 {
    font-size: 14px;
  }

  .main-grid-box {
    grid-area: 
    "myLeftSidebar"
    "myMainContent"
    "myRightSidebar"
    "Footer";
  }


  .update {
    margin: 0 5rem 8px 5rem;
  }

}