.topnav {
  background-color: #333e;
  position: relative;
  height: 68px;
  padding: var(--spacing-2);
  box-sizing: border-box;
  z-index: 110;

  @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: var(--color-link);
    text-decoration: none;
    font-size: 17px;
    margin-left: var(--spacing);
    font-weight: bold;
    &.title {
      font-size: 34px;
      font-weight: bold;
      font-family: "wrong font";
      color: #ddd;
    }

    @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);
    }
}