:root {
    --bg: #d6e1a1;
    --night: #4e4e5c;
  
    /* --acc: rgba(163, 155, 141, 0.3); */
    --acc: rgba(152, 152, 152, 0.15);
  
    --sun: #c65841;
    --sun: #f00;
  
    --text: #5d4e31;
    --text-night: #C7C4D4;
    --link: #b65320;
    --link-hover: rgba(222, 115, 93, 0.4);
    --link-night: #95b5b0;
    --link-hover-night: rgba(97, 109, 179, 0.4);
  
  
    --due: #915840;
    --hwork: #4d6c4b;
    --read: #585883;
  
    --border: rgba(121, 100, 59, 0.5);
  
    --nav-width: 200px;
    --max-width: 800px;
    --br: .8rem;
  
    --save-on: 30s cubic-bezier(.87,0,.19,1);
    --save-off: 1s cubic-bezier(.87,0,.19,1);
    --night-on: 0s cubic-bezier(.87,0,.19,1);
  }
  
  @font-face {
    font-family: 'notcouriersansregular';
    src: url('../assets/notcouriersans.woff2') format('woff2'),
     url('../assets/notcouriersans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
      font-family: 'qt letter goth';
      src: url('/assets/qtlettergoth.woff2') format('woff2'),
           url('/assets/qtlettergoth.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'qt letter goth';
      src: url('/assets/qtlettergoth-italic.woff2') format('woff2'),
           url('/assets/qtlettergoth-italic.woff') format('woff');
      font-weight: normal;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'qt letter goth';
      src: url('/assets/qtlettergoth-bold.woff2') format('woff2'),
           url('/assets/qtlettergoth-bold.woff') format('woff');
      font-weight: bold;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'qt letter goth';
      src: url('/assets/qtlettergoth-bolditalic.woff2') format('woff2'),
           url('/assets/qtlettergoth-bolditalic.woff') format('woff');
      font-weight: bold;
      font-style: italic;
  }
  
  * {
    font-family: 'qt letter goth', monospace;
    /* font-family: juliamono, monospace; */
    /* font-family: notcouriersansregular, monospace; */
    box-sizing: border-box;
    font-weight: bold;
  }
  
  ::selection {
    background: var(--acc);
  }
  
  html {
    overflow-y: auto;
    scroll-behavior: smooth;
    background: var(--bg);
    color: var(--text);
    transition: opacity .3s, background var(--save-off), color var(--save-off);
    /* background: black; */
  }
  
  body {
    margin:0;
    /* padding:1rem; */
    font-size: 1rem;
    margin-bottom:1.5rem;
    background: inherit;
    opacity:0;
  }
  
  body.active {
    opacity:1;
  }
  
  img {
    max-width: 100%;
    margin-bottom:1rem;
    margin-top:.5rem;
  }
  
  /* ----------------------------- */
  
  
  /* TYPOGRAPHY
  -------------------------------- */
  p, h1, h2, h3, h4, h5, h6, ol, ul {
    max-width: var(--max-width);
    width:100%;
  }
  
  table, xmp  {
    /* margin-left: 1rem; */
  }
  
  ul, ol {
    /* margin-block-start: 1rem; */
  }
  
  ul {
    padding-left:2rem;
  }
  
  ul li {
    padding-left:.7rem;
  }
  
  ol {
    padding-left:2.5rem;
  }
  
  ol li {
    padding-left:.2rem;
  }
  
  p {
    margin:0 0 1rem 0;
    /* padding-left:1rem; */
  }
  
  h1, h2, h3, h4 {
    color: var(--header);
    margin:0 0 1rem -1rem;
  }
  
  h1 {
    font-size: 1.35rem;
    letter-spacing: -1px;
  
  }
  
  h2 {
    font-size:1.15rem;
  }
  
  h3 {
    font-size: 1rem;
  }
  
  h4 {
    font-size: .8rem;
  }
  
  h5 {
    font-size: .8rem;
    margin: 2rem 0 .5rem 0;
  }
  
  a {
    transition: color .1s ease-in-out;
  }
  
  a:hover {
    background: var(--link-hover);
  }
  
  body.saving a:hover {
    background: var(--link-hover-night);
  }
  
  xmp {
    padding: .5rem;
    background: var(--acc);
    overflow-x: scroll;
    max-width: var(--max-width);
    font-size: .9rem;
    font-family: consolas, monospace;
    margin-bottom: 2rem;
    margin-top: 2rem;
    font-weight: normal;
  }
  
  hr {
    border:none;
    border-bottom:1px solid;
    color: inherit;
    margin:1rem 0;
    opacity: 1;
    width:calc(100% + 3rem);
    margin-left:-1.5rem;
    /* position: relative; */
  }
  
  kbd {
    background: var(--acc);
    display: inline-block;
    padding:2px 4px;
    margin-right:3px;
    border-radius:5px;
    font-family: inherit;
  }
  
  th, td {
    padding:.5rem;
    width:25%;
  }
  
  th {
    background: var(--acc);
    font-size: .8rem;
    text-align: left;
  }
  
  table, td, th {
    border: 1px solid;
  }
  
  /* tr:first-child td, th {
    border-top: none;
  }
  
  tr:last-child td {
    border-bottom: none;
  }
  
  tr td:first-child, tr th:first-child {
    border-left: none;
  }
  
  tr td:last-child, tr th:last-child {
    border-right: none;
  } */
  
  table {
    border-collapse: collapse;
    border:none;
  }
  
  table ul {
    margin: .5rem 0;
  }
  
  table.grades {
    max-width: var(--max-width);
  }
  
  table.grades tr td:first-of-type {
    width:10%;
    text-align: center;
  }
  
  table.grades tr td:last-of-type {
    width:90%;
  }
  
  .caption {
    font-size:80%;
    margin-top:-.8rem;
    margin-bottom:1rem;
    max-width:500px;
  }

  .sidebar a {
    color: var(--text-color); /* Change this to your preferred color */
    text-decoration: none;
  }
  
  
  .due {
    font-size: 80%;
  }
  /* ----------------------------- */
  
  
  /* MAIN STRUCTURE
  -------------------------------- */
  #main {
    margin-left: 220px; /* Matches the width of the sidebar */
    padding: 2rem;
    display: flex;
    justify-content: center;
    background: inherit;
    min-height: calc(100vh - 1.5rem);
  }

  .sidebar {
    background-color: var(--sidebar-bg);
    width: 220px;
    padding: 2rem 1.5rem;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
  }
  
  .inner {
    width:100%;
    padding: 0 1rem;
    background: inherit;
    /* display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--max-width); */
  }
  
  /* NAV */
  
  #nav {
    background:inherit;
    height:100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-flow: column;
    width:var(--nav-width);
    padding:.5rem;
    border-right:1px solid;
    position: fixed;
    justify-content: space-between;
    padding-bottom:1.5rem;
  }
  
  nav {
    /* opacity:0; */
    transition: opacity .3s;
  }
  
  nav.active {
    opacity:1;
  }
  
  
  .nav-inner {
    display: flex;
    flex-flow: column;
  }
  
  #nav a {
    text-decoration: none;
    color: var(--text);
  }
  
  #nav a.active {
    text-decoration: underline;
  }
  
  #nav details {
    display: flex;
    flex-flow: column;
    margin-left:1.2rem;
  }
  
  #nav details summary {
   margin-left:-1.2rem;
   width:calc(100% + 1.2rem);
   margin-bottom:0;
   padding:0;
  }
  
  details summary::marker {
    display: none;
  }
  
  details summary::-webkit-details-marker {
    display:none;
  }
  
  details summary {
   list-style:none;
   cursor:pointer;
   /* margin-bottom:1rem; */
   margin-left:-1rem;
   padding:.2rem 0;
   width:calc(100% + 1rem);
  }
  
  details[open] > summary {
    margin-bottom:1rem;
    background: var(--acc);
  }
  
  details[open] > summary:after {
   content: ' -';
  }
  
  details > summary:after {
   content: ' +';
  }
  
  details summary:hover {
    background: var(--link-hover);
  }
  
  body.saving details summary:hover {
    background: var(--link-hover-night);
  }
  
  details summary::selection {
    background:transparent;
  }
  
  .current-season {
    margin-top:1rem;
  }
  
  .current-class {
    padding-left:1.2rem;
    display: flex;
    flex-flow: column;
    margin-bottom:1rem;
  }
  
  button {
    color:inherit;
    cursor:pointer;
  }
  
  .lightswitches {
    height:100%;
    margin-bottom: .5rem;
    margin-top: -.5rem;
  }
  
  .lightswitches div {
    display: flex;
    /* justify-content: space-between; */
    margin-top:.5rem;
  }
  
  .lightswitches button {
    width:20px;
    height:20px;
    border:1px solid;
  }
  
  .day-btn {
    margin-right:.5rem;
    background:var(--bg);
  }
  
  .night-btn {
    background:var(--night);
  }
  
  .ray-btn {
    background: linear-gradient(90deg, rgba(251, 230, 216, 0.4) 0%, rgba(24, 39, 88, 0.4) 100%);
    position: relative;
  }
  
  .ray-btn::after {
    position: absolute;
    bottom:0;
    left:30px;
    content:"(may slow page)";
    pointer-events: none;
    width: 160px;
    text-align: left;
    opacity: 0;
  }
  
  .ray-btn:hover::after {
    opacity:1;
  }
  
  #icon {
    /* display: flex; */
    position: relative;
    height:32px;
    margin-top:.5rem;
    flex-shrink: 0;
  }
  
  #icon img{
    max-width:32px;
    margin:0;
    position: absolute;
    bottom:0;
    left:0;
  }
  
  .icon-day {
    transition: opacity var(--save-off);
  }
  
  .icon-day.saving {
    opacity:0;
    transition: opacity var(--save-on);
  }
  
  .icon-day.saving.night-time {
    transition: var(--night-on);
  }
  
  .icon-night {
    opacity:0;
    transition: opacity var(--save-off);
  }
  
  .icon-night.saving {
    opacity:1;
    transition: opacity var(--save-on);
  }
  
  .icon-night.saving.night-time {
    transition: opacity var(--night-on);
  }
  /* ----------------------------- */
  
  
  /* CALENDAR
  -------------------------------- */
  .week {
    display: none;
  }
  
  .cal-inner {
    margin-top: 6.5rem;
  }
  
  #cal-header {
    position: fixed;
    width:100%;
    background: inherit;
    margin-left: -1.5rem;
    top:0;
    padding:.5rem;
    border-bottom: 1px solid;
  }
  
  #cal-header h3 {
    margin-left:0;
  }
  
  .cal-nav button {
    background: transparent;
    border:1px solid;
    padding: .2rem .5rem;
    border-radius: 3px;
  }
  
  select {
    margin-bottom:1rem;
    background: transparent;
    padding: .2rem;
    border: 1px solid;
    color:inherit;
    border-radius: 3px;
  }
  
  select option {
    color: var(--text);
    font-family: inherit;
  }
  
  .reading {
    list-style: square;
  }
  
  .hwork {
    list-style: circle;
  }
  
  .proj, .ex {
    text-decoration: none;
    /* font-weight: bold; */
    /* text-transform: uppercase; */
  }
  
  .proj::before {
    content: '<';
  }
  
  .proj::after {
    content: '>';
  }
  
  .ex::before {
    content: '[';
  }
  
  .ex::after {
    content: ']';
  }
  
  
  /* ----------------------------- */
  
  
  /* COMMUNITY
  -------------------------------- */
  .community {
    display: flex;
  }
  
  .community .half {
    padding:0;
    margin-bottom: .5rem;
    width:50%;
  }
  
  .community .half div {
    display: flex;
    align-items: center;
    margin-bottom:.5rem;
  }
  
  .community .half div span {
    display: inline-block;
    width:16px;
    height:16px;
    /* border: 1px solid; */
    margin-right: .5rem;
    /* margin-bottom: -.2rem; */
    text-align: center;
  }
  
  .community .half div span img {
    max-width: 16px;
    max-height: 16px;
    margin:0;
  }
  
  .community div a {
    display: inline-block;
  }
  
  .inactive {
    pointer-events: none;
    text-decoration: none;
    opacity:.5;
  }
  /* ----------------------------- */
  
  /* LIBRARY
  -------------------------------- */
  .library-shelf {
    display: flex;
    flex-wrap:wrap;
    gap:1rem;
    align-items: flex-start;
  }
  
  .library-shelf h4 {
    padding: .7rem;
    margin-bottom:0;
    margin-left: 0;
    border-bottom: 1px solid;
    background: var(--acc);
  }
  
  .library-category {
    display: flex;
    flex-direction: column;
    width:calc(50% - .5rem);
    /* padding:.5rem; */
    border:1px solid;
  }
  
  .library-category div {
    display: flex;
    flex-direction: row;
    width:100%;
    border:none;
    border-bottom:1px solid;
  }
  
  .library-shelf a {
    color:inherit;
    display: flex;
    text-decoration: none;
    width:100%;
  }
  
  .library-pdf {
    width:auto !important;
    border-left:1px solid;
    padding:.5rem;
  }
  
  body.saving .library-shelf a {
    color:inherit;
  }
  
  .library-category div:last-child {
    border-bottom:none;
  }
  
  .library-shelf a span {
    width:100%;
    padding:.7rem;
  }
  
  .library-shelf a span:first-child {
    border-right:1px solid;
    width:180px;
    flex-shrink: 0;
  }
  /* ----------------------------- */
  
  
  /* SCREENSAVER
  -------------------------------- */
  html.saving {
    background:var(--night);
    color:var(--text-night);
    transition: opacity .3s, background var(--save-on), color var(--save-on);
  }
  
  html.saving.night-time {
    transition: opacity .3s, color var(--night-on);
  }
  
  html a {
    color: var(--link);
    transition: color var(--save-off);
  }
  
  html.saving a {
    color:var(--link-night);
    transition: color var(--save-on);
  }
  
  html.saving.night-time a {
    transition: var(--night-on);
  }
  
  html.saving #nav a {
    color:var(--text-night);
    transition: color var(--save-on);
  }
  
  html.saving.night-time #nav a {
    transition: color var(--night-on);
  }
  
  .sun {
    width:50px;
    height:50px;
    background: var(--sun);
    position: fixed;
    top:50%;
    left:calc(50% + 100px);
    /* left:50%; */
    transform: translate(-50%, -50%);
    z-index: 99;
    transition: var(--save-off);
    mix-blend-mode: overlay;
    pointer-events: none;
    /* border-radius: 50%; */
  }
  
  .sun div {
    position: absolute;
    /* background: #6bea3d; */
    background: #dfe47a;
    mix-blend-mode: exclusion;
    width:130%;
    height:130%;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:160%;
    height:160%;
    /* opacity: 90%; */
    /* filter: hue-rotate(210deg); */
    filter: hue-rotate(1160deg);
    display: none;
    /* opacity: 0; */
    /* transition:1s; */
    /* border-radius: 50%; */
  }
  
  .sun div.active {
    display: block;
    /* opacity: 1; */
  }
  
  .sun.saving {
    top:110%;
    transition: var(--save-on);
  }
  
  .sun.saving.night-time {
    transition: var(--night-on);
  } 
  
  .moon {
    width:20px;
    height:20px;
    background: var(--text-night);
    position: fixed;
    top:-40%;
    right:10%;
    z-index: 99;
    transition: var(--save-off);
    mix-blend-mode: exclusion;
    pointer-events: none;
  }
  
  .moon.saving {
    top:10%;
    transition: var(--save-on);
  }
  
  .moon.saving.night-time {
    transition: var(--night-on);
  }
  /* ----------------------------- */
  
  
  footer {
    position: fixed;
    height:1.5rem;
    width:100%;
    background:inherit;
    bottom:0;
    left:0;
    border-top:1px solid;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding:0 .5rem;
    line-height: 1.5rem;
    font-size: .8rem;
  }
  
  .mobile, .sand.mobile {
    display: none;
  }
  
  .no-transition {
    transition:none;
  }
  
  
  /* MEDIA QUERY
  -------------------------------- */
  
  
  @media only screen and (max-width: 1000px) {
    .library-shelf div {
      width:100%;
    }
  }
  
  @media only screen and (max-width: 700px) {
    html {
      font-size:1rem;
    }
  
    body {
      margin-bottom:0;
    }
  
    #main {
      margin-left: 2rem;
      padding: 1rem .5rem;
      /* min-height: 100vh; */
    }
  
    #nav {
      width:100vw;
      /* position: relative; */
      z-index: 9;
      padding:1rem;
      line-height: 2rem;
      font-size: 1.1rem;
    }
  
    nav {
      transform: translateX(calc(-100vw + 2rem));
      /* transition: transform .2s ease-in-out; */
    }
  
    nav.active {
      transform: translateX(0);
    }
  
    footer {
      /* display: none; */
      position: relative;
      flex-shrink: 0;
      bottom: -1rem;
      left: -1rem;
    }
  
    .m-nav-btn {
      position: absolute;
      top:0;
      left:0;
      height:100vh;
      width:2rem;
      /* background:var(--bg); */
      background: inherit;
      border:none;
      border-right:1px solid;
      border-left:1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      z-index: 10;
    }
  
    .m-nav-btn.active {
      left:auto;
      right:0;
    }
  
    .m-nav-btn::after {
      content:'menu';
      writing-mode: vertical-rl;
      text-orientation:upright;
      -webkit-text-orientation: upright;
    }
  
    .m-nav-btn.active::after {
      content:'close menu';
    }
  
    .title {
      line-height: 1rem;
    }
  
    .lightswitches button {
      width: 35px;
      height: 35px;
    }
  
    #icon {
      bottom:-1rem;
    }
  
    .sun {
      left: calc(50% + 1rem);
    }
  
    #next, #prev {
      display:none;
    }
  
    #cal-header {
      padding:1rem 3.5rem .5rem .5rem;
    }
  
    select {
      width: 100%;
    }
  
    .library-shelf {
      font-size:90%;
    }
  
    .library-shelf a span:first-child {
      width:40%;
    }
  
    .library-pdf {
      display: none !important;
    }
  
  }