:root {
  --gl: radial-gradient(circle 1px at 0px 0px, var(--dark) 1px, transparent 0);
  --gd: radial-gradient(circle 1px at 0px 0px, var(--light) 1px, transparent 0);
  --bg-0: var(--light);
  --bg-1: var(--gl) 0px 0px / 4px 4px, var(--light);
  --bg-2: var(--gl) 0px 0px / 4px 4px, var(--gl) 2px 2px / 4px 4px, var(--light);
  --bg-3: var(--gl) 0px 0px / 2px 2px, var(--light);
  --bg-4: var(--gl) 0px 0px / 2px 2px, var(--gl) 1px 1px / 2px 2px, var(--light);
  --bg-5: var(--gd) 0px 0px / 2px 2px, var(--dark);
  --bg-6: var(--gd) 0px 0px / 4px 4px, var(--gd) 2px 2px / 4px 4px, var(--dark);
  --bg-7: var(--gd) 0px 0px / 4px 4px, var(--dark);
  --bg-8: var(--dark);
  
  --l-shadow:
    -1px -1px 0 var(--light),
    0 -1px 0 var(--light),
    1px -1px 0 var(--light),
    1px 0 0 var(--light),
    1px 1px 0 var(--light),
    0 1px 0 var(--light),
    -1px 1px 0 var(--light),
    -1px 0 0 var(--light);
  
  --d-shadow:
    -1px -1px 0 var(--dark),
    0 -1px 0 var(--dark),
    1px -1px 0 var(--dark),
    1px 0 0 var(--dark),
    1px 1px 0 var(--dark),
    0 1px 0 var(--dark),
    -1px 1px 0 var(--dark),
    -1px 0 0 var(--dark);
  
  --drop-shadow:
    drop-shadow(-1px -1px 0 var(--dark))
    drop-shadow(0 -1px 0 var(--dark))
    drop-shadow(1px -1px 0 var(--dark))
    drop-shadow(1px 0 0 var(--dark))
    drop-shadow(1px 1px 0 var(--dark))
    drop-shadow(0 1px 0 var(--dark))
    drop-shadow(-1px 1px 0 var(--dark))
    drop-shadow(-1px 0 0 var(--dark));
}

* {
  box-sizing: border-box;
  font-family: monospace;
  text-rendering: optimizeSpeed;
  font-size: inherit;
  color: inherit;
}

html {
  font-size: 1vmin;
  animation:
    adjust-light 17s linear infinite both,
    adjust-dark 11s linear infinite both;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  background: var(--light);
}

.shades {
  display: inline-flex;
  gap: 1rem;
}

.shade {
  height: calc(80rem / 9);
  width: calc(80rem / 9);
  border-radius: 50%;
  border: 3px solid var(--dark);
  
  &:nth-child(1) { background: var(--bg-0); }
  &:nth-child(2) { background: var(--bg-1); }
  &:nth-child(3) { background: var(--bg-2); }
  &:nth-child(4) { background: var(--bg-3); }
  &:nth-child(5) { background: var(--bg-4); }
  &:nth-child(6) { background: var(--bg-5); }
  &:nth-child(7) { background: var(--bg-6); }
  &:nth-child(8) { background: var(--bg-7); }
  &:nth-child(9) { background: var(--bg-8); }
}

form {
  font-size: 2rem;
  background: var(--bg-4);
  padding: 2rem;
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 3px var(--dark) solid;
}

label {
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 1rem;
  text-shadow: var(--l-shadow);
  border: 1px var(--dark) solid;
  color: var(--dark);
}

input {
  background: var(--bg-0);
  border: 0;
  outline: 0;
  border-radius: 1rem;
  padding: 1rem;
  text-shadow: var(--l-shadow);
  border: 1px var(--dark) solid;
}

button {
  background: var(--bg-0);
  border: 0;
  outline: 0;
  border-radius: 1rem;
  padding: 1rem;
  font-weight: bold;
  text-shadow: var(--l-shadow);
  cursor: pointer;
  border: 1px var(--dark) solid;
  color: var(--dark);
  animation: dark-to-light 200ms ease-out forwards;
  transition: 200ms ease-out;
  
  &:hover {
    animation: light-to-dark 200ms linear forwards;
    color: var(--light);
    text-shadow: var(--d-shadow);
  }
}

.cube-wrapper {
  --size: 8rem;
  margin-top: 2rem;
  perspective: 200px;
  perspective-origin: 50% 0%;
  filter: var(--drop-shadow);
}

.cube {
  height: var(--size);
  width: var(--size);
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50% calc(var(--size) * .5);
  animation: rotate 10s linear infinite;
}

.face {
  position: absolute;
  height: var(--size);
  width: var(--size);
  transform-style: preserve-3d;
  transform-origin: 50% 50% calc(var(--size) * .5);
  
  &:nth-child(1) { transform: rotateY(90deg); background: var(--bg-2); }
  &:nth-child(2) { transform: rotateY(180deg); background: var(--bg-3) }
  &:nth-child(3) { transform: rotateY(-90deg); background: var(--bg-4) }
  &:nth-child(4) { transform: rotateX(90deg); background: var(--bg-5) }
  &:nth-child(5) { transform: rotateX(-90deg); background: var(--bg-6) }
  &:nth-child(6) { background: var(--bg-7) }
}

@keyframes light-to-dark {
  0% { background: var(--bg-0); }
  12.5% { background: var(--bg-1); }
  25% { background: var(--bg-2); }
  37.5% { background: var(--bg-3); }
  50% { background: var(--bg-4); }
  62.5% { background: var(--bg-5); }
  75% { background: var(--bg-6); }
  87.5% { background: var(--bg-7); }
  100% { background: var(--bg-8); }
}

@keyframes dark-to-light {
  0% { background: var(--bg-8); }
  12.5% { background: var(--bg-7); }
  25% { background: var(--bg-6); }
  37.5% { background: var(--bg-5); }
  50% { background: var(--bg-4); }
  62.5% { background: var(--bg-3); }
  75% { background: var(--bg-2); }
  87.5% { background: var(--bg-1); }
  100% { background: var(--bg-0); }
}

@keyframes rotate {
  from { transform: rotateY(0) rotateX(1turn) rotateZ(0) }
  to { transform: rotateY(1turn) rotateX(0) rotateZ(1turn) }
}

@keyframes adjust-light {
  0% { --light: hsl(0turn, 100%, 80%); }
  10% { --light: hsl(.1turn, 100%, 80%); }
  20% { --light: hsl(.2turn, 100%, 80%); }
  30% { --light: hsl(.3turn, 100%, 80%); }
  40% { --light: hsl(.4turn, 100%, 80%); }
  50% { --light: hsl(.5turn, 100%, 80%); }
  60% { --light: hsl(.6turn, 100%, 80%); }
  70% { --light: hsl(.7turn, 100%, 80%); }
  80% { --light: hsl(.8turn, 100%, 80%); }
  90% { --light: hsl(.9turn, 100%, 80%); }
  100% { --light: hsl(1turn, 100%, 80%); }
}

@keyframes adjust-dark {
  0% { --dark: hsl(0turn, 100%, 20%); }
  10% { --dark: hsl(.1turn, 100%, 20%); }
  20% { --dark: hsl(.2turn, 100%, 20%); }
  30% { --dark: hsl(.3turn, 100%, 20%); }
  40% { --dark: hsl(.4turn, 100%, 20%); }
  50% { --dark: hsl(.5turn, 100%, 20%); }
  60% { --dark: hsl(.6turn, 100%, 20%); }
  70% { --dark: hsl(.7turn, 100%, 20%); }
  80% { --dark: hsl(.8turn, 100%, 20%); }
  90% { --dark: hsl(.9turn, 100%, 20%); }
  100% { --dark: hsl(1turn, 100%, 20%); }
}

@property --light {
  syntax: "<color>";
  inherits: true;
  initial-value: white;
}

@property --dark {
  syntax: "<color>";
  inherits: true;
  initial-value: black;
}