Styles to blur everything not under hover

focus-blurred.css

:root {
  --blur-default: 2px;
  --blur-hover: 0px;

  --opacity-default: .1;
  --opacity-hover: 1;
}

::selection {
  background-color: contrast-color(var(--main-bg-color));
  color: var(--main-bg-color);
}

#sidebar, .card, .filter-container, div:has(> .comments, > .write_comment) {
  opacity: var(--opacity-default);
  filter: blur(var(--blur-default));
  transition: filter .1s ease-out, opacity .2s ease-out;
    
  &:hover {
    opacity: var(--opacity-hover);
    filter: blur(var(--blur-hover));
  }
}

.main_content {
  > :is(p, h1, h2, h3, h4, h5, div, ul) {
    opacity: var(--opacity-default);
    filter: blur(var(--blur-default));
    transition: filter .1s ease-out, opacity .2s ease-out;

    &:hover {
      opacity: var(--opacity-hover);
      filter: blur(var(--blur-hover));
    }

    &:hover + :is(p, h1, h2, h3, h4, h5, div, ul),
    :is(p, h1, h2, h3, h4, h5, div, ul):has(+ &:hover) {
      opacity: var(--opacity-hover);
      filter: blur(var(--blur-hover));
    }
  }

  /* remove gaps between an article elements to make hover smooth */
  > p {
    padding: 6px 0 !important;
    margin: 0 !important;
    
    & + p {
      padding-top: 10px;
    }
  }
  > h1 {
    margin: 0 !important;
    padding: 16px 0 10px !important;
  }
  > h2 {
    margin: 0 !important;
    padding: 20px 0 12px !important;
  }
  > h3 {
    margin: 0 !important;
    padding: 20px 0 12px !important;
  }
  > h4 {
    margin: 0 !important;
    padding: 20px 0 10px !important;
  }
  > h5 {
    margin: 0 !important;
    padding: 8px 0 8px !important;
  }
  > p+h6 {
    margin: 0 !important;
    padding: 18px !important;
  }
  > h6 {
    margin: 0 !important;
    padding: 8px 0 5px !important;
  }
}