/* TOP RIGHT BOTTOM LEFT */
/* Global variables. */
:root {
  /* Set sans-serif & mono fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  /* Menu drop menu padding */
  --nav-padding: 0.4rem;

  /* Default (dark) theme */
  --bg: #212121;
  /* TODO Want it to be on the outer borders */
  --bg-outer: #323531;
  --accent-bg: #2a2b2a;
  --text: #dcdcdc;
  --text-light: #ababab;

  --border: #666;
  --accent: #ffb300;

  --accent-lavendar-light: rgb(202, 151, 209);
  
  --border-color: #995890;
  
  --dark-background: #4e1d48;
  --background-container: #30282b;
  --background-container-warning: #4d253f;
  --hover-img-color: #331b35;

  --button-arrow-color: #ffb300;

  --null-pink: #C48F97;
  --null-black: #303030;
  --null-dark-blue: #242B3B;
  --null-eye-green: #131913;
  --null-light-green-base: #657365;
  --null-light-green-ivy: #829482;
  --null-dark-green-base: #384138;
  --null-dark-green-ivy: #131913;
  
  --null-background-container-border: #657365;
  --null-background-container: #242b26;

  --father-caramel: #b88246;

  --quote-b: #b88246;
  --quote-c: #829482;
}

img {
  opacity: 1;
}

/* Light theme */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ccceb8;
    --accent-bg: #b9c4b7f3;
    --text: #1a1616;
    --text-light: #554f4f;
    --border: #5b793a;
    --accent: #7a5300;
    --accent-lavendar-light: rgb(176, 14, 197);
    --border-color: #698b69;
    --dark-background: #a591a3;
    --hover-img-color: #dde6d8;
    --background-container: #c7cebf;
    --background-container-warning: #d3c5a8;

    --button-arrow-color: #C48F97;

    --null-light-green-base: #dde6d8;
    --null-light-green-ivy: #859685;
    --null-dark-green-base: #c1cec1;
    --null-dark-green-ivy: #698b69;

    --null-background-container-border: #657365;
    --null-background-container: #b9c4b7f3;

    --quote-b: #9f6b30;
    --quote-c: #995890;
  }
}

* {
  box-sizing: border-box;
}

html {
  /* Set the font globally */
  font-family: var(--sans-font);
  scroll-behavior: smooth;
}

/* Make the body a nice central block */
body {
  color: var(--text);
  background: var(--bg);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 55rem;

  /* grid-template-columns property specifies the number (and the widths) of columns in a grid layout. */
  /* The fr unit (a “fraction”) 
    can be used when defining grids like any other CSS length 
    such as %, px or em.
  */

  /* So here - 
    We define the middle area and then split the remaining sides have the same remaining fraction
    So if the min rem option is changed here, should make sure the max-width matches??
  */
  grid-template-columns: 1fr min(55rem,90%) 1fr;
}

body > header {
  text-align: center;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

body > header h1 {
  max-width: 100%;
  margin: 0.5rem auto;
}

.noBottomBorder {
  border-bottom: none;
}

/* Add a little padding to ensure spacing is correct between content and nav */
main {
  padding-top: 0rem;

  /* TODO has the bg of the default area be different than the main */
  /* background: var(--bg); */
}

body > footer {
  margin-top: 0.5rem;
  padding: 0.5rem;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* || Headers, Diff Screen Sizes */

h1 {
  font-size: 2.3rem;
}

h2.def {
  font-size: 2rem;
  margin-top: 2rem;
  border-bottom: 2px double var(--accent);
}

h3 {
  margin: 0rem;
}

p.smaller {
  font-size: smaller;
  margin: 0.5rem;
}

p.less-margin-padding {
  padding: 0.5rem 0rem;
  margin-top: 0rem;
  margin-bottom: 0.75rem;
}

/* || CAPTIONS - General. Currently used for OC banners */
figure {
  border-radius: var(--standard-border-radius);
  border: var(--border) 1px solid;
  margin: 0.2rem;

  display: inline-block;
  padding: 0.5rem 0.5rem 0.25rem 0.5rem;

  max-width: 30%;

  figcaption {
    margin-block: 0.25rem;
  }
}


/* Reduce header size on mobile */
@media only screen and (max-width: 720px) {
  h1 {
    font-size: 2.3rem;
  }

  h2 {
    font-size: 2rem;
    margin-top: 1.75rem;
  }

  main > p {
    margin: 0.8rem 0;
  }
}

/* || Format links */
a,
a:visited {
  color: var(--accent);
}

a:hover {
  text-decoration: none;
}

/* || UPDATE POSTS - /updates/ ------------------------------------- */
.updatepost {
  background-color: var(--background-container);
  border: 3px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.25rem 0.5rem;
  margin: 1rem 0rem;

  p {
    margin: 1rem;
  }

  p.header {
    font-weight: bold;
    border-bottom: 2px dashed var(--accent);
  }

  p.subheader {
    font-weight: 600;
    margin-bottom: 0rem; 
  }

  details {
    margin: 0.5rem 1rem;

    summary {
      font-weight: 600;
    }
  }
}

.updatepost > p.footer {
  font-style: italic;
  border-top: 2px dashed var(--accent);
  padding-top: 0.5rem;
}

/* || WRITING ----------------------------------------- */
.writingStoryListing {
  background-color: var(--background-container);
  border: 3px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.25rem 0.5rem;
  margin: 1rem 0rem;

  a {
    font-weight:600;
  }

  a:hover {
    text-decoration: none;
    border-color: var(--accent);
    color: var(--accent);
    cursor: pointer;
}

  p {
    margin: 0.5rem;
    font-size: medium;
  }
}

/* || OC NAV ---------------------------------------- */
.nav-oc-group {
  padding: 0rem 0.5rem;
  margin-bottom: 0.5rem;
}

.navoc,
.navoc:visited {
  background-color: var(--dark-background);
  border-radius: var(--standard-border-radius);
  border: 2px solid var(--border-color);
  color: var(--text);

  width: 7rem;
  padding: 0.2rem 1rem;
  margin: 0.15rem 0.15rem;

  font-size: medium;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.navoc:hover,
.navoc.current,
.navoc[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
}


/* || Format navigation - HEADER ONLY ----------------- */
nav {
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Reduce nav side on mobile */
@media only screen and (max-width: 750px) {
  .navHeader {
    padding: 0.25rem 0.25rem;
    font-size: small;
  }
}

/* override Simple CSS's header > nav extra padding*/
header > nav {
  padding-top: 0.5rem;
}

/* || TOP NAVIGATION - "background" area */
.navtest2 {
  a {
    text-decoration: none;
  }
  
  nav {
    font-family: inherit;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }
  
  li {
    text-decoration: none;
    text-align: center;
    font-size: medium;

    display: block;
    float: left;
    position: relative;
    transition-duration: 1.5s;

    padding-top: var(--nav-padding);
  }
    
  li:hover,
  li:focus-within {
    cursor: pointer;
  }
  
  li:focus-within a {
    outline: none;
  }

  ul li ul {
    background: var(--accent-bg);/* background fo the whole nav link list */
    visibility: hidden;
    opacity: 0;
    min-width: 1rem;
    position: absolute;
    transition: all 0.5s ease;
    left: 0;
    display: none;
    z-index: 1;
  }
  
  /* The drop down sub menus */
  ul li:hover > ul,
  ul li:focus-within > ul,
  ul li ul:hover,
  ul li ul:focus {
    visibility: visible;
    opacity: 1;
    display: block;
    margin-top: 0rem;
    padding-bottom: var(--nav-padding);
    border: var(--border) 2px solid;
    border-top: none;
  }
  
  ul li ul li {
    clear: both;
    width: 100%;
  }
}


/* |||| TOP NAVIGATION - menu button links --------------- */
.navHeader,
.navHeader:visited {
  width: 7rem;
  padding: 0.2rem 1rem;
  margin: 0.1rem 0.25rem;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-size: medium;
  border: 3px solid var(--null-light-green-base);
  border-radius: var(--standard-border-radius);
  background-color: var(--null-dark-green-base);
  color: var(--text);
}

.navHeader:hover,
.navHeader.current,
.navHeader[aria-current="page"] {
  background-color: var(--null-light-green-base);
  border-color: var(--null-light-green-ivy);
  color: var(--accent);
  cursor: pointer;
}


/* || TOC FOR ARTWORK ----------------------------------------- */
.table-overflow {
  overflow-x: auto;
}

.table-toc-art {
    width: 100%;
    
    th, td {
      padding: 8px;
    }
}


/* || ARTWORK */
/** https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp */
.artworkRow {
  box-sizing: border-box;
}

/* Clear floats after the columns */
.artworkRow:after {
  content: "";
  display: table;
  clear: both;
}

/* The grid: Four equal columns that floats next to each other */
.artworkColumn {
  float: left;
  width: 25%;
  padding: 5px;
}

/* Style the images inside the grid */
.artworkColumn img {
  opacity: 0.6; 
  cursor: pointer; 
}

.artworkColumn img:hover {
  opacity: 1;
}

.artwork, .artworkContainer {
  opacity: 1;
  margin: 1rem 0rem;
  padding: 5px;
  border: solid var(--border) 1px;
  border-radius: 5px;
  font-style: italic; /* affects the alt text if image is not found. */
}

/* The expanding image container */
.artworkContainer {
  position: relative;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}


/* || SlideShow */
.slideshow-img {
  width: 1005;
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.slideshow-container {
  position: relative;
}

/* Hide the images by default */
.slideshow-mySlides {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Slideshow, the showing image - set a max height */
.slideshow-mySlides > .artworkShowingImage {
  max-height: 55rem;  
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.artwork-one-image-container {
  justify-content: center;
  align-items: center;
  width: 100%;

  .artwork-one-img-show {
    max-height: 55rem;  
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}


/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.slideshow-prev,
.slideshow-next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-weight: bold;
  font-size: 20px;
  border-radius: 20px;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.slideshow-next {
  right: 0;
}

/* MOBILE: shrink the arrows a bit */
@media only screen and (max-width: 750px) {
  .slideshow-prev,
  .slideshow-next {
    font-size: smaller;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 5px;
    padding: 7px 5px;
  }
}

/* On hover, add a black background color with a little bit see-through */
.slideshow-prev:hover,
.slideshow-next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  color: var(--button-arrow-color);
}

.hidden {
  display: none;
}

/* Number text (1/3 etc) */
/* Container for image text */
.slideshow-caption-container {
  text-align: center;
  background-color: var(--accent-bg);
  color: var(--text);
  border-radius: var(--standard-border-radius);
  border: var(--border) 1px solid;
  margin: 0.5rem 0rem;

  p {
    margin: 0.25rem;
    font-size: smaller;
  }
}

.slideshow-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.slideshow-column {
  width: 24%;

  /* Add a transparency effect for thumnbail images */
  .slideshow-demo {
    opacity: 0.6;
  }

  .active,
  .slideshow-demo:hover {
    opacity: 1;
  }

  .active{
    border: var(--border) 3px solid;
  }
}



/* || Scrolling for the thumbnails of multi artwork pages */
div.scrollmenu {
  background-color: var(--accent-bg);
  border-radius: var(--standard-border-radius);
  border: var(--border) 1px solid;
  overflow: auto;
  white-space: nowrap;
  align-items: center;

  .slideshow-column {
    display: inline-block;
  }
}

/* || Dividers like between art and description for artwork */
.hr-divide {
  background: var(--border-color);
  margin: 1rem 0rem;
}


/* || OC Page - THumbnail + Name underneath */
div.ocGallery {
  float: left;
  margin: 2px;
  width: 9.5rem;
  border-color: var(--border-color);
  border-style: solid;
  border-width: 3px;
  border-radius: 5px;
}

div.ocGallery:hover {
  background-color: var(--hover-img-color);
}

div.ocGallery img {
  width: 9.5rem;
  height: 9.5rem;
  display: grid;
}

.ocGallery > a {
  text-decoration: none;
}

div.desc {
  padding: 0.25rem;
  text-align: center;
}

/* CONTACTS || Friend links. Width and height are manually set to have ~2 lines of description per link */
.friend-link-container {
  .friend-link-item {
    background-color: var(--background-container);
    border: solid 0.1rem var(--border-color);
    border-radius: 0.25rem;
    margin: 0.2rem;
    padding: 0.5rem;
    
    width: 22rem;
    height: 6rem;
    float: left;
   
    .friend-link-details {
      margin-top: 0.5rem;
      float: clear;

      div {
        float: left;
      }
      
      .friend-link-details-img {
        width: 5rem;
        margin-right: 0.4rem;
        
        img {
          image-rendering: pixelated;
        }

      }
      .friend-link-details-desc {
        font-size: small;
        width: 15.25rem;
      }
    }
  }

   /* Reduce nav side on mobile */
   @media only screen and (max-width: 400px) {
    .friend-link-item  {
      width: 18rem;
      height: 8rem;
    }
    .friend-link-details-desc {
      width: auto;
    }
  }
}

.friend-link-container:after {
  clear: both;
}

/* SHOW BANNER CODE */
pre {

  code {
    font-size: smaller;
    line-height: 0;
  }
}

/* || RELATED SERIES - Thumbnail and title */

.img-banner {
  max-height: 20rem;
  width: 100%;
  object-fit: cover;

}

.related-series-entry {
  border: var(--null-background-container-border) 3px solid;
  border-radius: var(--standard-border-radius);
  margin: 1rem 0rem;
  background-color: var(--null-background-container);

  div {
    display: grid;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: middle;
    height: 6rem;
  }

  .column-side {
      height: 6rem;
      width: 25%;
      border-right: var(--null-background-container-border) 3px solid;
      display: inline-block;
      img {
        height: 100%;
        width: 100%;
        border-top-right-radius: 0rem;
        border-bottom-right-radius: 0rem;
        object-fit: cover;
    }
  }

  .column-remaining {
    height: inherit;
    max-height: 6rem;
    width: 70%;
    display: inline-block;
    position: relative;
  }

  .desc {
    padding: 0;
    margin: 0% 0.5%;
    font-size: larger;
    text-align: left;
  }

  a {
    text-decoration: none;
    vertical-align: middle;
  }
  a:hover {
    text-decoration: none;
  }

}

.related-series-entry:hover{
  background-color: var(--hover-img-color);
}

@media only screen and (max-width: 600px) {
  .related-series-entry {
    border: var(--null-background-container-border) 2px solid;
  }

  .column-side {
    border-right: var(--null-background-container-border) 2px solid;
  }
  .desc {
    font-size: large;
  }
}


/* || TEST STUFF */
.testimg {
  border: 2px solid var(--accent-lavendar-light);
  margin-bottom: 1rem;
  padding: 1rem;
}

/* || RENJS CANVAS ------------------------------------ */
#renjs-canvas {
  max-height: 800px;
  margin: 2rem 0rem;
}

/* Less margin surrounding the game'c canvas/div for mobile */
@media only screen and (max-width: 600px) {
  #renjs-canvas {
    margin: 1rem 0rem;
  }
}

/** ANALYSIS ------------------------------------------------- */
.quote-english {
  border-inline-start: 0.35rem solid var(--border-color);
}

.quote-japanese {
  border-inline-start: 0.35rem solid var(--quote-b);
}

.quote-translation {
  border-inline-start: 0.35rem solid var(--quote-c);
}

.goroawase {
  td {
    text-align: center; 
    vertical-align: middle;
  }
}

.translate-single-img {
  max-height: inherit; 
  object-fit: cover;
}