:root {
      background: var(--color-base); 
      color: var(--color-text);
      font: 14px Sans-Serif;
      --color-base: white;
      --color-alt: whitesmoke;
      --color-brand: #333;
      --color-text: black;
      --color-text-invert: white;
      --color-text-link: royalblue;
      --color-border: lightgray;
      --color-hover: lightgray;
      --color-base-translucent: rgba(255,255,255,0.85);
   }
   @media (prefers-color-scheme: dark) {
      :root {
         --color-base: black;
         --color-alt: #171717;
         --color-brand: #333;
         --color-text: #bababa;
         --color-text-invert: white;
         --color-text-link: cornflowerblue;
         --color-border: #444;
         --color-hover: #444;
         --color-base-translucent: rgba(0,0,0,0.85);
      }
   }  
   #key { color:var(--color-text-link); }
   #main { width:fit-content; min-width:375px; }
   #arrow { color:var(--color-text-invert); }
   #home { font-size:2.750em; float:right; }
   #topright { verticle-align:middle; float:right; padding-left:5px; padding-right:15px; padding-top:24px; padding-bottom:0px; }
   table, td, th { border-collapse:collapse; margin:0px; padding:5px; } 
  /* th { position:-webkit-sticky; position:sticky; top:0; font-weight:600; background:var(--color-brand); color:var(--color-text-invert); text-align:left; vertical-align:bottom; }*/
   th { padding-top:10px; padding-bottom:10px; position:-webkit-sticky /*Safari*/; position:sticky; top:0; font-size:14px; background:var(--color-brand); color:var(--color-text-invert); text-align:left; vertical-align:bottom; }
   th:first-child{ border: 0px solid #333; border-radius: 5px 0px 0px 0px; }
   th:last-child{ border: 0px solid #333; border-radius: 0px 5px 0px 0px; }  
   .arrows { width:14px; height:14px; }
   tbody>tr { border-width:1px 0px; border-style:solid; border-color:var(--color-border); background:var(--color-alt);}
   tr:nth-child(even) { background:var(--color-base); }
   .tar { text-align:right; }
   .icon { height:34px; width:34px; border-radius:50%; }
   .smallicon { height:24px; width:24px; border-radius:50%; top:10px; left:20px;}
   .npcicon { width:18px; height:18px; text-align:center; vertical-align:middle; z-index: 9999;  border: 1px solid cornflowerblue; padding: 15px; border-radius: 50px; }
   .books { font-size:1.000em; float:right; padding-right:5px; }
   .photo { height:54px; width:54px; border-radius: 5px 5px 5px 5px; }
   img { margin:0; padding:0; border:0; }
   h2 { width:fit-content; min-width:375px; }
   p { width:fit-content; min-width:375px; }
   a { text-decoration:none; color:var(--color-text-link); }
   a:hover { background:var(--color-hover); }
   #nav { margin-left:-8px; position:-webkit-sticky /*Safari*/; position:sticky; left:0; bottom:0; background:var(--color-base-translucent); width:188px; height:52px; border-radius:14px; }
   @media print { #nav { display:none; } } 
   .button, .button_inactive { display:inline-block; margin-left:10px; margin-top:10px; height:32px; width:32px; border:1px solid var(--color-border); border-radius:35%; font-size:24px; vertical-align:middle; text-align:center; }
   .button { background:var(--color-alt); }
   .button_inactive { background:none; color:var(--color-border); }

.navbar {
  overflow: hidden;
  background-color: #333;
  border-radius: 5px 5px 5px 5px;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 14px;
  color: white;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 14px;  
  border: none;
  outline: none;
  color: white;
  padding: 12px 14px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}
 
.dropdown-content a:first-child {
  border-radius: 5px 5px 0 0;
}

.dropdown-content a:last-child {
  border-radius: 0 0 5px 5px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.show {
  display: block;
}