/**
 * Page styles
 */

:root {
  --white: #fff;
  --colorA: #777;
  --colorB: #222;
  --colorC: #bbb;
  --colorPop: #00ffff;
  --black: #000;
  font-size: 20px;
}

body {
  background-color: var(--white);
  font-size: 1rem;
}

#outerBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#controls {
  fieldset {
    border: 0;
    padding: 0;
    margin: 0;

    legend {
      margin-bottom: 1rem;
    }
  }
}

#controlled li {
  transition: all 2s ease, font-size 0.75s ease, background-color 0.25s ease;
}

#outerBox {
  &:has(#controls #controlOne:checked) {
    #controlled ul li:nth-child(2n) {
      background-color: var(--colorPop);
    }
  }

  &:has(#controls #controlTwo:checked) {
    #controlled ul li:nth-child(2n+1) {
      font-size: 24px;
    }
  }

  &:has(#controls #controlThree:checked) {
    #controlled ul li:nth-child(3n+1) {
      padding: 1rem;
    }
  }
}