body {
  cursor: pointer;
}

#board,
.boardInfo {
  max-width: 500px;
}

#board {
  display: grid;
  grid-template-columns: repeat(10, 2.5vw);
}
.score {
  margin: 2em;
  background-color: aliceblue;
  padding: 1rem;
}
#start,
.boardInfo {
  font-size: 1.5em;
}

#gameOver {
  display: none;
  position: absolute;
  top: 5%;
  right: 5%;
  font-size: 45px;
  font-weight: 900;
  font-family: monospace;
  border-radius: 85px;
  padding: 2%;
  background-color: rgb(147, 218, 55);
  color: rgb(154, 25, 90);
  animation-name: colours;
  animation-timing-function: linear;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

@keyframes colours {
  20% {
    background-color: rgb(47, 255, 234);
    right: 55%;
    top: 60%;
  }
  40% {
    background-color: rgb(247, 100, 55);
    right: 75%;
    top: 15%;
  }

  65% {
    background-color: rgb(82, 34, 194);
    right: 30%;
    top: 35%;
  }
  85% {
    background-color: rgba(72, 66, 85, 0.438);
    right: 15%;
    top: 10%;
  }
}

.boardInfo {
  display: flex;
  justify-content: space-between;
  margin: 1em;
}

#start {
  padding: 1rem;
  border-radius: 50%;
  background-color: rebeccapurple;
  border: none;
  color: white;
}

#scoreBoard {
  display: inline-flex;
}

.square {
  aspect-ratio: 1;
}

.emptySquare {
  background-color: rgb(105, 163, 76);
}

.snakeSquare {
  background: linear-gradient(
    5deg,
    rgb(95, 96, 39),
    rgb(54, 184, 93),
    rgb(96, 68, 12),
    rgb(92, 147, 10)
  );
}

.foodSquare {
  background: rgb(225, 240, 128);
  border-radius: 50%;
  animation-name: foodcolor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes foodcolor {
  50% {
    background: rgb(105, 163, 76);
    transform: scale(0.7);
  }
}

#start:hover {
  background-color: darkorange;
}

.instrucciones {
  margin-top: 1%;
  text-align: center;
  color: rgb(3, 3, 3);
  font-size: larger;
  padding: 1%;
  background-color: rgba(165, 186, 50, 0.868);
  width: 25%;
  margin: auto;
  border-radius: 25px;
  color: whitesmoke;
}

#score {
  display: none;
  margin-right: 1em;
}

@media screen and (max-width: 480px) {
  /* INDEX */

  .header {
    width: 100%;
    min-height: 2rem;

    padding: 0.3rem;

    font-size: 0.8rem;
    font-weight: 800;
  }

  .header .nav {
    text-align: center;
  }

  .header .ul {
    padding: 0.3rem;
  }

  .header .li {
    margin: 0 0.3rem;
    display: inline-block;
  }

  .header .li .a:hover {
    color: turquoise;
  }

  .footer {
    text-align: center;
    padding: 2em 0;
    position: relative;
    z-index: 2;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
  }

  #board {
    display: grid;
    grid-template-columns: repeat(10, 5.5vw);
  }

  #start,
  .boardInfo {
    font-size: 1rem;
  }

  #gameOver {
    display: none;
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 14px;
    font-weight: 900;
    font-family: monospace;
    border-radius: 85px;
    padding: 2%;
    background-color: rgb(147, 218, 55);
    color: rgb(154, 25, 90);
    animation-name: colours;
    animation-timing-function: linear;
    animation-duration: 12s;
    animation-iteration-count: infinite;
  }

  @keyframes colours {
    20% {
      background-color: rgb(47, 255, 234);
      right: 55%;
      top: 60%;
    }
    40% {
      background-color: rgb(247, 100, 55);
      right: 65%;
      top: 15%;
    }

    65% {
      background-color: rgb(82, 34, 194);
      right: 30%;
      top: 35%;
    }
    85% {
      background-color: rgba(72, 66, 85, 0.438);
      right: 15%;
      top: 10%;
    }
  }

  .instrucciones {
    margin-top: 3.5rem;
    text-align: center;
    color: rgb(3, 3, 3);
    font-size: 0.8rem;
    padding: 1rem;
    background-color: rgba(165, 186, 50, 0.868);
    width: 10rem;
    border-radius: 25px;
    color: whitesmoke;
  }
}

@media screen and (min-width: 480px) and (max-width: 1024px) {
  /* INDEX */

  .header {
    width: 100%;
    min-height: 1em;

    padding: 0.5em;

    font-size: 1em;
    font-weight: 800;
  }

  .header .nav {
    text-align: end;
  }

  .header .ul {
    padding: 1em;
  }

  .header .li {
    margin: 0 1em;
    display: inline-block;
  }

  .header .li .a:hover {
    color: turquoise;
  }

  #board {
    display: grid;
    grid-template-columns: repeat(10, 4vw);
  }
  .score {
    margin: 1.5em;
    background-color: aliceblue;
    padding: 1em;
  }
  #start,
  .boardInfo {
    font-size: 1.3em;
  }

  #gameOver {
    display: none;
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 1.8em;
    font-weight: 900;
    font-family: monospace;
    border-radius: 85px;
    padding: 2%;
    background-color: rgb(147, 218, 55);
    color: rgb(154, 25, 90);
    animation-name: colours;
    animation-timing-function: linear;
    animation-duration: 12s;
    animation-iteration-count: infinite;
  }

  @keyframes colours {
    20% {
      background-color: rgb(47, 255, 234);
      right: 55%;
      top: 60%;
    }
    40% {
      background-color: rgb(247, 100, 55);
      right: 65%;
      top: 15%;
    }

    65% {
      background-color: rgb(82, 34, 194);
      right: 30%;
      top: 35%;
    }
    85% {
      background-color: rgba(72, 66, 85, 0.438);
      right: 15%;
      top: 10%;
    }
  }

  #start {
    padding: 0.6em;
    border-radius: 50%;
    background-color: rebeccapurple;
    border: none;
    color: white;
  }

  .instrucciones {
    margin-top: 2em;
    text-align: center;
    color: rgb(3, 3, 3);
    font-size: 1.3em;
    padding: 1em;
    background-color: rgba(165, 186, 50, 0.868);
    width: 20em;
    border-radius: 25px;
    color: whitesmoke;
  }

  .footer {
    text-align: center;
    padding: 1em 0;
    position: relative;
    z-index: 2;
    color: white;
    font-size: 1.2em;
    font-weight: 800;
  }
}