phantasma/app/static/css/partials/_menu.scss

.topnav {
  background-color: #333;
  position: relative;
  height: 68px;
  padding: var(--spacing-2);
  box-sizing: border-box;
  @media screen and (max-width: 799px) {
    padding-top: calc(var(--spacing) * 1.6);
  }

  @media screen and (min-width: 800px) {
    display: flex;
    align-items: flex-end;
  }

  nav {
    display: block;
    text-align: right;
    @media screen and (max-width: 799px) {
      text-align: center;
      width: 100%;
      margin-top: var(--spacing);
    }
    @media screen and (min-width: 800px) {
      margin-left: auto;
    }
  }

  a {
    color: white;
    text-decoration: none;
    font-size: 17px;
    margin-left: var(--spacing);

    &:hover {
      background-color: #ddd;
      color: black;
    }
    @media screen and (max-width: 799px) {
      &.title {
        display: block;
        text-align: center;
      }
      div {
        display: inline-block;
      }

    }
  }


}

.title-text {
    @media screen and (min-width: 800px) {
      font-weight: 700;
      padding-bottom: calc(var(--spacing) / 2);
    }
}