* {
  margin: 0px;
  padding: 0px;
}

main {
  display: flex;
}

.info {
  background: rgb(58, 19, 19);
  width: 50vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.game {
  background: white;
  width: 50vw;
  height: 100vh;
}

.heading {
  color: rgb(255, 254, 254);
  text-align: center;
  font-size: 70px;
  font-family: Lobster;
  margin-bottom: 40px;
  text-shadow: 4px 4px 5px black;
}

.btn {
  margin: auto;
  text-align: center;
  border: 1px black solid;
  width: fit-content;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 50px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 4px 4px rgb(0, 0, 0);
}

.options {
  display: inline-block;
}

.pressed {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px rgb(0, 0, 0);
}

.btn:hover {
  cursor: pointer;
  background-color: rgb(196, 196, 196);
}

.game {
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  border: 7px black dashed;
  width: 600px;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(1fr, 15);
  grid-template-rows: repeat(1fr, 15);
}

.ball {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball img {
  width: 30px;
  height: 30px;
}

.row {
  grid-row: 1/16;
  background: rgba(255, 0, 0, 0.5);
}

.column {
  grid-column: 1/16;
  background: rgba(0, 0, 0, 0.5);
}

.row:nth-child(n) {
  grid-column: n;
}

.column:nth-child(n) {
  grid-row: n;
}

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

.food {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.food img {
  width: 30px;
  height: 30px;
}

/*
.cell:nth-child(odd) {
  background: red;
}
.cell:nth-child(even) {
  background: blue;
}*/