* {
  margin: 0;

  padding: 0;

  font-family: system-ui;
}

.colorName {
  margin-bottom: 30px;
}

body {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: 100vh;
}
main {
  display: flex;

  justify-content: space-around;

  align-items: center;

  flex-wrap: wrap;

  width: 500px;
}

button {
  padding: 30px;

  width: 160px;

  font-size: 1.5em;

  text-align: center;

  text-transform: uppercase;

  border: 2px solid black;

  margin: 3px;

  flex: 1;

  border-radius: 15%;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

button:hover {
  opacity: 80%;
}
