html,
body {
  height: 100%;
}

@property --aalto {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

body {
  --aalto: -25vmin;
  display: grid;
  place-items: center;
  margin: 0;
  background-color: #98c793;
  background-image: repeating-radial-gradient(
    circle at center,
    #98c793 var(--aalto),
    #89b384 calc(var(--aalto) + 12.5vmin),
    #98c793 calc(var(--aalto) + 25vmin)
  );
  animation: tausta-aallot 4s linear infinite;
}

h1 {
  display: inline-block;
  margin: 0;
  font-size: clamp(8rem, 30vw, 20rem);
  line-height: 1;
  transform-origin: center;
  animation: kallistus 2s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

@keyframes kallistus {
  from {
    transform: rotate(-20deg);
  }

  to {
    transform: rotate(20deg);
  }
}

@keyframes tausta-aallot {
  to {
    --aalto: 0vmin;
  }
}