html,
    body {
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 100%;
      height: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .section-with-blur {
      position: relative;
      background-color: #030e2d;
      overflow: hidden;
    }

    .section-with-blur::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="636" height="636"><circle cx="318" cy="318" r="112" fill="%231447E6" fill-opacity="0.19"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="626" height="797"><circle cx="398.5" cy="398.5" r="192.5" fill="%23EF89FF" fill-opacity="0.25"/></svg>');
      background-repeat: no-repeat, no-repeat;
      background-position: 20% 85%, 80% 20%;
      filter: blur(50px);
      z-index: 0;
    }

    .section-with-blur>* {
      position: relative;
      z-index: 1;
    }