html,
body {
  background: #000;
  height: 100%;
  overflow: hidden;
}

h1 {
  font-family: 'Permanent Marker', cursive;
  color: #fff;
  font-size: 19vw;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-align: center;
  position: relative;

  &::before,
  &::after {
    content: attr(data-heading);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  &::after {
    color: #000;
    text-shadow:
      -1px -1px 0 #000,
      1px 1px 0 #000,
      -1px 1px 0 #000,
      1px -1px 0 #000;
  }

  &::before {
    color: #fff;
    text-shadow:
      -1px -1px 0 #000,
      1px 1px 0 #000,
      -1px 1px 0 #000,
      1px -1px 0 #000;
    transform: translate(-5px, -5px);
    mix-blend-mode: darken;
  }
}

img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: darken;
  transform: rotate(180deg);
}

div {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 20%;
  left: 10%;
  filter: blur(5vw);
}