<h1>Jello</h1>

body {
  --s: 700px;
  --c1: #eef4e9;
  --c2: #eecec5;

  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  background: conic-gradient(
    var(--c2) 63.43deg,
    var(--c1) 0 116.36deg,
    var(--c2) 0 180deg,
    var(--c1) 0 243.43deg,
    var(--c2) 0 296.15deg,
    var(--c1) 0
  );
  background-size: calc(2 * var(--s)) var(--s);
}

@font-palette-values --color {
  font-family: "Honk";
  base-palette: 4;
  override-colors: 0 #49371f, 1 #140c07, 2 transparent, 3 transparent,
    4 transparent, 5 transparent, 6 transparent, 7 transparent;
}

h1 {
  font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 0, "SHLN" 50;
  font-palette: --color;
  font-size: calc(25vw + 0.5rem);
  text-transform: uppercase;
  position: relative;
  width: 100%;
  text-align: center;
  filter: drop-shadow(2px 2px #198064) drop-shadow(-2px -2px #d92720)
    drop-shadow(-2px -2px #fff) drop-shadow(2px 2px #eaaf1c);

  &:after {
    content: "Jello";
    position: absolute;
    width: 100%;
    background: conic-gradient(from -45deg, #7bbea8 90deg, #dc588c 90.5deg),
      conic-gradient(from 135deg, #7bbea8 90deg, #dc588c 90.5deg) calc(200px / 2) 0;
    background-size: 5vw 26vw;
    background-position: bottom left;
    left: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  animation: morph 5s ease alternate infinite;
}

// @keyframes morph {
//  0% {
//    font-variation-settings: "MORF" 0, "SHLN" 0;
//  }

//  100% {
//    font-variation-settings: "MORF" 14, "SHLN" 100;
//  }
// }