@import url("https://fonts.googleapis.com/css?family=Baloo+2");

* {
  font-family: "Baloo 2", cursive;
  color: #2078df;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  background-color: #1d1f20;
}

main {
    display:grid;
    grid-template: repeat(12, 1fr) / repeat(12, 1fr);
    width: 40rem;
    height: 40rem;
    background-color: #2078df;
}

.cell {
    border: 0.5px solid #65a2e9;
    
}

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

.cell.snake {
    background-color: greenyellow;
}

button {
    border-radius: 0.2rem;
}

#controls {
    display: none;
    grid-template: repeat(3, 1fr)/repeat(3,1fr)
}

button.up {
    grid-row: 1/2;
    grid-column: 2/3;
}

button.down {
    grid-row: 3/4;
    grid-column: 2/3;
}

button.right {
    grid-row: 2/3;
    grid-column: 3/4;
}
button.left {
    grid-row: 2/3;
    grid-column:1/2;
}

#scoreStrip {
    display:none
}