@media only screen and (max-device-width: 811px) {
  .navigation-bar {
    display: none;
  }
}

@media only screen and (min-device-width: 812px) {
  .navigation-bar {
    --height: var(--navigation-bar-height);

    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    background: white;
    flex-wrap: no-wrap;
    justify-content: space-between;
    z-index: 1;
  }

  .navigation-bar__name {
    color: var(--color-black);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.22px;
    line-height: var(--height);
    padding-left: 10px;
    text-decoration: none;
    width: 50%;
  }

  .navigation-bar__github {
    display: flex;
    align-items: center;
  }

  .navigation-bar__github a {
    padding: 10px;
  }

  .navigation-bar__internal-links {
    display: flex;
    font-size: 14px;
    font-weight: 300;
    justify-content: space-between;
    letter-spacing: 0.16px;
    line-height: var(--height);
  }

  .navigation-bar__internal-link {
    padding: 0 20px;
    position: relative;
  }

  .navigation-bar__internal-link > a {
    color: var(--color-black);
    text-decoration: none;
  }

  .navigation-bar__internal-link > a:hover {
    text-decoration: underline;
  }

  .navigation-bar__internal-link::before {
    --bar-height: 12px;
     
    background: var(--color-black);
    content: '';
    height: var(--bar-height);
    position: absolute;
    right: -0.5px;
    top: calc((var(--height) - var(--bar-height)) / 2);
    width: 1px;
  }

  .navigation-bar__internal-link:last-child::before { content: none;
  }

  .navigation-bar__external-links {
    --image-height: 14px;
    --padding-v: calc((var(--height) - var(--image-height)) / 2);

    padding-bottom: var(--padding-v);
    padding-right: 10px;
    padding-top: var(--padding-v);
    text-align: right;
    width: 50%;
  }

  .navigation-bar__external-link-image {
    height: var(--image-height);
    width: var(--image-height);
  }
}