<!-- Change text here or edit directly on result -->
<div class="text" contenteditable="true">/Hack_</div>

<svg id="svg" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0">
      <feTurbulence id="turbulence" type="turbulence" baseFrequency="0.5" numOctaves="1" result="turbulence" seed="0" />
      <feDisplacementMap id="displacement" in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G" />
      <feDropShadow dx="2" dy="2" stdDeviation="1" flood-color="#799df1" flood-opacity="0.7" />
      <feDropShadow dx="-2" dy="-2" stdDeviation="1" flood-color="#60c1ec" flood-opacity="0.7" />
      <feDropShadow dx="2" dy="-2" stdDeviation="1" flood-color="#7bd9de" flood-opacity="0.7" />
      <feDropShadow dx="-2" dy="2" stdDeviation="1" flood-color="#83f52c" flood-opacity="0.7" />
    </filter>
  </defs>
</svg>

@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap");

$background: #111;
$selection: rgba(#83f52c, 0.8);

html {
  @media screen and (max-width: 600px) {
    // Fitting font in mobile
    font-size: 12px;
  }
  @media screen and (max-width: 500px) {
    // Fitting font in mobile

    font-size: 8px;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: "Courier Prime";
  font-size: 10rem;
  background-color: $background;
  text-align: center;
  *::selection {
    color: $background;
    background: $selection;
  }
  *::-moz-selection {
    color: $background;
    background: $selection;
  }
  *::-webkit-selection {
    color: $background;
    background: $selection;
  }
}

.text {
  filter: url(#f1);
  color: rgba(255, 255, 255, 0.8);
}