@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
body,
html {
  /* background: radial-gradient(circle, #fffc00 0%, #f0ed17 100%); */
  //  background: radial-gradient(circle, #fffc00 0%, #d4e143 100%);
    background: radial-gradient(300px circle at 55% 60% in oklab,
                var(--shine-2), transparent 100% 100%), radial-gradient(farthest-side circle at 75% 30% in oklab,
                var(--shine-1) 0%, var(--card-bg) 100%);
        background-blend-mode: color-burn;
        animation: animate-color-1 8s infinite linear alternate, 4s animate-color-2 1s infinite linear alternate;

  height: 100%;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  font-family: "Luckiest Guy", cursive;
}

h1 {
  margin: 0;
  font-size: 8em;
  padding: 0;
  color: white;
  text-shadow: 0 0.1em 20px black, 0.05em -0.03em 0 black, 0.05em 0.005em 0 black, 0em 0.08em 0 black, 0.05em 0.08em 0 black, 0px -0.03em 0 black, -0.03em -0.03em 0 black, -0.03em 0.08em 0 black, -0.03em 0 0 black;
}
h1 span {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  display: inline-block;
}
h1 span:first-child {
  -webkit-animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
          animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
h1 span:last-child {
  -webkit-animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
          animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}


  /* ----------------------- */
 /*     DONT EXPECT LESS    */
/* ----------------------- */

@property --card-bg {
    syntax: "<color>";
    inherits: false;
    initial-value: #c0bae8;
}

@property --shine-1 {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffbbc0;
}

@property --shine-2 {
    syntax: "<color>";
    inherits: false;
    initial-value: #c0aecb;
}

/* 
.card {
    border-radius: 1rem;
    max-width: 36ch;
    padding: 2rem;
    background: radial-gradient(300px circle at 55% 60% in oklab,
            var(--shine-2), transparent 100% 100%), radial-gradient(farthest-side circle at 75% 30% in oklab,
            var(--shine-1) 0%, var(--card-bg) 100%);
    background-blend-mode: color-burn;
    animation: animate-color-1 8s infinite linear alternate, 4s animate-color-2 1s infinite linear alternate;
}
*/ 

@keyframes animate-color-1 {
    from {
        --shine-1: initial;
    }

    to {
        --shine-1: orange;
    }
}

@keyframes animate-color-2 {
    from {
        --shine-2: initial;
    }

    to {
        --shine-2: hotpink;
    }
}

@-webkit-keyframes bop {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes bop {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes bopB {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  80%,
  100% {
    -webkit-transform: scale(1) rotateZ(-3deg);
            transform: scale(1) rotateZ(-3deg);
  }
}
@keyframes bopB {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  80%,
  100% {
    -webkit-transform: scale(1) rotateZ(-3deg);
            transform: scale(1) rotateZ(-3deg);
  }
}