:root {
  --base: #01e;
  --bg: #221818;
  --bg__header: #5c585524;
  --link: hsl(113, 100%, 76%);
  --h1__txt--1: floralwhite;
  --header__txt--2: black;
  --code__txt--3: palegoldenrod;
  --lab__bg__img--4: white;
}

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

body {
  background-color: var(--bg);
}

h1 {
  color: var(--h1__txt--1);
}

main {
  display: grid;
  grid-auto-flow: row;
  grid-row: repeat(2, 1fr);
  gap: 4px;
  /* grid-template-rows: repeat(3, max-content); */
}

header {
  background-color: var(--bg__header);
  color: var(--header__txt--2);
  display: grid;
  justify-content: space-between;
  align-items: center;
  padding-inline: 1rem;
  grid-auto-flow: column;
}

section {
  padding: 4px;
}

div {
  height: 15vh;
}

code {
  font-size: 2rem;
  color: var(--code__txt--3);
  margin-left: 1rem;
}

.lab {
  background-image: linear-gradient(in lab to right, var(--lab__bg__img--4), var(--base));
}

.srgb {
  background-image: linear-gradient(in srgb to right, var(--lab__bg__img--4), var(--base));
}

.oklab {
  background-image: linear-gradient(in oklab to right, var(--lab__bg__img--4), var(--base));
}

.lch {
  background-image: linear-gradient(in lch to right, var(--lab__bg__img--4), var(--base));
}

.oklch {
  background-image: linear-gradient(in oklch to right, var(--lab__bg__img--4), var(--base));
}

.xyz {
  background-image: linear-gradient(in xyz to right, var(--lab__bg__img--4), var(--base));
}