* {
  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%;
}

@media only screen and (min-width: 600px) {
  :root {
    --extreme-hue: 1;
    --base-hue: 359;
  }
}

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)
  );
}