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

body {
  display: flex;
  justify-content: center;
  align-items: center;

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

  gap: 10px;
  flex-direction: column;
}

:root {
  --base-hue: 60;
  --extreme-hue: 300;

  --base-saturation: 60%;
  --region-staturation: 40%;

  --base-light: 70%;
  --settled-light: 30%;
}

body {
  --start-color: hsl(
    min(var(--base-hue), var(--extreme-hue)),
    max(var(--base-saturation), var(--region-staturation)),
    min(var(--base-light), var(--settled-light))
  );
  --stop-color: hsl(
    max(var(--base-hue), var(--extreme-hue)),
    min(var(--base-saturation), var(--region-staturation)),
    max(var(--base-light), var(--settled-light))
  );
  background-image: linear-gradient(
    to right,
    var(--start-color),
    var(--stop-color)
  );
}

const root = document.documentElement;
function setRandomVariables() {
  const variablesArray = [
    {
      "--base-hue": 60,
      "--extreme-hue": 300,
      "--base-saturation": "60%",
      "--region-saturation": "40%",
      "--base-light": "70%",
      "--settled-light": "30%"
    },
    {
      "--base-hue": 75,
      "--base-saturation": "20%",
      "--region-saturation": "80%",
      "--base-light": "30%"
    },
    {
      "--base-hue": 50,
      "--region-saturation": "5%",
      "--settled-light": "10%"
    },
    {
      "--extreme-hue": 5
    }
  ];

  const selectedVariables = Object.entries(
    variablesArray[Math.floor(Math.random() * variablesArray.length)]
  );
  selectedVariables.forEach((cssvars) => {
    root.style.setProperty(cssvars[0], cssvars[1]);
  });
}

let intervalID = window.setInterval(setRandomVariables, 2000);