@import url('https://fonts.googleapis.com/css2?family=PT+Mono&family=PT+Sans:ital,wght@0,400;0,700;1,400&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* Default (Light) Mode Colors */
  --background-color: #ffffff; /* White background */
  --text-color: #333333; /* Dark gray text */
  --primary-color: #007bff; /* A standard blue for links/buttons */
  --border-color: #cccccc;
  --heading-background-color: #99cc99;
  --h2-color: #515e4b;
  --aside-background-color: #dadada;
  --code-background-color: #faf0e6;
  --code-border: solid #faf0e6 1px;
  --variable-color: rgb(0%,25%,0%);
  --function-name-color: rgb(25%,0%,0%);
  --technical-background: #dddddd;
  --technical-border: solid black 1px;
  --example-background: #cccccc;
  --example-border: solid #cccccc 0.1px;
  --lisp-background: #aaaaaa;
  --lisp-border: solid #aaaaaa 0.1px;
  --header-rule-background: #003333;
  --footer-rule-background: #003333;
  --icon-bar-background: black;
  --nav-content-background: #ececec;
  --nav-content-link-text-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode Overrides */
    --background-color: #121212; /* Very dark gray/black background */
    --text-color: #e0e0e0; /* Light gray text */
    --primary-color: #8ab4f8; /* A lighter blue that stands out on dark backgrounds */
    --border-color: #444444;
    --heading-background-color: #0a7a0a;
    --h2-color: lightgrey;
    --aside-background-color: #434343;
    --code-background-color: #562b00;
    --code-border:solid #562b00 1px;
    --variable-color: rgb(4,254,4);
    --function-name-color: #c4c2c0;
    --technical-background: #404040;
    --technical-border: solid black 1px;
    --example-background: #5c5b5b;
    --example-border: solid #5c5b5b 0.1px;
    --lisp-background: #aaaaaa;
    --lisp-border: solid #aaaaaa 0.1px;
    --header-rule-background: whitesmoke;
    --footer-rule-background: whitesmoke;
    --icon-bar-background: whitesmoke;
    --nav-content-background: whitesmoke;
    --nav-content-link-text-color: blue;
  }
}

/* Apply the variables to the body */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Smooth transition when scheme changes */
}

html {
  color: var(--text-color);
  background-color: var(--background-color);
  margin-left: 4%;
  margin-right: 2%;
  font-family: "PT Serif", serif;
  line-height: 1.5
}

h1 {
  text-align: center;
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
}

h2 {
  color: var(--h2-color);
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
}

h3 {
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
}

.lisp {
   background: var(--lisp-background);
   border: var(--lisp-border);
   white-space:pre;
}

.example {
   background: var(--example-background);
   border: var(--example-border);
   white-space:pre;
}

code {
   background: var(--code-background-color);
   border: var(--code-border);
   font-family: "PT Mono";
}

.code {
   background: var(--code-background-color);
   border: var(--code-border);
   white-space: pre;
   font-family: "PT Mono";
   overflow-x: auto;
   /* Experimentally determined that this value gives a pretty good size 
      for the code block scrolling area. 
    */
   width: 75vw;
}

.technical {
   background: var(--technical-background);
   border: var(--technical-border);
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 1ex;
   padding-bottom: 1ex;
   font-size: smaller;
   font-stretch: semi-condensed;
   margin-left: 10%;
}

.credits {
   background: #eeeeee;
   font-stretch: condensed;
   font-size: 0.8em;
   text-align: right;
}

/* Styling for code items marked as function names */
.function-name {
   color: var(--function-name-color);
} 

/* Styling for code items marked as variables */
.variable {
   color: var(--variable-color);
}

a {
  color: var(--primary-color);
}

A:link
{
    text-decoration: none
}
A:active
{
    text-decoration: none
}
A:visited
{
    text-decoration: none
}
A:hover
{
    text-decoration: underline
}

/*
 * The following are for layout of the header, footer, navbar, and
 * main content.  The container class holds everything for layout
 * purposes. 
 */
.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
}

/*
 * The header rule that separates the cmucl image with the rest of the
 * page.
 */
.header-rule
{
    background: var(--header-rule-background);
    height: 20px;
}

.footer-rule
{
    background: var(--footer-rule-background);
    height: 2px;
}
/*
 * Header is for the CMUCL logo image and top separator bar. We don't
 * want any scrollbars here. 
*/
header
{
  grid-column: 1 / span 2;
  overflow: hidden;
}

/* Style for the header iframe. */
.header-frame {
  height: 85px;
  width: 100%;
  border: none;
}

/* The style for the title line of each page */
.heading-line { 
  background-color: var(--heading-background-color);
  font-size: x-large;
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
}

/*
 * Footer contins the icons, copyright, validator links, etc.  We
 * don't want any scrollbars here.
 */
footer {
  grid-column: 1 / span 2;
  overflow: hidden;
}

/* Style for the footer iframe. */
.footer-frame {
  width: 100%;
  height: 200px;
  border: none;
}  

/*
 * The navigation bar.  For desktop, it's just a list of links to
 * various pages.  For mobile, we collapse the nav bar into a
 * hamburger menu that can be expanded to show all list items.
 */
aside {
  background-color: var(--aside-background-color);
  padding-top: 5px;
  text-align: center;
  grid-column: 1
}

/*
 * Styling for the <ul> items in the navbar. We use the same for
 * mobile and desktop
 */
#nav-content ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

/*
 * Highlight to use for selected nav bar item. Same style for mobile
 * and desktop.
 */
.nav-highlight { 
  font-weight: bold;
  background-color: yellow;
}

/* 
 * When the screen is narrow, replace the navbar with a hamburger menu
 * that opens up when pressed with the regular navbar entries
 *
 * The off-screen nav is based on
 * https://www.cssscript.com/css-off-canvas-navigation-using-css-pseudo-class/
 * existing desktop page mostly unchanged.
 */
@media (max-width: 600px) {
  aside {
    width: 30px;
  }

  /* CSS for the hamburger toggle button */
  .button {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    border-radius: 0;
    /*height: 70px;*/
    width: 30px;
    cursor: pointer;
    pointer-events: auto;
    /*margin-left: 25px;*/
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  /* CSS to create the bar for the hamburger menu */
  .icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--icon-bar-background);
    transition: .3s;
  }
  .icon-bar + .icon-bar {
    margin-top: 5px;
  }
  #nav-container:focus-within .button {
    pointer-events: none;
  }

  /* 
   * CSS to convert the hamburger menu into an X t close the menu.
   */
  #nav-container:focus-within .icon-bar:nth-of-type(1) {
    transform: translate3d(0,8px,0) rotate(45deg);
  }
  #nav-container:focus-within .icon-bar:nth-of-type(2) {
    opacity: 0;
  }
  #nav-container:focus-within .icon-bar:nth-of-type(3) {
    transform: translate3d(0,-8px,0) rotate(-45deg);
  }

  /* Off-canvas navigation */
  #nav-container {
    /*position: fixed;*/
    height: 100vh;
    width: 100%;
    pointer-events: none;
  }

  #nav-container .bg {
    /*position: absolute;*/
    top: 70px;
    left: 0;
    /*width: 100%;*/
    width: 30px;
    /*height: calc(100% - 70px);*/
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    background: #000;
  }

  #nav-container:focus-within .bg { 
    visibility: visible;
    opacity: .6;
  }

  #nav-content {
    margin-top: 10px;
  /*  padding: 20px;*/
    width: 150px;
    max-width: 300px;
    /*position: absolute;*/
    top: 0;
    left: 0;
    /*height: calc(100% - 70px);*/
    background: var(--nav-content-background);
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateX(-200%);
    transition: transform .3s;
    will-change: transform;
    contain: paint;
  }

  /*
   * Styling for the links in the menu
   */
  #nav-content li a {
    padding: 10px 5px;
    display: block;
  /*  text-transform: uppercase;*/
    transition: color .1s;
    color: var(--nav-content-link-text-color);
  }

  /*
   * Styling for when we hover over the links in the navbar.  (Do we
   * really need this?))
   */
  #nav-content li a:hover {
    color: #BF7497;
  }

  #nav-container:focus-within #nav-content {
    transform: none;
  }
}