#header-menu-desktop {
  display: none;
  flex: 1;
  justify-content: center;
  @media (min-width: 901px) and (pointer: fine) {
    display: flex;
  }
  > a {
    font-size: 2rem;
    padding: 0px 10px 0px 10px;
    text-decoration: none;
    @media (pointer: fine) {
      &:hover {
        color: var(--colorGreen);
      }
    }
    &.active {
      font-family: 'Roboto Black', sans-serif;
      color: var(--colorGreen);
    }
  }
  #services-button.listening {
    &:hover {
      ~ #services-menu {
        transition-delay: 0.2s;
        visibility: visible;
      }
    }
  }
  #services-menu {
    background-color: var(--colorGreyBright);
    display: flex;
    gap: 40px;
    justify-content: center;
    left: 0px;
    padding: 120px 0px 40px 0px;
    position: fixed;
    top: 0px;
    transition-delay: 0.2s;
    visibility: hidden;
    width: 100%;
    z-index: -1;
    &:hover {
      visibility: visible;
    }
    > div {
      display: flex;
      flex-direction: column;
      > a {
        align-items: flex-start;
        display: flex;
        gap: 0px 5px;
        padding: 4px 0px 4px 0px;
        text-decoration: none;
        @media (pointer: fine) {
          &:hover {
            color: var(--colorGreyFontHover);
          }
        }
        &:nth-of-type(1) {
          font-family: 'Roboto Black', sans-serif;
        }
        &:nth-of-type(n + 2) {
          &::before {
            content: '\2794';
          }
        }
      }
    }
  }
}