/* Hi.  I tried to comment this code so you can change it with basic css knowledge. */

  /* change your fonts here.  I used some default system font stacks that should account for what most computers and phones already have installed.
  */

:root {
  --font-system-body: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     /* this is the font for most of the text on the page. */
  --font-system-header: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; 
     /* this is the font for large headers using the h1, h2, h3, etc tags.*/
  --font-system-em: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
   /* this is the font for italics using the <em> tags. This is non-standard styling, but I like it cuz it makes me pay  more attention to italics. */
}

 /* Below here are the colors for light and dark themes.  The reader can switch between colors by pressing the button with the sun/moon on the menu.  I used colors from the Catpuccin color theme.  You should change this to whatever you want.  */

[data-theme="light"]  {
  --sidebarbg: #dce0e8;
  --sidebartext:#4c4f69;
  --bodybg:#e6e9ef;
  --bodytext:#4d4449;
  --accent:#1e66f5;
  --darkaccent:#001eca;
}

[data-theme="dark"]  {
  --sidebarbg: #11111b;
  --sidebartext:#cdd6f4;
  --bodybg:#1e1e2e;
  --bodytext:#cdd6f4;
  --accent:#f38ba8;
  --darkaccent:#d66666;
}

/*  Here's some reset.css so that the styling should appear the same on all browsers.

  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Aight here's the meat and potatoes of the styling. */

body {
  display: flex;
  flex-flow: space-between;
  height: 100vh;
  font-family: var(--font-system-body);
  margin: 0;
  color: var(--bodytext);
  line-height: 1.5em;
  font-size: 18px;
  background-color: var(--bodybg);
  transition: background 0.2s;
}

main {
  flex: 100%;
  overflow: auto;
  padding: 2rem 2rem;
}

/* text size and styling */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-system-header);
  font-weight: 300;
  margin-top: 3rem;
  color: var(--bodytext);
  margin-bottom:1rem;
}

p {margin-bottom:1rem;}

em {
  font-family: var(--font-system-em);
}
strong {text-decoration: underline;
}

h1    { font-size: max(6vw,42px); font-weight: 100; line-height: 1em; margin-bottom:1em;;} 
h2    { font-size:max(4vw, 42px); font-weight: 400;  line-height: 1em;} /* 42px */
h3    { font-size: 1.625em; font-weight: 700; } /* 26px */
h4    { font-size: 1.25em;   } /* 20px */
h5, p,li { font-size: 1em;      } /* 16px */
h6    { font-size: 0.8125em; } /* 13px */

article {
  max-width: 1000px;
}

h2 {
color: var(--sidebartext);
padding: 1rem 1rem 0rem 0rem;
border-bottom: 1px solid var(--bodytext);}

h3 {text-decoration: underline;}

.credits {font-size: smaller;}

ol {margin: 0;
padding: 0;}

ol > li {
  counter-increment: item;
  list-style: none inside;
  margin: 20px 0;
  overflow: hidden;
  line-height: 1.5em;
}

ol > li::before {
  content: counter(item);
  margin-right: 10px;
  border-radius: 50%;
  width: 30px;
  height:30px;
  background: var(--bodytext);
  color: var(--bodybg);
  text-align: center;
  float: left;
  font-weight: 700;
  position: relative;
}

 /* end text styling */

  /* table of contents */

nav {
  display: flex;
  flex: 1 1 280px;
  background-color: var(--sidebarbg);
  min-width: 280px;
  padding: 1.5rem;
  overflow-y: auto;
  color: var(--sidebartext);
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}

nav ul {padding-inline-start: 20px;}

nav ul ul li  {
  font-size: 95%;
  opacity:90%;
}
nav ul ul ul li {
  font-size: 90%;
  opacity:80%;
}

 /* Dropdown Button */
 .dropbtn {
  display: none;
  transition: all 0.3s;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  border: none;
  background: none;
  color: var(--darkaccent);
  transition: all 0.3s;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: flex;
}

/* Dropdown Content */
.dropdown-content {
  display: flex;
  position: relative;
  min-width: 160px;
  z-index: 1;
}




 /* END table of contents */


 /* link colors */

nav a {
  color: var(--sidebartext);
  text-decoration: none;
}
main a {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
nav a:visited {
  color: var(--sidebartext);}

a:visited {
  color: var(--accent);}

a:hover, button:hover {
  color: var(--darkaccent);
text-decoration: underline;
}

main a::after{
  content: " ↗";
  vertical-align: super;
    font-size: x-small;
}

.active {
  color: var(--accent);
  font-weight: bold;
}

 /* end link colors */

/* styling on main part of page */

main ul {
  list-style: outside;
  padding-left: 1.25rem;
}

main ul li {
  padding-bottom:.8rem;}

details {
    border: 1px dashed var(--sidebartext);
    background: var(--sidebarbg);
    color: var(--sidebartext);
    padding: 1rem;
    margin: 4rem 0rem 4rem 0rem;
    border-left: 3px solid var(--accent);
  }

summary:hover {
    color: var(--accent);
font-style: italic;}


details[open] summary{
    border-bottom: 1px dashed var(--sidebartext);
    padding-bottom:.5rem;
  }

details[open] ul {padding-top:1rem}

blockquote {border-left: 3px solid var(--accent);
  background:var(--sidebarbg);
  margin: 1.5em 10px;
  padding: 0.5em 10px;}

  pre {
    background-color: var(--sidebarbg);
    color: var(--darkaccent);
    tab-width: 1;
    padding: 1em;
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: auto;
    border: 1px solid var(--darkaccent);
    tab-width: 1;;
    width: 100%;
    margin: 0;
    font-family: 'Consolas', monospace;
}


/* header menu and theme toggle */

 /* first, a button styling reset from the defaults... */
button {
  border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    line-height: normal;
    transition: all .3s;
}


button {
  max-width: 100%;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  transition: all var(--global-transition-time) ease-in-out;
  border-radius: 2rem;
  cursor: pointer;
  margin: auto;
  color: var(--bodytext);
  background: var(--accent);

}

button a, button a:visited {  color: var(--bodybg);}

button a:hover {color: var(--bodybg);}

div.themetoggle {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  max-width: 100%;
justify-content: space-around;
}

label.themetoggle {
  text-align: center;
  font-size: x-small;
}
.toggle {display: flex;
flex-direction: column;
justify-content: center;
max-width: 100%;}
 /* end header and theme toggle code */


/*////////////////////////
VERY IMPORTANT!!!  Changing layout on mobile view
////////////////////////*/

@media (max-width: 700px) {
  body {flex-direction: column;}

  html, body {margin: 0; height: 100%; overflow: hidden}

  nav {
    min-height: 90px;
    max-height: 90px;
    background-color: var(--sidebarbg);
    min-width: 240px;
    padding: 1.5rem 1rem 0rem 1rem;
    overflow: visible;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    position: sticky;
    top:0px;
    width: 100%;
  border-bottom: 1px solid var(--sidebartext);}

div.themetoggle {
      position:relative;
      top:-8px}
    
button.themetoggle{
    margin: 0;
   }

   .toggle {margin-left:10px}
  
label {
  background-color: var(--sidebarbg);
}
 

  aside {
    position: fixed;
    left: -16px;
    top: 65px;
    width: 80vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s;
    background-color: var(--sidebarbg);
    opacity:98%;
    padding: 2.5rem 1rem 2.5rem 1rem;
border: 1px solid var(--sidebartext);
  }
  
  #toc>ul {
    width: 80vw;
    overflow-y: auto;
    list-style: inside;
    max-width: 100%;
    max-height: 100vh;    
    overflow-y: auto;
    overflow-x:hidden
    word-wrap: break-word;
  }
  
  aside ul li {
    padding-bottom:.5rem;
    }

/* Dropdown menu button */

  .dropbtn {
    background: transparent;
    color: var(--sidebartext);
    font-size: 50px;
    border: none;
    cursor: pointer;
    display: flex;
    position: relative;
    top:-15px;
    padding-left: 5px;
  }

  /* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:flex;
  position: absolute;
  z-index: 1;} 
  
}