style.css

:root {
  padding: 1em;
}
* {
  box-sizing: border-box;
}
.con {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header {
  display: flex;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 4em;
  font-weight: 800;
  margin-bottom: 1em;
  margin-top: 0px;
}
.content > div {
  margin: 0px 1em 0px 1em;
}
.content {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.nav {
  display: flex;
  width: 10em;
  flex-direction: column;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  justify-content: center;
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-columns: minmax(0, 1fr);
  /* row-gap: 1px;
  column-gap: 1px; */
  height: 400px;
  width: 400px;
}

.wrapper > div {
  aspect-ratio: 1;
  border: 1px solid black;
}

.btn:hover {
  transform: scale(1.2, 1.2);
}
.btn:active {
  transform: scale(1.4, 1.4);
  background-color: rgb(121, 62, 62);
  color: rgb(240, 222, 222);
}

.btn {
  background-color: rosybrown;
  border: none;
  border-radius: 10px;
  width: 5em;
  height: auto;
  min-height: max-content;
  padding: 0px;
  margin: 1em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 1.5em;
}