styles.css

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(#2e343a, #1c1d1f);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: Phantomsans, sans-serif;
}

/* Game State Communication*/

.game-state {
  color: white;
  margin: 10px auto;
  align-content: center;
  max-width: 340px;
  font-size: 16px;
  font-family: Phantomsans, sans-serif;
}

/* Settings */
.difficulty-settings, 
.speed-settings {
  background-image: linear-gradient(144deg, rgba(126,126,126,1) 0%, rgba(199,199,199,1) 50%, rgba(84,84,84,1) 100%);
  align-items: center;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  color: black;
  display: flex;
  font-size: 12px;
  justify-content: center;
  line-height: 1em;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  margin: 10px auto;
}

.difficulty-settings {
  max-width: 340px;
  min-width: 140px;
}

.speed-settings {
  min-width: 100px;
  max-width: 240px;
}

.difficulty-settings label,
.speed-settings label {
  background: none;
  padding: 10px 24px;
  border-radius: 6px;
  width: 60px;
  height: 100%;
  transition: 200ms;
}

input[name="difficulty-setting"]:checked+label,
input[name="speed-setting"]:checked+label {
  background: none;
  background-color: rgb(5, 6, 45);  
  color: white;
}

input[name="difficulty-setting"],
input[name="speed-setting"] {
  display: none;
}

/* Game field */
.game-field {
  align-items: center;
  height: 100px;
  max-width: 410px;
  margin: 0 auto;
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.game-button {
  width: calc(50% - 10px);
}

@media (max-width: 600px) {
  .game-button {
    width: calc(50% - 10px);
  }

  html, body {
    align-items: baseline;
  }
}

/* new game */
.simon-button.new-game {
  background-image: linear-gradient(144deg, rgba(126,126,126,1) 0%, rgba(199,199,199,1) 50%, rgba(84,84,84,1) 100%);
  margin: 50px auto;
}

.simon-button.new-game:active span {
  background: none;
}

/* game buttons */
.simon-button.game-button:nth-of-type(1) {
  background-image: linear-gradient(144deg, rgba(163,163,0,1) 0%, rgba(254,255,0,1) 50%, rgba(251,251,160,1) 100%);
  box-shadow: 0 0 0 rgba(163,163,0,0);
  transition: box-shadow 0.2s;
}

.simon-button.game-button:nth-of-type(1).active {
  box-shadow: 0 0 30px rgba(163,163,0,1) ;
}

.simon-button.game-button:nth-of-type(2) {
  background-image: linear-gradient(144deg, rgba(200,1,1,1) 0%, rgba(255,0,86,1) 50%, rgba(116,0,43,1) 100%);
  box-shadow: 0 0 0 rgba(200,1,1,0);
  transition: box-shadow 0.2s;
}

.simon-button.game-button:nth-of-type(2).active {
  box-shadow: 0 0 30px rgba(200,1,1,1);
}

.simon-button.game-button:nth-of-type(3) {
  background-image: linear-gradient(144deg, rgba(0,69,255,1) 0%, rgba(73,82,140,1) 50%, rgba(4,0,116,1) 100%);
  box-shadow: 0 0 0 rgba(0,69,255,1);
  transition: box-shadow 0.2s;
}

.simon-button.game-button:nth-of-type(3).active {
  box-shadow: 0 0 30px rgba(0,69,255,1);
}

.simon-button.game-button:nth-of-type(4) {
  background-image: linear-gradient(144deg, rgba(60,232,54,1) 0%, rgba(73,140,83,1) 50%, rgba(0,116,23,1) 100%);
  box-shadow: 0 0 0 rgba(60,232,54,0);
  transition: box-shadow 0.2s;
}

.simon-button.game-button:nth-of-type(4).active {
  box-shadow: 0 0 30px rgba(60,232,54,1);
}

.simon-button {
  align-items: center;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
}

.simon-button span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 200ms;
}

.simon-button.active span {
  background: none;
}

/* Scores */
.scores {
  color: white;
  width: calc(100% - 10px);
}

.chart {
  width: 600px;
  height: 400px;
}

@media (max-width: 600px) {
  .chart {
    width: calc(100% - 10px);
  }

}

/* Update */
.simon-button.update {
  background-image: linear-gradient(144deg, rgba(126,126,126,1) 0%, rgba(199,199,199,1) 50%, rgba(84,84,84,1) 100%);
  margin: 10px auto;
}

.simon-button.update:active span {
  background: none;
}