nav {
  --nav-height: 50px;
  --hover-color: #ffc255;
  display: flex;
  flex-flow: row nowrap;
  background-color: var(--highlight-color);
  padding: 0 20px;
  height: var(--nav-height);
  width: 100%;
  justify-content: center;
  box-shadow: 0px 0px 16px gray;
  /*box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);*/

  a {
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    align-self: center;

    &:hover {
      color: black;
      cursor: pointer;
    }

    &.active {
      background-color: var(--hover-color);

    }
  }

  >a,
  >div {
    display: flex;
    height: 100%;
    line-height: var(--nav-height);
    padding: 0px 30px;

    &:hover {
      color: black;
      background-color: var(--hover-color);
    }
  }

}

nav#childNav {
  background-color: var(--highlight-color);

  >a {

    &.active {
      /*background-color: #88b6ff;*/
      background-color: var(--hover-color);
    }
  }

}