style.css

body {
  font-family: Helvetica, "You don't have Helvetica? Fine.", Arial, sans-serif;
  background-color: #dcedfd;
}

main,
footer {
  margin: 0 30px;
}

.black-lives-matter {
  text-align: center;
  font-size: 4em;
  text-transform: uppercase;
  background: black;
  color: white;
  padding: 1em;
  font-weight: bold;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.item {
  display: flex;
  padding: 1em;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  width: 9em;
  height: 6em;
  font-size: 2em;
  border: black 0.07em solid;
  border-radius: 0.6em;
  margin: 0.3em;
}

.item:hover, .item:hover a {
  transition: 0.5s;
}

.item a {
  color: black;
}

.header-cell {
  background: #ff634799;
}

.header-cell:hover {
  background: tomato;
}

.what-is-this {
  background: #0000ff99;
}

.what-is-this:hover {
  background: blue;
}

.what-is-this:hover a {
  color: white;
}

.deduction-income {
  background: #00800099;
}

.deduction-income:hover {
  background: green;
}

.deduction-income:hover a {
  color: white;
}

.pride-flags {
  background: #80008099;
}

.pride-flags:hover {
  background: purple;
}

.pride-flags:hover a {
  color: #dcedfd;
}

.boycotts {
  background: #D0D0D099;
}

.boycotts:hover {
  background: white;
}

.boycotts:hover a {
  color: red;
}

@media screen and (max-width: 320px) {
  .black-lives-matter {
    padding: 0.5em;
  }
    
  .item a {
    text-align: center;
  }
}