<div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

<button>Random</button>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;

  gap: 10px;
}

.circles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.circle {
  width: 20vmin;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.circle:nth-child(1) {
  background-color: #ee4747;
}

.circle:nth-child(2) {
  background-color: #ffc848;
}

.circle:nth-child(3) {
  background-color: #1ec4b4;
}

:root {
  --ON: initial;
  --OFF: ;
  --animation-duration: 2s;
}

button {
  --is-raised: var(--OFF);
  padding: 0.625em 1.625em;
  border-radius: 0.2em;
  color: white;
  font: 700 150% / 1 "Exo", Arial, sans-serif;
  cursor: pointer;
  transition: all 0.28s linear;

  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
  background: var(
      --is-raised,
      linear-gradient(hsl(0 0% 100% / 0.3), transparent)
    )
    hsl(200 100% 50%);
  box-shadow: var(
    --is-raised,
    0 1px hsl(0 0% 100% / 0.8) inset,
    0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2)
  );
  text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
}

button:hover {
  --is-raised: var(--ON);
}

button:active {
  box-shadow: var(--is-raised, 0 1px 0.2em black inset);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.circle:nth-child(1) {
  animation: fadeIn var(--animation-duration) ease alternate infinite;
}

const button = document.querySelector("button");
const rootEle = document.documentElement;

button.addEventListener("click", () => {
  const time = Math.random() + 0.5;
  console.log(time);
  rootEle.style.setProperty("--animation-duration", `${time}s`);
});