nav {
  min-width: 100vw;
  max-width: 100vw;
  font-size: 4vmin;
  /*line-height: 6.25vmin;*/
  background-color: #151619;
  display: flex;
  /*outline: 1px dotted lime;*/
  z-index: 1000 !important;
  height: 8vmin;
}

nav a {
  padding: 1vmin 2vmin;
  /*outline: 1px dotted gray;*/
  flex-grow: 1;
  flex-shrink: 1;
  text-align: center;
  text-decoration: none;
  color: #bdbec6;
  display: block;
}

nav a:hover {
  color: white;
}

/*nav a:first-of-type {
  margin-left: 8vmin;
}

nav a:last-of-type {
  margin-right: 8vmin;
}*/

#summary:target ~ nav a[href='#summary'],
#detail:target ~ nav a[href='#detail'],
#graphs:target ~ nav a[href='#graphs'],
#controls:target ~ nav a[href='#controls'],
#config:target ~ nav a[href='#config'] {
  background-color: #22262F;
  color: white;
}

.side-button {
  flex: 0 0 6.75vmin;
  /*height: 6.75vmin; width: 6.75vmin;*/
  border: 1px transparent;
  color: #bdbec6;
  margin: 0.65vmin;
  padding: 0;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

#reload-button {
  background-color: #22262F;
  -webkit-mask-image: url(../svg/reload.svg);
  mask-image: url(../svg/reload.svg);
}

#config-button {
  background-color: #22262F;
  -webkit-mask-image: url(../svg/settings.svg);
  mask-image: url(../svg/settings.svg);
}

#reload-button:hover,
#config-button:hover {
  background-color: white;
}

/*#reload-button {
  position: absolute;
  z-index: 1002;
  bottom: 0.75vmin;
  left: 0.75vmin;
  border: 1px transparent;
  background-color: #22262F;
  color: #bdbec6;
  height: 6.75vmin; width: 6.75vmin;
  font-size: 5.25vmin;
  -webkit-mask-image: url(../svg/reload.svg);
  mask-image: url(../svg/reload.svg);
}

#reload-button:hover {
  background-color: white;
  border: 1px dotted #bdbec6;
}*/