@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body {
  background-image: url("https://www.shutterstock.com/image-photo/old-texture-background-light-brown-600nw-2347602089.jpg");
  background-position: center;
  background-size: cover;
  font-family: Calibri;
  text-align: center;
}
c {
  color: red;
}
.case {
  cursor: pointer;
  animation: appear 5s ease forwards;
  color: white;
  min-height: 43.8px;
  margin: 1.7px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 2px white solid;
  background-color: black;
  width: 45px;
  transition: 0.2s;
}
.case:hover {
  color: red;
  transform: scale(1.2);
}
.case:last-of-type {
  border: 2px black solid;
  color: black;
  background-color: white;
}
b {
  display: none;
  text-align: center;
  position: relative;
  top: -28px;
}
@media (max-width: 600px) {
  .case {
    width: 40px;
    min-height: 40px;
    margin: 3px;
    font-size: 14px;
  }
}