body {
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5rem;
  padding:1rem;
  overflow-y: auto;
  height:100%;
  width:100%;
}
t-b {
  display: block;
  margin: 1rem 0rem;
  max-width: 50rem;
}
.hidden {
  display:none;
}
#about {
  position:fixed;
  top:0.25rem;
  left:0.25rem;
  z-index: 1000;
  width:max-content;
  padding: 0.25rem;
  background-color: #fefefa;
  border:2px solid black;
  cursor:pointer;
  line-height: 1.25rem;
}
#keys {
  position:fixed;
  top:0.25rem;
  left:0.25rem;
  z-index: 1000;
  max-height: calc(100% - 0.5rem);
  overflow-y:auto;
  width:max-content;
  padding: 0.25rem;
  background-color: #fefefa;
  border:2px solid black;
  cursor:pointer;
  line-height: 1.25rem;
}
#sections {
  position:fixed;
  top:0.0rem;
  right:0.25rem;
  z-index: 1000;
  width:max-content;
  padding: 0rem;
  background-color: var(--light);
  color: var(--dark);
  border:2px solid var(--dark);
  cursor:pointer;
  line-height: 0.25rem;
}
#sections a {
  display:block;
  margin:0.5rem;
  padding:0.5rem 0.25rem;
  min-width: 4rem;
  color: var(--dark);
}
#sections a.active {
  background-color: #bbb;
  color: #333;
  font-weight: bold;
}

#sections a:hover {
  cursor: pointer;
  background-color: #ccc;
}

#pages {
  position:fixed;
  top:0rem;
  right:0.25rem;
  z-index: 1000;
  width:max-content;
  padding: 0rem;
  background-color: var(--light);
  color: var(--dark);
  border:2px solid var(--dark);
  cursor:pointer;
  line-height: 0.25rem;
}
#pages a {
  display:block;
  margin:0.25rem;
  padding:0.5rem 0.25rem;
  min-width: 4rem;
  color: var(--dark);
}
#pages a.active {
  background-color: #bbb;
  color: #333;
  font-weight: bold;
}

#pages a:hover {
  cursor: pointer;
  background-color: #ccc;
}
.listheader {
  background-color:var(--dark);
  color:var(--light);
  margin:0rem;
  padding:0.5rem;
  font-size: 1.05rem;
  border:2px solid var(--dark);
}