*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
}

:root {
  color-scheme: light dark;

  --dark: #1f1f1f;
  --darker: #121212;
  --light: #dddddd;
  --highlight: #D88388;
  --nav-bg-light: #F0F0F0;
  --footer-bg-light: #FAFAFA;
  --h2-bg: #A69AA8;
}

header {
  background: var(--dark);
  width: 100%;
  top: 0; 
}

nav ul {
    display: flex;
    overflow-x: auto;
    list-style: none;
    padding: 0;
    white-space: no-wrap;
  }
    nav ul li {
      /*line-height: 2em;*/
      padding: 15px;
    }

    /* currently active nav link */
    nav ul li[current] a {
      color: var(--highlight);
    }
        
nav a {
    color: inherit;
    text-decoration: none;
  }

nav a:hover {
    background-color: inherit;
    color: inherit;
    text-decoration: underline;
  }

nav ul li {
  background: light-dark(var(--nav-bg-light), var(--dark));
  color: light-dark(black, var(--light));
}
    nav ul li:first-child {
      color: var(--highlight);
    }

body {
  color: light-dark(var(--dark), var(--light));
  background-color: light-dark(white, var(--darker)); 
  font-family: Helvetica, arial, sans-serif; 
  min-height: 100vh;
}

main {
  max-width: 650px;
  padding: 0 10px;
  margin: 0 auto;
  line-height: 1.5;
}

main a {
  text-decoration: none;
  color: var(--highlight);
}
  main a:hover {
    text-decoration: underline;
  }

/* GOS
h1 {
    font-size: 2.25rem;
    line-height: 2.75rem;
    letter-spacing: 0;
}

h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0;
}

h3 {
    font-size: 1.375rem;
    line-height: 1.75rem;
    letter-spacing: 0;
}

h4 {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.009375rem;
}

h5 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.00625rem;
}

h6 {
    font-size: 0.6875rem;
    line-height: 1rem;
    letter-spacing: 0.03125rem;
}*/

h2, h3, h4, h5, h6 {
  padding: 40px 0 20px;
}

h1 {
  padding: 30px 0;
}

main p { 
  padding: 0.5em 0;
}

hr {
  margin: 50px 0 25px;
}

img {
  width: 100%;
}

/* a:focus */
/* Add a:focus styling for selecting links via tab */

.up {
  margin-top: 50px;
  text-align: right;
}

/* invert black images in dark mode;
    but how to in dark mode only? */
.invert { 
  filter: invert(80%);  
}  

table {
  overflow-x: auto;
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  /*white-space: nowrap;*/  
}
    thead {
      background: var(--dark);
    }
    
    th, td {
      border: 1px solid;
      padding: 0.5em
    }

blockquote {
  padding-left: 20px;
  border-left: 20px solid var(--light);
}
    
footer {
  margin-top: 50px;
  padding: 30px 20px 30px;
  font-size: 18px;

  background: light-dark(var(--footer-bg-light), var(--dark));
  color: light-dark(black, var(--light));
}

  footer ul {
    list-style: none;
    gap: 10px;
  } 

footer a {
    color: inherit;
  }

  footer p {
    padding: 5px 0;
  }
    
    /* Copyright & Flosha Sign */

    footer>div {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    
    footer>div p {
      display: inline-block;
      border-top: 1px solid;
      padding-top: 30px;
      margin-top: 30px;
      font-size: 16px;
      width: 150px;
      order: 1;
    }

    footer>div div {
      order: 2;
      display: flex;
      align-items: center;
    }

footer img {
      max-width: 80px;
      margin: -80px 15px 0;
    }


@media (min-width: 1000px) {

  footer img {
        max-width: 100px;
  }
}