#header-menu-desktop {
  display: none;
  flex: 1;
  justify-content: center;
  @media (min-width: 901px) and (pointer: fine) {
    display: flex;
  }
  > a {
    font-size: 2rem;
    line-height: 38px;
    padding: 48px 10px 14px 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: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    display: flex;
    left: 0px;
    position: absolute;
    top: 100px;
    transition-delay: 0.2s;
    visibility: hidden;
    width: 100%;
    z-index: 3;
    &:hover {
      visibility: visible;
    }
    > div {
      background-color: var(--colorGreyTranslucent);
      display: flex;
      gap: 40px;
      justify-content: center;
      padding: 40px 0px 40px 0px;
      width: 100%;
      > 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';
            }
          }
        }
      }
    }
  }
}