#snake {
  display:flex;
  font-family: sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  height: 100vh;
  margin: 0;
}
.uno {
  width: auto;
  height: auto;
  margin-left: 5%;
  margin-top: 10px;
}
.dos {
    width: auto;
  height: auto;
    margin-left: 5%;
}
canvas {
  background-color: #222;
  border: 3px solid #333;
  margin-top: 10px;
}

.iniciarsnaks{
  color: #160606;
  background: #18936cba;
  font-size: 1.5em;
  padding: 10px 20px;
  border: 2px solid #4a4040;
  border-radius: 5px ;
  cursor: pointer;
}
.controls1 {
    display: none; /* Oculta los controles por defecto */
    justify-content: center;
    align-items: auto;
    

    /*flex-wrap: wrap;*/
    width: 80%;
    margin: 10px auto;
}


.controls1 button {
    width: 50px;
    height: 50px;
    font-size: 50px;
    margin: 0;
    border-radius: 10px;
    color: white;
    border: none;
    cursor: pointer;
}

/*#upBtn, #downBtn {
    width: 100%;
}*/

@media (max-width: 600px) {
    #snake {
      flex-direction: column;
    }
    .controls1 {
        display: grid; /* Muestra los controles en pantallas pequeñas */
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(3,1fr);
    }
    .con-sn {
      width: 50px;
      height: 50px;
    }
    #upBtn {
        grid-column: 2/3;
        grid-row: 1/2;
    } 
    #leftBtn {
        grid-column: 1/2;
        grid-row: 2/3;
    }
    #rightBtn {
        grid-column: 3/4;
        grid-row: 2/3;
    }
    #downBtn {
        grid-column: 2/3;
        grid-row: 3/4;
    }
    #upBtn, #leftBtn, #rightBtn, #downBtn {
      
      width: 50px;
      height: 50px;
    }
}