html {
  font-family: Arial;
  text-align: center;
}

.div > h1 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.div > div > button {
  margin: 15px 10px 0px 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  font-size: 1.25rem;
  transition: all 0.15s;
}
#random {
  background-color: #4caf9e;
}
#random:active {
  background-color: #348c7d;
}

.div > div > button:hover {
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.75);
}
.div > div > button:active {
  background-color: #308134;
}

.div > h4 {
  font-size: 2rem;
  margin: 2rem 0px;
}

span {
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 1.15rem;
  transition: all 0.15s;
  cursor: pointer;
}
span:hover {
  padding: 8px 12px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
}
#buttonGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 150px));
  grid-template-rows: repeat(4, 33.5px);
  gap: 10px;
  justify-content: center;
  margin: 0px 15px;
}

@media screen and (max-width: 450px) {
  #buttonGrid {
    grid-template-columns: repeat(2, minmax(85px, 120px));
    grid-template-rows: repeat(8, 30px);
  }
  span {
    font-size: 1rem;
  }
  .div > h1 {
    font-size: 2rem;
    padding: 5px;
  }
  .div > h4 {
    font-size: 1.5rem;
    margin: 4px 0px 7px 0px;
  }
  .div > div > button {
    font-size: 1rem;
    padding: 10px 20px;
    margin: 10px 5px 20px 5px;
  }
  #currentColor {
    font-size: 1.rem;
    margin: 10px 0px 20px 0px;
  }
}

#crimson {
  background-color: crimson;
  color: white;
}
#red {
  background-color: red;
  color: white;
}
#orange {
  background-color: orange;
}
#gold {
  background-color: gold;
}
#yellow {
  background-color: yellow;
}
#lime {
  background-color: limegreen;
}
#green {
  background-color: green;
  color: white;
}
#cyan {
  background-color: cyan;
}
#blue {
  background-color: blue;
  color: white;
}
#navy {
  background-color: navy;
  color: white;
}
#violet {
  background-color: indigo;
  color: white;
}
#purple {
  background-color: purple;
  color: white;
}
#black {
  background-color: black;
  color: white;
}
#grey {
  background-color: grey;
  color: white;
}
#white {
  background-color: white;
}
#brown {
  background-color: saddlebrown;
  color: white;
}

#currentColor {
  font-size: 1.25rem;
  margin-top: 30px;
}