body {
      margin: 0;
      padding: 0;
      background-size: cover;
      background-position: center;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background 3s ease; /* Adjust the duration (3s in this example) */
    }

    /* Apply black overlay */
    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7); /* Adjust the alpha for transparency */
      z-index: -1; /* Place the overlay behind the background image */
    }

    /* Apply blur effect */
    body.blur::before {
      backdrop-filter: blur(1px); /* Adjust the blur intensity as needed */
    }