:root {
  --accent: 300;
  --bg-header: #ffe1ff;
  --link: hwb(199.76deg 39.46% 26.35%);
  /*saturation vary */
  --hsl-s__100: hsl(var(--accent) 100% 50%);
  --hsl-s__90: hsl(var(--accent) 90% 50%);
  --hsl-s__80: hsl(var(--accent) 80% 50%);
  --hsl-s__70: hsl(var(--accent) 70% 50%);
  --hsl-s__60: hsl(var(--accent) 60% 50%);
  --hsl-s__50: hsl(var(--accent) 50% 50%);
  --hsl-s__40: hsl(var(--accent) 40% 50%);
  --hsl-s__30: hsl(var(--accent) 30% 50%);
  --hsl-s__20: hsl(var(--accent) 20% 50%);
  --hsl-s__10: hsl(var(--accent) 10% 50%);
  --hsl-s__00: hsl(var(--accent) 0% 50%);
  /* lightness vary */
  --hsl-l__100: hsl(var(--accent) 100% 100%);
  --hsl-l__90: hsl(var(--accent) 100% 90%);
  --hsl-l__80: hsl(var(--accent) 100% 80%);
  --hsl-l__70: hsl(var(--accent) 100% 70%);
  --hsl-l__60: hsl(var(--accent) 100% 60%);
  --hsl-l__50: hsl(var(--accent) 100% 50%);
  --hsl-l__40: hsl(var(--accent) 100% 40%);
  --hsl-l__30: hsl(var(--accent) 100% 30%);
  --hsl-l__20: hsl(var(--accent) 100% 20%);
  --hsl-l__10: hsl(var(--accent) 100% 10%);
  --hsl-l__00: hsl(var(--accent) 100% 0%);
}

:any-link {
  color: var(--link);
}

header {
  background-color: var(--bg-header);
  color: black;
  display: grid;
  justify-content: space-between;
  align-items: center;
  padding-inline: 1rem;
  grid-auto-flow: column;
  border-radius: 1rem;
  margin: 0.75rem;
}

section {
  display: grid;
  grid-auto-flow: row;
  place-content: center;
}

p {
  font-size: 2.5rem;
  line-height: normal;
}

code {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  font-size: 2rem;
  color: grey;
}

span {
  color: mediumvioletred;
}

div {
  margin: 0.5rem;
  padding: 0.5rem;
  width: 90vw;
  height: 30rem;
  border: 1px solid grey;
}

.saturation {
  background-image: linear-gradient(
    to right,
    var(--hsl-s__100) 8%,
    transparent 8% 10%,
    var(--hsl-s__90) 10% 19%,
    transparent 19% 20%,
    var(--hsl-s__80) 20% 29%,
    transparent 29% 30%,
    var(--hsl-s__70) 30% 37%,
    transparent 37% 38%,
    var(--hsl-s__60) 38% 45%,
    transparent 45% 46%,
    var(--hsl-s__50) 46% 53%,
    transparent 53% 54%,
    var(--hsl-s__40) 54% 63%,
    transparent 63% 64%,
    var(--hsl-s__30) 64% 73%,
    transparent 73% 74%,
    var(--hsl-s__20) 74% 83%,
    transparent 83% 84%,
    var(--hsl-s__10) 84% 93%,
    transparent 93% 94%,
    var(--hsl-s__00) 94%
  );
}

.lightness {
  background-image: linear-gradient(
    to right,
    var(--hsl-l__100) 8%,
    transparent 8% 10%,
    var(--hsl-l__90) 10% 19%,
    transparent 19% 20%,
    var(--hsl-l__80) 20% 29%,
    transparent 29% 30%,
    var(--hsl-l__70) 30% 37%,
    transparent 37% 38%,
    var(--hsl-l__60) 38% 45%,
    transparent 45% 46%,
    var(--hsl-l__50) 46% 53%,
    transparent 53% 54%,
    var(--hsl-l__40) 54% 63%,
    transparent 63% 64%,
    var(--hsl-l__30) 64% 73%,
    transparent 73% 74%,
    var(--hsl-l__20) 74% 83%,
    transparent 83% 84%,
    var(--hsl-l__10) 84% 93%,
    transparent 93% 94%,
    var(--hsl-l__00) 94%
  );
}