#dock {
  --dock-gap: 0.5em;
  backdrop-filter: blur(3px);
  background-color: light-dark(rgba(255 255 255 / 45%), rgba(18 20 22 / 45%));
  border-radius: 1em;
  bottom: var(--dock-gap);
  box-shadow:
    0 0 20px -5px light-dark(rgba(0 0 0 / 30%), rgba(255 255 255 / 30%)),
    0 0 12px -7px light-dark(rgba(0 0 0 / 20%), rgba(255 255 255 / 20%));
  display: flex;
  gap: calc(var(--dock-gap) / 2);
  left: 50%;
  padding: var(--dock-gap);
  place-self: center;
  position: fixed;
  translate: -50% 0;
  align-items: center;
  z-index: calc(infinity);

  @media (prefers-contrast: more) {
    backdrop-filter: blur(10px) brightness(0.2);
  }
  @media (prefers-reduced-transparency: reduce) {
    backdrop-filter: brightness(1);
    background-color: light-dark(rgb(255 255 255), rgb(18 20 22));
  }

  a {
    border-bottom: none;
    position: relative;
    background: transparent;

    div {
      background: light-dark(#ffffff, #3a3e43);
      padding: 0.25em;
      border-radius: 0.5em;

      @media (prefers-contrast: more) {
        border: 1px solid;
      }
    }

    &:hover div {
      background: light-dark(#eeeeee, #494c52);
    }

    &.active:after {
      content: '•';
      position: absolute;
      left: 1em;
      bottom: -1.125em;
    }
  }

  img {
    width: 2em;
    vertical-align: middle;
  }

  @media (any-hover: hover) {
    &.autohide {
      opacity: 0;
      transition: opacity 1s;

      &:hover,
      &:active,
      &:focus,
      &:focus-visible,
      &:focus-within {
        opacity: 1;
      }
    }
  }
}
@media screen and (width <= 43em) {
  #dock {
    display: none;
  }
}