:root {
  --spacing: 10px;
  /* Widest row = 4 faces wide; each face = 3 squares + 2 margins (spacing each side).
     Total width = 4 * (3*sq + 2*spacing). Solve for sq so it fits the viewport,
     then cap at 75px for larger screens. */
  --square-size: min(75px, (100vw - 8 * var(--spacing)) / 12);
}

@media (max-width: 480px) {
  :root {
    --spacing: 4px;
    /* subtract a little extra so the 4-wide middle row never wraps from sub-pixel rounding */
    --square-size: calc((100vw - 8 * var(--spacing) - 6px) / 12);
  }
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(25, 25, 25);
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
  position: relative;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.content-wrapper {
  max-width: 100vw;
}

.face {
  width: calc(var(--square-size) * 3);
  height: calc(var(--square-size) * 3);
  margin: var(--spacing);
  display: inline-block;
}

.face input {
  position: absolute;
  width: var(--square-size);
  height: var(--square-size);
  text-align: center;
  font-size: min(20px, calc(var(--square-size) * 0.4));
  font-weight: 300;
  border-radius: 50%;
  border: 0;
  background-color: #333;
  color: white;
  outline: 0;
}

.face input.black {
  background-color: black;
  color: white;
}

.face input.white {
  background-color: white;
  color: black;
}

.face input.navyblue {
  background-color: rgb(6, 0, 145);
  color: white;
}

.face input.red {
  background-color: rgb(207, 13, 13);
  color: white;
}

.face input.green {
  background-color: rgb(13, 207, 56);
  color: white;
}

.face input.orange {
  background-color: rgb(255, 145, 0);
  color: white;
}

.face input.skyblue {
  background-color: rgb(13, 195, 207);
  color: black;
}

.face input.purple {
  background-color: rgb(207, 39, 205);
  color: white;
}

.face input.yellow {
  background-color: rgb(255, 246, 40);
  color: black;
}

.face input:nth-of-type(1) {
  top: calc(var(--square-size) * 0);
  left: calc(var(--square-size) * 0);
}

.face input:nth-of-type(2) {
  top: calc(var(--square-size) * 0);
  left: calc(var(--square-size) * 1);
}

.face input:nth-of-type(3) {
  top: calc(var(--square-size) * 0);
  left: calc(var(--square-size) * 2);
}

.face input:nth-of-type(4) {
  top: calc(var(--square-size) * 1);
  left: calc(var(--square-size) * 0);
}

.face input:nth-of-type(5) {
  top: calc(var(--square-size) * 1);
  left: calc(var(--square-size) * 1);
}

.face input:nth-of-type(6) {
  top: calc(var(--square-size) * 1);
  left: calc(var(--square-size) * 2);
}

.face input:nth-of-type(7) {
  top: calc(var(--square-size) * 2);
  left: calc(var(--square-size) * 0);
}

.face input:nth-of-type(8) {
  top: calc(var(--square-size) * 2);
  left: calc(var(--square-size) * 1);
}

.face input:nth-of-type(9) {
  top: calc(var(--square-size) * 2);
  left: calc(var(--square-size) * 2);
}