.navlink {
  display: inline-block;
  background-color: var(--header-bg) !important;
  color: var(--header-text) !important;
  outline: 0 !important;
  border: 2px solid var(--link-normal);
  width: 15em;
  line-height: normal;
  font-family: var(--header-fonts);
  font-variation-settings: var(--header-variations);
  text-align: center;
  font-size: 1.333em;
  margin: auto;
  transition: border 0.1s, box-shadow 0.2s !important;
}

.navlink:hover {
  color: var(--header-text) !important;
  border: 2px solid var(--link-hover);
  box-shadow: 0 0 20px var(--link-hover);
  transition: border 0.1s, box-shadow 0.2s !important;
}

.navlink:active {
  color: var(--header-text) !important;
  border: 2px solid var(--link-active);
  box-shadow: 0 0 20px var(--link-active);
  transition: border 0.1s, box-shadow 0.2s !important;
}

.lightswitch {
  background-color: var(--header-bg);
  border: 2px solid var(--link-normal);
  font-size: 1.333em;
  width: auto;
  line-height: normal;
  text-shadow: 0 0 0 transparent !important;
  font-family: inherit;
  color: white; /* This is mainly just to make the validation tests happy.  This button should only have emojis in it, so it's honestly a non-issue.  What happens is that it assumes the text within is a default black, which admittedly don't have great contrast with the shade of gray used on the background, thus producing the flag. */
  cursor: pointer;
  transition: border 0.1s, box-shadow 0.2s !important;
}

.lightswitch:hover {
  border: 2px solid var(--link-hover);
  box-shadow: 0 0 20px var(--link-hover);
  cursor: pointer;
  transition: border 0.1s, box-shadow 0.2s !important;
}

.lightswitch:active {
  border: 2px solid var(--link-active);
  box-shadow: 0 0 20px var(--link-active);
  cursor: pointer;
  transition: border 0.1s, box-shadow 0.2s !important;
}