* {
  box-sizing: border-box;
  margin: 0;
}

button {
  background-color: rgb(239, 239, 239);
  border: 1px solid grey;
  margin-right: 20px;
  font-size: 18px;
  color: rgb(8, 8, 70);
}

.main-header {
  text-align: center;
  color: rgb(8, 8, 70);
}

.main {
  position: relative;
  width: 660px;
  height: 540px;
  border: 2px solid gray;
  margin: 2px auto;
}

.controls {
  padding: 10px 10px;
  display: flex;
  justify-content: center;
}

#cells {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.cell {
  width: 30px;
  height: 30px;
  border: 1px solid grey;
  background-color: darkgray;
}

.snaky {
  background-color: green;
}

.snaky0 {
  background-color: MistyRose;
}

.snaky1 {
  background-color: Green;
}

.snaky2 {
  background-color: RosyBrown;
}

.snaky3 {
  background-color: Peru;
}

.snaky4 {
  background-color: #b22222;
}

.snaky5 {
  background-color: DarkSlateGray;
}

.snaky6 {
  background-color: SaddleBrown;
}

.snaky7 {
  background-color: BurlyWood;
}
.snaky8 {
  background-color: RoyalBlue;
}
.snaky9 {
  background-color: Coral;
}

.snaky10 {
  background-color: DarkKhaki;
}

.snaky11 {
  background-color: DarkSlateBlue;
}

.snaky12 {
  background-color: SeaGreen;
}

.snaky13 {
  background-color: OliveDrab;
}

.snaky14 {
  background-color: Sienna;
}

.snaky15 {
  background-color: Chocolate;
}

.food {
  background: center / contain no-repeat url(images/leg.ecd408428f0c8c0080d0.png);
  background-color: wheat;
  transition: background 2s;
}

.finish {
  background-color: black;
  transition-property: background-color;
  transition-duration: 2s;
}

.win {
  background: center / contain no-repeat url(images/crown3.4a4684b6723ec633e3e9.png);
  background-color: palevioletred;
  transition-property: background-color;
  transition-duration: 2s;
}

#pause {
  background-color: rgb(239, 239, 239);
  transition-property: background-color;
  transition-duration: 2s;
}

#pause.active {
  transition-property: background-color;
  transition-duration: 2s;
  background-color: rgb(218, 13, 40);
  color: white;
}

.information {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  font-weight: bold;
  font-size: 20px;
  color: rgb(8, 8, 70);
}

.scores {
  color: royalblue;
  margin-right: 10px;
}

.status {
  color: rgb(218, 13, 40);
}

.info {
  opacity: 0;
  transition: opacity 1s;
  background-color: bisque;
  text-align: justify;

  pointer-events: none;
}

.info.active {
  opacity: 0.95;
  transition: opacity 2s;
  pointer-events: auto;
}

.info h2,
.infoGame.head {
  text-align: center;
  margin-bottom: 20px;
  font-size: 30px;
  color: green;
}

.info,
.infoGame {
  position: absolute;
  padding: 20px;
  width: 390px;
  height: 448px;
  color: rgb(8, 8, 70);
  font-size: 20px;
  top: 47px;
  left: 134px;
}

.info img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 185px;
}

.infoGame {
  visibility: hidden;
  background-color: bisque;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}

.infoGame.active {
  visibility: visible;
  opacity: 0.95;
  transition: opacity 4s;
  pointer-events: auto;
}

.infoGame h2 {
  color: rgb(228, 13, 67);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.infoGame img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  height: 160px;
  border: 2px solid peru;
}

.description,
.snakeInfo {
  margin-bottom: 10px;
}

.description {
  text-align: justify;
}

.snakeInfo {
  color: rgb(228, 13, 67);

  margin-top: 10px;
}

.snakeScores {
  margin-bottom: 30px;
}