<h1>Save!</h1>

@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
@keyframes rotation {
  to {
    transform: rotate(360deg) translateX(-50%) translateY(-50%);
  }
}
body {
  width: 100%;
  height: 100vh;
  color: hsl(50, 50%, 50%);
  display: flex;
  overflow: hidden;
  font-family: 'Bangers', cursive;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  &:before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(0) translateX(-50%) translateY(-50%);
    transform-origin: 0 0;
    width: 200%;
    height: 200%;
    background: repeating-conic-gradient(hsl(0, 50%, 40%), hsl(0, 50%, 50%) 1%);
    content: '';
    animation: rotation 20s infinite linear;
  }
}

h1 {
  position: relative;
  z-index: 2;
  font-size: 10em;
  letter-spacing: 15px;
  text-transform: uppercase;
  transform: rotate(-10deg);
  text-shadow: 1px 1px hsl(50, 50%, 45%),
               2px 2px hsl(50, 50%, 40%),
               3px 3px hsl(50, 50%, 35%),
               4px 4px hsl(50, 50%, 34%),
               5px 5px hsl(50, 50%, 33%),
               6px 6px hsl(50, 50%, 32%),
               7px 7px hsl(50, 50%, 31%),
               8px 8px hsl(50, 50%, 30%),
               9px 9px hsl(50, 50%, 29%),
               10px 10px hsl(50, 50%, 28%),
               10px 10px 30px rgba(0,0,0,.7),
}