body {

  & > nav {
    position: relative; /* there are children with position:absolute */

    &:not(:target) > :not(.opener) {
      display: none;
    }
    &:target > .opener {
      display: none;
    }

    & > a.opener {
      padding: 0 1rem;
      line-height: 3rem;
      color: inherit;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      & > .menu-icon {
        padding-right: 1rem;
      }
    }

    & > a.closer {
      position: absolute;
      left: 0;
      top: 0;
      width: 3rem;
      font-size: 2.5rem;
      text-align: center;
      line-height: 3rem;
      color: inherit;
      text-decoration: none;
    }
  }

}