:root {
    --light-color:#FFEBD0;
    --flashy:#FD8916;
    --greyish:#7697A0;
    --dark:#17616E;
    --almost-black:#173b61;
}
.topnav {
  background-color: var(--light-color);
  color: var(--almost-black);
}

.topnav a {
    color: var(--almost-black);
}

.topnav a:hover {
  background-color: var(--greyish);
  color: var(--almost-black);
  border-radius: 16px;
}

.flashy.background {
    background-color: var(--flashy);
    color:var(--dark);
    .urlextern {
        color:var(--greyish);
    }
}

.dark.background {
    background-color: var(--almost-black);
    color:var(--flashy);
    .urlextern {
        color:var(--greyish);
    }
}

.flashy.dark {
    fill:var(--almost-black);
    background-color: var(--flashy);
}

.box {
    color: var(--dark);
    background: var(--light-color);
    .urlextern {
      color:var(--orange);
    }
}

.flashy.background > .box {
  border-color: var(--almost-black);
}

.dark.background > .box {
  border-color: var(--flashy);
}

span.highlight {
  position: relative;
  font-style: italic;
}

span.highlight:after {
  background-color: var(--flashy);
  z-index:-1;
  content:" ";
  height: 1rem;
  position:absolute;
  left: 0;
  margin-left: -0.5rem;
  top: 0.2rem;
  width: calc(100% + 1.5rem);
  transform: skew(-18deg);
}