.grid {
  display: grid;
  height: 70%;
  background-color: black;
  grid-template-columns: 1fr 1fr 1% repeat(16, 1fr);
  grid-template-rows: repeat(7, 1fr) 2% 1fr 1fr;
  grid-row-gap: 1%;
  grid-column-gap: 0.5%;
  place-content: center;
  text-align: center;
  font-weight: bold;
  padding: 2%;
}

.box {
  transition: width 1s, height 1s, transform 1s;
  font-size: 3vh;
  display: grid;
  place-content: center;
}

body {
  background-color: black;
  height: 100vh;
  overflow: hidden;
}

.yellow {
  background-color: #fcff8c;
}

.red {
  background-color: #fe989a;
}

.blue {
  background-color: #96cdff;
}

.green {
  background-color: #9aff97;
}

.animation:hover {
  text-shadow: 0 0 3px #ff0000;
  border-radius: 360px;
  transform: rotate(360deg);
  animation: BG_Colors 5s linear infinite;
}

h1 {
  color: red;
  text-align: center;
  font-size: 2.5vw;
}

.text {
  content-visibility: hidden;
}

@keyframes BG_Colors {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  75% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

@media (max-width: 1000px) or (max-height: 500px) {
  .text {
    content-visibility: visible;
    color: #ff0000;
    margin-top: 10%;
    padding: 5%;
    border: 5px solid black;
  }
  .grid {
    display: none;
  }
  body {
    background-color: white;
  }
}