@import url("https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap");
* {
  padding: 0;
  margin: 0;
}

.body {
  background: url("bg.jpg");
  min-height: 100vh;
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* #scoreBox {
  position: absolute;
  top: 15vh;
  color: #f9f2f2;
  font-size: 39px;
  font-weight: bold;
  font-family: "Offside", cursive;
}

#hiscoreBox {
  position: absolute;
  top: 22vh;
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-family: "Offside", cursive;
} */

.score {
  position: absolute;
  top: 15vh;
  left: 5vw;
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-family: "Offside", cursive;
}

#board {
  /* background: linear-gradient(
    179.4deg,
    rgb(12, 20, 69) -16.9%,
    rgb(71, 30, 84) 119.9%
  ); */
  /* background-image: url("./snakeback.jpg"); */
  background: url("../snakeback.avif");
  top: 20vh;
  width: 50vw;
  height: 80vh;
  /* background-repeat: no-repeat; */

  border: 2px solid black;
  display: grid;

  grid-template-rows: repeat(18, 1fr);
  grid-template-columns: repeat(18, 1fr);
}

.head {
  background: rgb(60, 178, 224);
  border: 2px solid rgb(34, 4, 34);
  transform: scale(1.02);
  border-radius: 40px;
}

.snake {
  background-color: rgb(235, 240, 244);
  border: 0.25vmin solid white;
  border-radius: 40px;
}

.food {
  background: rgb(227, 55, 7);
  border: 0.25vmin solid black;
  border-radius: 100px;
}