style.css

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #898989;
  padding: 25px;
  font-family: sans-serif;
}

.wrapper {
  min-height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(225px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 25px;
}

.wrapper .box {
  width: 85%;
  height: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
  text-shadow: 1px 1px 0 #000,
 -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000;
  font-size: 1.35em;
  text-align: center;
}

.wrapper .box p {
  border-left: 5px outset #777;
  border-top: 5px outset #777;
  border-bottom: 5px inset #222;
  border-right: 5px inset #222;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  cursor: pointer;
}

.wrapper .box.blue {
  background-color: cornflowerblue;
}

.wrapper .box.blue:hover {
  background-color: #4d85ea;
}

.wrapper .box.green {
  background-color: green;
}

.wrapper .box.green:hover {
  background-color: #006700;
}

.wrapper .box.orange {
  background-color: orangered;
}

.wrapper .box.orange:hover {
  background-color: #e63e00;
}

.wrapper .box.red {
  background-color: crimson;
}

.wrapper .box.red:hover {
  background-color: #c51236;
}

.wrapper .box.purple {
  background-color: purple;
}

.wrapper .box.purple:hover {
  background-color: #670067;
}

.wrapper .box .hidden {
  display: none;
}