:root {
  --hdr-display:     block; /* "block" shows, "none" hides header (& Edit btn!) */
  --sb-tabs-display: none;  /* "none" to hide SB tabs */
  --show-all-pages:  none;  /* "none" hides in SB, "block" shows */
  --hdr-time:        none;  /* "none" to hide time in header */
  

  /* Base color */
  --clr-0: #5aae5d;

  /* Lighter (mix white) */
  --clr-l1: color-mix(in oklab, var(--clr-0), white 20%);
  --clr-l2: color-mix(in oklab, var(--clr-0), white 40%);
  --clr-l3: color-mix(in oklab, var(--clr-0), white 60%);
  --clr-l4: color-mix(in oklab, var(--clr-0), white 80%);
  --clr-l5: color-mix(in oklab, var(--clr-0), white 95%);

  /* Darker (mix black) */
  --clr-d1: color-mix(in oklab, var(--clr-0), black 10%);
  --clr-d2: color-mix(in oklab, var(--clr-0), black 20%);
  --clr-d3: color-mix(in oklab, var(--clr-0), black 30%);
  --clr-d4: color-mix(in oklab, var(--clr-0), black 40%);
  --clr-d5: color-mix(in oklab, var(--clr-0), black 50%);


  /* Color definitions */
  --main-clr:    #000;          /* Root text color */
  --main-bg-clr: var(--clr-l5); /* Main window BG */
  --main-em-clr: var(--clr-d5); /* Emphasized color, eg, headers, <hr>, & list markers */
  --main-hl-clr: var(--clr-l5); /* Hi-lite color, usually I make it lighter than the BG*/
  --sb-clr:      var(--clr-l5); /* Sidebar text color */
  --sb-bg-clr:   rgba(254, 254, 254, .9); /* SB BG color */
  --hdr-clr:     var(--clr-d4); /* Page header text color */
  --hdr-bg-clr:  transparent;   /* Page header background color */

  --link-color:    blue;
  --link-followed: purple;
  --link-hover:    red;
  --link-active:   yellow;
} 
/* ------------------ End of Root Defs ------------------- */

/* -------------------- Sidebar/Menu ---------------------------- */
/* Sidebar container */
.sb {  /* Basic SB Menu title size & position */
  top: 2rem; 
  left: 20px; 
  width: 130px;   height: 4rem;
  position:  fixed;   /* Does not move with page scroll */
  overflow-y: hidden; /* Clip off overflow, no scrollbars */
  z-index: 1000;      /* Keep on top of everything */
  border-radius: 20px;
  color: transparent; /* Make it invisible */
  background-color: transparent;

  & > span.db > a.t {  /* Make just the word Menu visible  */
    display: inline-block;
    margin: 0 0 1rem 1.15rem;
    color: green; 
    background-color: white;
    border: 1px solid green;
    border-radius: 20px; 
    /* margin-left:1.15rem; */
    padding: 0 20px; 
  }

  & > nav.n > ul > li { /* Make all the page links invisible */
    &>a:link, >a:visited, >a:hover, >a:active { 
      color: transparent; 
      background-color: transparent; 
      border: none; 
      outline: none !important; /* This may screw up accessibility functions */
    }
  }

  &:hover {  /* On hover make the entire sidebar show up as a rounded box with a menu of page */
    height: 40vh;
    color: white;
    background-color: var(--clr-l4);  /* Very light background */
    box-shadow: 3px 3px 6px var(--clr-d4); /* Give it a little lift off of the page */
    overflow-y: auto; /* Show scroll bar on overflow */
    transition: 
      height 0.5s cubic-bezier(.4,0,.2,1), 
      background-color 0.3s, 
      color 0.3s, 
      box-shadow 0.3s;

    &>nav.n > ul > li {
      margin-left: -5px;

      &>a:link, >a:visited, >a:active  { 
        color: var(--clr-d1);
        font-weight: 600;
        border: 1px solid transparent;
        border-radius: 10px;              /* Round the page link entries a little */
        padding: 0 15px;                  /* If BG color contrasts, give it some space to look a bit buttony */
      }

      & > a:hover { 
        color: var(--clr-d4);
        background-color: var(--clr-l2);
        border: 1px solid var(--clr-0);
        /* border-radius: 10px; */             /* Round the page link entries a little */
        /* padding: 0 20px;     */             /* If BG color contrasts, give it some space to look a bit buttony */
      }
    }
  }
}

nav > div.tabs { display: var(--sb-tabs-display); white-space:nowrap; overflow:auto; }
.tabs > * { border: 1px solid var(--sb-clr); } /* Unselected tab(s)
.sb *:focus, a { outline:none !important; }  /* No outline on anchors */
.sb button.a { border: 2px solid var(--sb-clr); }  /* selected tab */
button, summary:is(.np,.b) {  /* save & new page btns, & tabs */
  color: var(--sb-clr);
  background-color: var(--main-em-clr);
}
/*nav > ul > li:last-child { display: var(--show-all-pages); }*/ /* block, "none" hides All Pages option */
main > div.sb > p.pb { display:none; } /* Don't show the subtitle on the sidebar) */ 
/* -------------------- End of Sidebar ---------------------------- */

*, *::before, *::after { box-sizing: border-box; }  /* Include pseudo elements for consistent box-sizing */
html, body, main {
  margin:  0 !important;
  padding: 0 !important;
  border:  0 !important;
  height:  100%; 
  width:   100%;
  box-sizing:border-box;
  color: var(--main-clr);               /* Default text color */
  background-color: var(--main-bg-clr); /* Default bg color */
}
main > section {
  width: 100%; /* Full screen width */
  margin:  0;  /* Edge to edge */
  padding: 0;
}
main > section ul, ol { Margin: 0; }         /* Don't indent lists */
main > section ul ul  { Margin-top: 0; Margin-bottom: 0; }  /* Don't add space above & below lists */
ul li::marker { color: var(--main-em-clr); } /* Color the marker on unordered lists */
.l { display:none !important; }              /* Remove hash after headings on hover */
a[target="_blank"]:after { content: ""; }    /* Remove graphic after external links */

/* ----------------------------------------- */
@media (max-width: 700px) {
  main { flex-direction: column; }
  main > div:first-child {
    position: relative;
    width: 100%;
    height: auto;
    min-width: 0;
    max-width: none;
  }
  main > section { margin-left: 0; }
}
/* ----------------------------------------- */

h1, h2, h3, h4, h5, h6, .t {
  color: var(--main-em-clr);
  margin: 2rem 0 1rem 0;
  font-weight: bold;
}
h1 { font-size: 2.00rem; line-height: 2.00rem; font-weight:600; }
h2 { font-size: 1.60rem; line-height: 1.60rem; font-weight:600; }
h3 { font-size: 1.20rem; line-height: 1.20rem; font-style:italic; }
h4 { font-size: 1.05rem; line-height: 1.05rem; font-variant-caps:small-caps; }
h5 { font-size: 0.85rem; line-height: 0.85rem; font-style:italic; }
h6 { font-size: 0.75rem; line-height: 0.75rem; font-weight:800; text-transform:uppercase; }

/* p, li { font-size:1.1rem; line-height: 1.3rem; margin: .7rem 0; } */ /* Set in .article-text below */
hr { color:var(--main-em-clr); margin:.7rem 0; }
dt { font-weight: bold; } 
dd { margin-left: 1rem; }
blockquote { margin: 1rem .7rem; border-color: var(--main-em-clr); }

a, a.a, a.t {
  &:link    { color: var(--link-color); }    /* unvisited link */
  &:visited { color: var(--link-followed); } /* visited link */
  &:hover   { color: var(--link-hover); }    /* mouse over link */
  &:active  { color: var(--link-active); }   /* When clicked - appears not work? */
}

summary::marker { color: var(--main-em-clr); }  /* triangle char at left of summary */
summary.gradient:hover {
  background: linear-gradient(to right, var(--clr-l3), var(--clr-l4));
  cursor: pointer;
}
summary:focus { outline:none !important; border:none !important; } /* NOTE: This setting may screw up accessibility!! */

.inset { /* Give an inset look to a div, e.g., wrapping contents of a details section */
  width: 95%;
  margin-left: 3px;
  margin-bottom: 1rem;
  padding: 5px 10px 5px 20px;
  background-color: var(--main-hl-clr);
  box-shadow: 5px 5px 5px white, inset 5px 5px 5px var(--clr-l3);
}
.simple {  /* Simple undecorated Summary style */
  list-style: none;
  font-weight: 500;
  color: var(--main-em-clr);
}

.code {  /* code samples and computer commands */
  background-color: ivory;
  border: 1px solid pink;
  border-radius: 8px;
  padding: 0 4px; 
}

header { 
  /*display: var(--hdr-display);*/ /* Display or hide the header */
  position: fixed;
  top: 0;
  /* max-width: 100%; */
  max-width:50%; /* narrower header to leave left-most items accessible */
  right:20px; /* Put the header all the way right to uncover menus & page text at left */
  width: 95%;
  z-index: 100;
  color: var(--hdr-clr);
  background-color: var(--hdr-bg-clr);
  opacity: .8;
  & > div>div>div { display:var(--hdr-time) !important; } /* hide/show time in header */
  & > div.r.ns>div.c.tr { z-index: 1000; }                /* Put Edit button on top */
  & div div button { margin:0; padding:5px 12px; }        /* shrink the edit button */
  & div h1.c { visibility:hidden; }                       /* hide page title at the top of each page */
  & a { display:none; }                                   /* hide parent page in header sub-pages */ 
}
footer { display: none; } /* The built-in footer shows at bottom of screen over content and scrolls up with content, possibly something I did. */
.footer {  /* Alternative footer to give credit to Feather Wiki */
  width: 98%;
  height: 2rem;
  background-color: transparent;
  color: var(--clr-d4);
  text-align: center;
  line-height: 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  position: static;
  margin-top: 2rem;
  & > a { text-decoration:none; }
}
.banner-container {
  background-color: #4198df;
  margin: -9px 0 0 0 !important;
  padding: 0 !important;
  position:relative;
  width: 100%;
  height:25vh; /* Image imited to top 25% of display */
  overflow:hidden;
  top: 0;
}
.banner-container img { /* A picture extending 100% width at top of screen */
  width: 100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block; /* Picture wil be truncated on the bottom if too long */
  /*filter: brightness(50%);*/ /* Dim the pictures a bit to make the title overlay pop */
}
.banner-text { /* Title text that will overlay the banner image */
  position: absolute;
  top: 50%;       /* vertical center */
  left: 50%;      /* horizontal center */
  transform: translate(-50%, -50%);
  background: transparent;
/*  padding: 8px 16px; */  /* optional: padding for clarity */
  text-align: center;
  color:#66c6ff;
  color: #e0ecf8;
  font-size: 3.5rem;
  font-weight: 700;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; /* Make the text stand out regardless of colors in image */
}
.article-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 2rem 2rem 2rem;
  box-sizing: border-box;
/*  background-color: transparent !important;*/
}
.article-text {
  /*max-width: 900px;*/
  width: 100%;
  font-size:1.2rem; 
  line-height: 1.7rem; 
  margin: 1rem 0;
  text-align: left;
  & p {margin: 1.7rem auto; }
}