@import url('https://fonts.googleapis.com/css2?family=Grechen+Fuemen&display=swap');


*{
  margin: 0;
  padding: 0;
}
.body{
  background: url(1354156.jpeg.jpg);
  min-height: 100vh;
  background-size: 150vw 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#board{
  border: solid rgb(0, 4, 248);
  background: linear-gradient(rgb(2, 122, 133)  rgb(10, 2, 255));
  width: 90vmin;
  height: 90vmin;
  display: grid;
  grid-template-rows: repeat(18,1fr);
  grid-template-columns: repeat(18,1fr);

}
.head{
  background: linear-gradient(rgb(101, 8, 8),rgb(51, 255, 0));
  border-radius: 35%;
  border: .5vmin solid rgb(0, 0, 0);

}

.snake{
  background: linear-gradient(rgb(0, 1, 6),rgb(255, 0, 0));
  border: .25vmin solid rgb(0, 0, 0);
  border-radius: 50%;
}

.food{
background: linear-gradient(red,yellow);
border-radius: 50%;
height: 16px;
width: 16px;


}
footer{
  text-align: center;
  background: linear-gradient(red,yellow);
  color: rgb(0, 0, 0);
  font-weight: bold;

  
  
}
#scoreBox{
  position: absolute;
  top: 9px;
  right: 200px;
  font-size: 40px;
  font-family: "Grechen Fuemen", serif;
  color: rgb(255, 0, 234);

}
#HighScoreBox{
  position: absolute;
  bottom: 9px;
  left: 100px;
  font-size: 40px;
  font-family: "Grechen Fuemen", serif;
  color: rgb(255, 162, 0);

}