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

  .item-title {
    text-align: center;
    pointer-events: none;
    //height: 24px;
    height: 0;
    flex: 1;
    a {
      pointer-events: initial;
    }
    h1 {
      font-size: 17px;
      margin: 0;
      padding: 0;
    }
  }
  @media screen and (max-width: 799px) {
    //padding-top: calc(var(--spacing) * 1.6);
    //height: 98px;
    height: 0;
  }
  @media screen and (max-width: 1100px) {
    .item-title {
      display: none
    }
  }

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

  nav {
    display: block;
    text-align: right;
    white-space: nowrap;
    @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;
        display: none;
        text-align: center;
      }
      div {
        display: inline-block;
      }

    }
  }
}

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