:root {
  --block-green-hue: 50;
  --block-red-hue: 100;
  --block-yellow-hue: 360;
  --block-blue-hue: 200;

  --block-sat: 100%;
  --block-lum: 60%;
}

.simon-container {
  max-width: 768px;
  margin: 0 auto;
}

#simon-round {
  visibility: hidden;
}

.simon-header {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  text-align: center;
  font-family: "Futura PT", sans-serif;
  font-weight: 600;
  font-size: 2rem;
}

.simon-header-buttons {
  display: flex;
  gap: 4px;
}

.status-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Futura PT", sans-serif;
  font-weight: 600;
  font-size: 2rem;
}

.start-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}
#start-button {
  width: 240px;
  height: 80px;
}

.simon-header-buttons > button {
  width: 44px;
  height: 44px;
}

#simon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 25px;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  padding-top: 40px;
}

#simon-grid > button {
  border: solid black 1px;
}

#simon-grid > .y {
  background: hsl(var(--block-green-hue), var(--block-sat), var(--block-lum));
}
#simon-grid > .g {
  background: hsl(var(--block-red-hue), var(--block-sat), var(--block-lum));
}
#simon-grid > .r {
  background: hsl(var(--block-yellow-hue), var(--block-sat), var(--block-lum));
}
#simon-grid > .b {
  background: hsl(var(--block-blue-hue), var(--block-sat), var(--block-lum));
}

.simon-flash,
.simon-flash-correct {
  --block-lum: 35%;
}

.simon-flash-incorrect {
  background: rgb(0, 0, 0) !important;
}