/* Global Styles */

body {
    font-family: "uni-gara", Open Sans, Arial;
    color: #454545;
    font-size: 20px;
    margin: 2em auto;
    max-width: 800px;
    padding: 1em;
    line-height: 1.4;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    background-color: #ff911352;
  }
  
  html.contrast body {
    color: #050505;
  }
  
  html.contrast blockquote {
    color: #11151a;
  }
  
  html.contrast blockquote:before {
    color: #262626;
  }
  
  html.contrast a {
    color: #03f;
  }
  
  html.contrast a:visited {
    color: #7d013e;
  }
  
  html.contrast span.wr {
    color: #800;
  }
  
  html.contrast span.mfw {
    color: #4d0000;
  }
  
  /* Color Scheme Adjustments */
  
  @media screen and (prefers-color-scheme: light) {
    html.inverted {
      background-color: #000;
    }
  
    html.inverted body {
      color: #d9d9d9;
    }
  
    html.inverted #contrast, html.inverted #invmode {
      color: #fff;
      background-color: #000;
    }
  
    html.inverted blockquote {
      color: #d3c9be;
    }
  
    html.inverted blockquote:before {
      color: #b8b8b8;
    }
  
    html.inverted a {
      color: #00a2e7;
    }
  
    html.inverted a:visited {
      color: #ca1a70;
    }
  
    html.inverted span.wr {
      color: #d24637;
    }
  
    html.inverted span.mfw {
      color: #b00000;
    }
  
    html.inverted.contrast {
      background-color: #000;
    }
  
    html.inverted.contrast body {
      color: #fff;
    }
  
    html.inverted.contrast #contrast, html.inverted.contrast #invmode {
      color: #fff;
      background-color: #000;
    }
  
    html.inverted.contrast blockquote {
      color: #f8f6f5;
    }
  
    html.inverted.contrast blockquote:before {
      color: #e5e5e5;
    }
  
    html.inverted.contrast a {
      color: #44c7ff;
    }
  
    html.inverted.contrast a:visited {
      color: #e9579e;
    }
  
    html.inverted.contrast span.wr {
      color: #db695d;
    }
  
    html.inverted.contrast span.mfw {
      color: #ff0d0d;
    }
  }
  
  @media (prefers-color-scheme: dark) {
    html:not(.inverted) {
      background-color: #000;
    }
  
    html:not(.inverted) body {
      color: #d9d9d9;
    }
  
    html:not(.inverted) #contrast, html:not(.inverted) #invmode {
      color: #fff;
      background-color: #000;
    }
  
    html:not(.inverted) blockquote {
      color: #d3c9be;
    }
  
    html:not(.inverted) blockquote:before {
      color: #b8b8b8;
    }
  
    html:not(.inverted) a {
      color: #00a2e7;
    }
  
    html:not(.inverted) a:visited {
      color: #ca1a70;
    }
  
    html:not(.inverted) span.wr {
      color: #d24637;
    }
  
    html:not(.inverted) span.mfw {
      color: #b00000;
    }
  
    html:not(.inverted).contrast {
      background-color: #000;
    }
  
    html:not(.inverted).contrast body {
      color: #fff;
    }
  
    html:not(.inverted).contrast #contrast, html:not(.inverted).contrast #invmode {
      color: #fff;
      background-color: #000;
    }
  
    html:not(.inverted).contrast blockquote {
      color: #f8f6f5;
    }
  
    html:not(.inverted).contrast blockquote:before {
      color: #e5e5e5;
    }
  
    html:not(.inverted).contrast a {
      color: #44c7ff;
    }
  
    html:not(.inverted).contrast a:visited {
      color: #e9579e;
    }
  
    html:not(.inverted).contrast span.wr {
      color: #db695d;
    }
  
    html:not(.inverted).contrast span.mfw {
      color: #ff0d0d;
    }
  
    html.inverted html {
      background-color: #fefefe;
    }
  }
  
  /* Link Styles */
  
  a {
    color: #07a;
  }
  
  a:visited {
    color: #941352;
  }
  
  /* Miscellaneous Styles */
  
  .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  span.citneed {
    vertical-align: top;
    font-size: .7em;
    padding-left: .3em;
  }
  
  small {
    font-size: .4em;
  }
  
  p.st {
    margin-top: -1em;
  }
  
  /* Fancy Positioning */
  
  div.fancyPositioning div.picture-left {
    float: left;
    width: 40%;
    overflow: hidden;
    margin-right: 1em;
  }
  
  div.fancyPositioning div.picture-left img {
    width: 100%;
  }
  
  div.fancyPositioning div.picture-left figure {
    margin: 10px;
  }
  
  div.fancyPositioning div.picture-left figure figcaption {
    font-size: .7em;
  }
  
  div.fancyPositioning div.tleft {
    float: left;
    width: 55%;
  }
  
  div.fancyPositioning div.tleft p:first-child {
    margin-top: 0;
  }
  
  div.fancyPositioning:after {
    display: block;
    content: "";
    clear: both;
  }
  
  ul li img {
    height: 1em;
  }
  
  /* Blockquote Styles */
  
  blockquote {
    color: #456;
    margin-left: 0;
    margin-top: 2em;
    margin-bottom: 2em;
  }
  
  blockquote span {
    float: left;
    margin-left: 1rem;
    padding-top: 1rem;
  }
  
  blockquote author {
    display: block;
    clear: both;
    font-size: .6em;
    margin-left: 2.4rem;
    font-style: oblique;
  }
  
  blockquote author:before {
    content: "- ";
    margin-right: 1em;
  }
  
  blockquote:before {
    font-family: Times New Roman, Times, Arial;
    color: #666;
    content: open-quote;
    font-size: 2.2em;
    font-weight: 600;
    float: left;
    margin-top: 0;
    margin-right: .2rem;
    width: 1.2rem;
  }
  
  blockquote:after {
    content: "";
    display: block;
    clear: both;
  }
  
  /* Responsive Adjustments */
  
  @media screen and (max-width: 500px) {
    body {
      text-align: left;
    }
  
    div.fancyPositioning div.picture-left, div.fancyPositioning div.tleft {
      float: none;
      width: inherit;
    }
  
    blockquote span {
      width: 80%;
    }
  
    blockquote author {
      padding-top: 1em;
      width: 80%;
      margin-left: 15%;
    }
  
    blockquote author:before {
      content: "";
      margin-right: inherit;
    }
  }
  
  /* Color Highlights */
  
  span.visited {
    color: #941352;
  }
  
  span.visited-maroon {
    color: #85144b;
  }
  
  span.wr {
    color: #c0392b;
    font-weight: 600;
  }
  
  button.cont-inv, span.wr {
    text-decoration: underline;
  }
  
  button.cont-inv {
    cursor: pointer;
    border-radius: 2px;
    position: fixed;
    right: 10px;
    font-size: .8em;
    border: 0;
    padding: 2px 5px;
  }
  
  #contrast {
    color: #000;
    top: 10px;
  }
  
  #contrast, #invmode {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  #invmode {
    color: #fff;
    background-color: #000;
    position: fixed;
    top: 34px;
    text-decoration: underline;
  }
  
  @media screen and (max-width: 1080px) {
    #contrast, #invmode {
      position: absolute;
    }
  }
  
  /* Special Colors */
  
  span.sb {
    color: #00e;
  }
  
  span.sb, span.sv {
    cursor: not-allowed;
  }
  
  span.sv {
    color: #551a8b;
  }
  
  span.foufoufou {
    color: #444;
    font-weight: 700;
  }
  
  span.foufoufou:before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .2em;
    margin-right: .2em;
    background-color: #444;
  }
  
  span.foufivfoufivfoufiv {
    color: #454545;
    font-weight: 700;
  }
  
  span.foufivfoufivfoufiv:before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .2em;
    margin-right: .2em;
    background-color: #454545;
  }
  
  span.mfw {
    color: #730000;
  }
  
  /* Fake Pre Styles */
  
  p.fakepre {
    font-family: monospace;
    font-size: .9em;
  }

  /* general styling */

  p {
    text-align: justify;
    text-justify: inter-word; /* Optional, for better justification */
  }  

  h1 a {
  color: inherit;       /* Use the h1 color */
  text-decoration: none; /* Remove underline */
  cursor: pointer;       /* Optional: show pointer cursor */
  }

  li {
    margin-bottom: 10px; /* vertical space between list items */
    text-align: justify;
    text-justify: inter-word; /* Optional, for better justification */
  }

  @font-face {
  font-family: "uni-gara";
  src: url("garamond/unicode.garamond.ttf") format("truetype");
  }

  /* Currently reading section styling */
  .book-covers {
    display: flex;
    gap: 10px; /* 10px space between each cover */
    overflow: visible;
    padding: 10px;
  }

  .book-covers a {
    display: block; /* make the entire image clickable */
    flex-shrink: 0; /* prevent shrinking */
  }

  .book-cover {
    height: 280px;
    object-fit: cover;
    border-radius: 4px;
    display: block; 
    transition: transform 0.3s ease;
  }

  .book-cover:hover{
    transform: scale(1.15);
    z-index: 2;
  }

  /* Photo Gallery section styling */
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    max-width: 960px; 
    margin: 0 auto; 
  }
  .photo-card {
    text-align: left;
    font-size: 14px;
    overflow: hidden;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
  }
  .photo-card:hover {
    transform: scale(1.05);
    z-index: 2;
  }
  .photo-card img {
    width: 100%;
    height: 250px;
    object-fit: cover; 
    transition: filter 0.3s ease;
    display: block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .photo-card:hover img {
    filter: blur(0);
  }
  .info {
    padding: 10px 8px;
    font-size: 0.9em;
    color: #555;
  }

  /* Useful section to have text and a picture on the side */
.picture-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
}

.picture-section p {
  text-align: inherit;
  text-justify: inherit;
  flex: 1;
  margin-right: 20px;
}

.picture-section img {
  max-width: 300px;
  height: auto;
  border-radius: 4px;
  object-fit: cover; 
}