@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2 supports variations"),
    url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2-variations");
  font-weight: 100 1000;
}

@property --bg-1-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --bg-2-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --bg-2-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --bg-3-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --bg-3-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --bg-color: hsl(0, 0%, 100%);
  --bg-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  --shadow-size: max(140px, 40vw);
  --shadow-blur: 60;

  --color-1: #ffcad2;
  --color-2: #b6e3ff;
  --color-3: #ffedcf;

  --bg-1-x: 0;
  --bg-2-x: 0;
  --bg-2-y: 0;
  --bg-3-x: 0;
  --bg-3-y: 0;
}

@media (min-width: 960px) {
  :root {
    --shadow-size: max(72px, 25vw);
    --shadow-blur: 80;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Mona Sans", sans-serif;
  background: var(--bg-color);
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  padding: 1.5rem 1.5rem 7rem;
}

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: radial-gradient(
      circle var(--shadow-size) at 20vw 0,
      var(--color-1) 100%,
      transparent 0
    ),
    radial-gradient(
      circle var(--shadow-size) at 100vw 0,
      var(--color-2) 100%,
      transparent 0
    ),
    radial-gradient(
      circle calc(var(--shadow-size) * 1.2) at 50vw 115vh,
      var(--color-3) 100%,
      transparent 0
    );
  opacity: 0.5;
  filter: blur(calc(var(--shadow-blur) * 1px));
  mix-blend-mode: normal;
}

body::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--bg-grain);
  background-size: 500px;
  mix-blend-mode: soft-light;
  opacity: 0.05;
  z-index: -1;
}

main {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}

main h1 {
  font-size: max(72px, 10vw);
  font-weight: 700;
  background: conic-gradient(
      from 140deg at calc(var(--bg-1-x) * 1%) 90%,
      #ffb6c1,
      #f08080,
      #ffe4b5,
      #fffacd,
      #87cefa,
      #ffb6c1
    ),
    radial-gradient(
      ellipse at calc(var(--bg-2-x) * 1%) calc(var(--bg-2-y) * 1%),
      white 12%,
      transparent 35%
    ),
    radial-gradient(
      ellipse at calc(var(--bg-3-x) * 1%) calc(var(--bg-3-y) * 1%),
      #ffe4b5,
      transparent 35%
    );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: bg 20s linear infinite alternate;
}

main p {
  font-size: 1.5rem;
  color: #333;
  margin-top: 1rem;
}

@keyframes bg {
  0% {
    --bg-1-x: 25;
    --bg-2-y: 40;
    --bg-2-x: 35;
    --bg-3-y: 20;
    --bg-3-x: 45;
  }
  25% {
    --bg-1-x: 30;
    --bg-2-y: 50;
    --bg-2-x: 80;
    --bg-3-y: 20;
    --bg-3-x: 70;
  }
  50% {
    --bg-1-x: 10;
    --bg-2-y: 40;
    --bg-2-x: 30;
    --bg-3-y: 80;
    --bg-3-x: 50;
  }
  75% {
    --bg-1-x: 70;
    --bg-2-y: 10;
    --bg-2-x: 50;
    --bg-3-y: 30;
    --bg-3-x: 40;
  }
  100% {
    --bg-1-x: 25;
    --bg-2-y: 40;
    --bg-2-x: 35;
    --bg-3-y: 20;
    --bg-3-x: 45;
  }
}