/* CSS class to add a blurred background image to a note */
.note-bg-blur {
  position: relative;
  z-index: 0;
}

/* Create the blurred background */
.note-bg-blur::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  
  /* Replace this URL with your image URL */
  background-image: var(--note-bg-image);
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  
  /* Optional: dim the background slightly */
  opacity: 0.2;
}

/* Ensure note content is above the background */
.note-bg-blur .markdown-preview-section {
  position: relative;
  z-index: 1;
}