:root {
  --backgroundcolor: #000000;
}
body {
  position: relative;
  height: 100vh;
}
.copyright {
  position: absolute;
  bottom: 0;
  right: 0;
}
.copyright, .copyright a {
  color: var(--whitetextcolor);
}
#back {
  position: absolute;
  margin: 1em;
  top: 0;
  left: 0;
}
#testColorBox {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
.testTop, .testMiddle, .testBottom1, .testBottom2, .testThree {
  display: flex;
  flex-direction: row;
}
.testTop {
  flex: 7;
}
.testMiddle {
  flex: 1;
}
.testBottom {
  display: flex;
  flex-direction: row;
  flex: 2;
}
.testBottom1 {
  flex: 5;
}
.testBottom2 {
  flex: 2;
}
.testTop div, .testMiddle div, .testBottom1 div, .testBottom2 div, .testThree div {
  flex: 1;
}
.testWhite {
  background-color: oklch(1 0 0);
}
.testYellow {
  background-color: oklch(0.968 0.2517 109.77);
}
.testCyan {
  background-color: oklch(0.9054 0.1639 194.769);
}
.testGreen {
  background-color: oklch(0.8664 0.3591 142.4953);
}
.testMagenta {
  background-color: oklch(0.7017 0.3605 328.36);
}
.testRed {
  background-color: oklch(0.628 0.2838 29.23);
}
.testBlue {
  background-color: oklch(0.452 0.3312 264.052);
}
.testNavy {
  background-color: oklch(0.2559 0.1932 259.98);
}
.testPurple {
  background-color: oklch(0.3872 0.2392 296.91);
}
.testGray75 {
  background-color: oklch(0.75 0 0);
}
.testGray50 {
  background-color: oklch(0.5 0 0);
}
.testGray30 {
  background-color: oklch(0.3 0 0);
}
.testGray20 {
  background-color: oklch(0.2 0 0);
}
.testGray10 {
  background-color: oklch(0.1 0 0);
}
.testGray05 {
  background-color: oklch(0.05 0 0);
}
.testBlack {
  background-color: oklch(0 0 0);
}