snake.css

body {
  font-family: sans-serif;
}

h1 {
  text-align: center;
}

#grid {
  width: 800px;
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  border: 1px solid gray;
  box-shadow: 0 0 2px 1px gray;
}

.cell {
  width: 8px;
  height: 8px;
}

.snake {
  background-color: black;
  border-radius: 50%;
}

.ghost {
  background-color: gray;
}

.normalFood {
  background-color: red;
  border-radius: 50%;
}

.specialFood {
  background-color: #888888;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-name: blink;
}

@keyframes blink {
  from {
    border-radius: 20%;
    box-shadow: 0 0 0 0 #888888;
  }
  to {
    border-radius: 50%;
    box-shadow: 0 0 0 2px #888888;
  }
}

#scoreBoard {
  margin: 0 auto;
  margin-top: 10px;
  height: 20px;
  width: 90px;
  border: solid 1px rgba(0, 0, 0, 0.5);
  text-align: center;
}