content {
  display: flex;
  flex-direction: column;
}

tabs {
  margin-top: 1em;
  /* added so you can see it in the display */
  display: flex;
  justify-content: space-evenly;
  border-bottom: var(--color-accent);
}

tabs a {
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  border-width: thin;
  width: 100%;
  text-align: center;
  padding: 2rem 0rem 0.5rem;
}

tabs a:hover {
  box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

tabs a.active {
  background-color: var(--color-bg-secondary);
}

panel {
  display: none;
}

panel.active {
  border: 1px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  padding: 1em;
}