* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  display: grid;
  background: #000;
}
.board {
  margin: auto;
  height: 1000px;
  width: 1000px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.square {
  color: red;
  /*   box-shadow: 0 1px, 0 2px, 0 3px, 0 4px, 0 5px, 0 -1px green, 0 -2px green,
    0 -3px green, 0 -4px green, 0 -5px green, 1px 0 blue, 2px 0 blue, 3px 0 blue, 4px 0 blue, 5px 0 blue, -1px 0 yellow, -2px 0 yellow, -3px 0 yellow, -4px 0 yellow, -5px 0 yellow; */
}
.square:nth-child(even) {
  background: black;
  animation-delay: 10s;
}
.square:nth-child(odd) {
  background: white;
  z-index: 1;
  position: relative;
}

.square:nth-child(5n + 1) {
  animation: rotate linear 5s infinite;
}
.square:nth-child(5n + 2) {
  animation: rotate linear 5s infinite;
  animation-delay: 0.25s;
}
.square:nth-child(5n + 3) {
  animation: rotate linear 5s infinite;
  animation-delay: 0.5s;
}
.square:nth-child(5n + 4) {
  animation: rotate linear 5s infinite;
  animation-delay: 0.75s;
}
.square:nth-child(5n + 5) {
  animation: rotate linear 5s infinite;
  animation-delay: 1s;
}

@keyframes rotate {
  10% {
    transform: rotate(45deg);
    background: rgb(255, 161, 161);
    box-shadow:
    0 0 20px 10px rgb(0, 0, 0),
    0 0 20px 10px #f0f,
    0 0 20px 10px #0ff;
    opacity: 50%;
  }
  50% {
    transform: rotate(45deg);
    background: royalblue;
    box-shadow:
    0 0 20px 10px rgb(0, 0, 0),
    0 0 20px 10px #f0f,
    0 0 20px 10px #0ff;
    opacity: 50%;
  }
  75% {
    transform: rotate(0);
    background: lightseagreen;
    box-shadow:
    0 0 20px 10px rgb(0, 0, 0),
    0 0 20px 10px #f0f,
    0 0 20px 10px #0ff;
    opacity: 75%;
  }
}