:root {
  --color_1: #f18db6;
  --color_2: #605ca8;
  --color_3: #fddc80;
  --color_4: #dc4a20;
  --color_5: #46b1e2;
  --color_6: #7e9d1e;
}

body, html {
  color: white;
  background-color: rgb(53, 53, 53);
  font-size: 17px;
  font-family: monospace;
  margin: 0;
  padding: 0;
}

.color_1 {
  background-color: var(--color_1);
}

.color_2 {
  background-color: var(--color_2);
}

.color_3 {
  background-color: var(--color_3);
}

.color_4 {
  background-color: var(--color_4);
}

.color_5 {
  background-color: var(--color_5);
}

.color_6 {
  background-color: var(--color_6);
}

#main {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 16px;
}

#top {
  display: flex;
  flex-direction: row;
  margin-bottom: 16px;
}

#colorbox {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.colorbox_row {
  display: flex;
  flex-direction: row;
}

#info {
  display: flex;
  margin-left: 16px;
  justify-content: center;
  flex-direction: column;
}

#grid {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.grid_row {
  display: flex;
  flex-direction: row;
}

.block {
  width: 36px;
  height: 36px;
  border: 2px solid purple;
  border-radius: 25%;
}

.block:hover {
  border-color: white;
}

.block.active {
  border-color: white;
}

#counter {
  margin-top: 16px;
  cursor: pointer;
}