:root   {
  --colourA: rgb(16, 16, 16);
  --colourB: rgb(255, 255, 255);
  --colourC: rgb(48, 48, 48);
  --colourD: rgb(92, 92, 92);
  --colourE: rgb(92, 180, 160);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colourA);
  font-size: 1rem;
}

.site-wrapper {
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column; /* Align items vertically */
  align-items: center; /* Center items horizontally */
  justify-content: flex-start; /* Stack items from the top */
  user-select: none;
}

body * {
  /* text-size-adjust: none; */
  color: var(--colourB);
  box-sizing: border-box;
  font-family: monospace;
  display: inline-block;
}

.keyboard-grid {
  width: 100vw;
  padding: 20px;
  background-color: var(--colourD);
  display: grid;
  grid-template-columns: repeat(20, calc(5vw - 5px)); /* ((2 * 20px) + (20 * 3px)) / 20 = - 5px */
  grid-template-rows: repeat(3, 4em);
  grid-gap: 3px;
}

.test-grid {
  width: 50vw;
  height: 400px;
  padding: 20px;
  /* background-color: var(--colourC); */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 3px;
}

.test-item {
  font-size: 20px;
  font-weight: bold;
  /* aspect-ratio: 1; */
  border: none;
  grid-column: span 1;
  background-color: var(--colourE);
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.key {
  /* aspect-ratio: 1 / 1; */
  /* font-size: 2vw; */ /* Font scales with zoom and viewport changes */
  font-size: 20px;
  font-weight: bold;
  border: none;
  grid-column: span 2;
  background-color: var(--colourC);
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.key.backspace {
  grid-column: span 3;
}

.key.return {
  grid-column: span 3;
}

.key.gap {
  grid-column: span 1;
  background-color: var(--colourD);
  cursor: default;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

select {
  border-radius: 4px;
  background-color: var(--colourC);
  cursor: pointer;
}