/* header and footer */

#site-header [popovertarget] { cursor: pointer }

#site-header {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(5px);
  white-space: nowrap;
}

#site-header a:not(.btn) {
  color: var(--color-neutral-600);
  &:hover { color: var(--color-neutral-primary) }

  &:has(svg) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--color-neutral-600);
  
    transition: color 0.3s ease, background-color 0.3s ease;
    &:hover { background-color: var(--color-neutral-200) }
  }
}

#site-footer a {
  color: var(--color-neutral-600);
  &:hover { color: var(--color-primary-dark) }
}