body {
  font-family: monospace;
/*}
.content {*/
  max-width: 80%;
  margin: auto;
}
ul.nav {
  text-align:center;
  font-size:1.2em;
  font-weight:bold;
  list-style-type:none;
}
ul.nav li {
  display:inline-block;
}
ul.nav li a {
  display:block;
  text-decoration: none;
}
ul.nav li #active {
  ;
}
@media only screen and (max-width: 768px) {
  /* for phones */
  body {
    max-width: 95%;
  }
  ul.nav {
    overflow: auto;
    white-space: nowrap;
    border-right:2px solid grey;
  }
  ul.nav li {
    margin-bottom:2%;
  }
  ul.nav li a {
    padding:3px 7px;
  }
  ul.nav li #active {
    ;
  }
} 
@media only screen and (min-width:768px) {}
@media only screen and (min-width: 1280px) {
  /* computer monitors */
  body {
    font-size: 1vmax;
  }
}
.text { /* new */
    padding: 3%;
    word-wrap:break-word;
}

/* default colors */
body {
  background-color: #2c2c2c;
  color: #acc1d3; /*silver grey*/
}
ul.nav li #active {
  color:#acc1d3;
  border-bottom:3px solid #acc1d3 ;
}
a:link { /* unvisited link */
  color: #ffbc06; /*yellow*/
}
a:visited {
  color: #4ac1ff; /*blue*/
}
a:hover {
  color: white; /* mouse over link */
}
.text{
    background-color: #1a1a1a;
}
.fill {
    background-color: #1a1a1a;
}
/* https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports */
@supports (color: var(--)) {
  :root {
    --background: #2c2c2c; /*light grey*/
    --mainfont: #acc1d3; /*silver grey*/
    --fill: #1a1a1a; /*darker grey*/
    --fresh-link: #ffbc06; /*yellow*/
    --visited-link: #4ac1ff; /*blue*/
    --hovered-link: white;
  }
  body {
    background-color: var(--background);
    color: var(--mainfont);
  }
  ul.nav li #active {
    color: var(--mainfont);
    border-bottom:3px solid var(--mainfont);;
  }
  a:link { /* unvisited link */
    color: var(--fresh-link);
  }
  a:visited {
    color: var(--visited-link);
  }
  a:hover {
    color: var(--hovered-link); /* mouse over link */
  }
  .text{
      background-color: var(--fill);
  }
  .fill {
      background-color: var(--fill);
  }
}
/* old */
/* area of higher contrast for text content */
.section {
    background-color: #1a1a1a;
}
.buffer {
    padding: 3%;
}