.top-nav {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    background-color: var( --green-for);
    color: var(--orange-for);
    width: 100vw;
    /* padding: 1em; */
  }
  
  .menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    color: var(--scn-fn-crl);
    width: 50%;
    margin-inline-end: 8%;
    padding: 0;
  }
  
  .menu > li {
    margin: 0 1rem;
    overflow: hidden;
    flex-grow: 1;
    font-family: 'ZeitungPro-Black-_1_';
    font-size: 1.2em;
  }
  
  .menu a {
    color: var(--scn-fn-crl);
  }
  
  .menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #menu-toggle {
    display: none;
  }
  
  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }
  
  .menu-button::before {
    content: '';
    margin-top: -8px;
  }
  
  .menu-button::after {
    content: '';
    margin-top: 8px;
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
  }
  
  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }
  
  .logo {
      width: 80px;
      height: auto;
      margin: 0;
      padding-left: 10%;
  }
  
  .highlighted {
    color: var(--sth-br-cl);
  }
  
  .white-background {
    background-color: var(--main-bg-clr);
    padding: 10px 10px;
  }
  
  .nav-pills .nav-link {
    color: white;
  }
  
  .nav-pills .nav-link.active{
    background-color: #1d5959;
  }

  @media (max-width: 768px){
  
    .top-nav {
        display: flex;
        flex-direction: row;
        text-align: center;
        align-items: center;
        justify-content: space-between;
        background-color: var(--sth-br-cl);
        width: 95vw;
        padding: 1em;
      }
      
    .menu-button-container {
          display: flex;
        }
        .menu {
          position: absolute;
          top: 0;
          margin-top: 50px;
          left: 0;
          flex-direction: column;
          width: 100%;
          justify-content: center;
          align-items: center;
        }
        #menu-toggle ~ .menu li {
          height: 0;
          margin: 0;
          padding: 0;
          border: 0;
          transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        }
        #menu-toggle:checked ~ .menu li {
          border: 1px solid #333;
          height: 2.5em;
          padding: 0.5em;
          transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
        }
        .menu > li {
          display: flex;
          justify-content: center;
          margin: 0;
          padding: 0.5em 0;
          width: 100%;
          color: white;
          background-color: #222;
        }
        .menu > li:not(:last-child) {
          border-bottom:1px solid #333;
        }
    }