@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-style: normal;
  src: url("/assets/Poppins-Medium-Cxde2ZoM.ttf");
}
@font-face {
  font-family: "Poppins";
  font-weight: 900;
  font-style: normal;
  src: url("/assets/Poppins-Black-yHqY0KRU.ttf");
}
@font-face {
  font-family: "Poppins";
  font-weight: 900;
  font-style: italic;
  src: url("/assets/Poppins-BlackItalic-cm4Pcmzs.ttf");
}
:root {
  --background: white;
  --foreground: black;
  --container-size: 370px;
  --blocks-size: 330px;
  --block-size: 50px;
  --gap: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: black;
    --foreground: white;
  }
}
* {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
}

main {
  max-width: 600px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.grid .blocks.completed {
  opacity: 0;
}

.blocks {
  display: flex;
  flex-wrap: wrap;
  width: var(--blocks-size);
  height: var(--blocks-size);
  gap: var(--gap);
  transition: opacity 0.25s;
  background-color: white;
  padding: 20px;
}
.blocks.completed {
  pointer-events: none;
}

.block {
  width: var(--block-size);
  height: var(--block-size);
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: color 0.25s, transform 0.25s;
  will-change: transform;
}
.block[data-color="1"] {
  color: orangered;
}
.block[data-color="2"] {
  color: deepskyblue;
}
.block[data-color="3"] {
  color: fuchsia;
}
.block.selected {
  transform: scale(1.5);
}

.block-value {
  pointer-events: none;
}

.container {
  width: var(--container-size);
  height: var(--container-size);
}
.container .blocks {
  position: absolute;
}