body {
  touch-action: manipulation;
  color: white;
  background-color:#181818;
  font-size: 24pt;
  font-family: sans-serif;
  width: 720px;
}

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centers content horizontally */
  align-items: center;     /* Centers content vertically */
  width: 100vw;
}

.d-pad {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers content horizontally */
  align-items: center;     /* Centers content vertically */
}

.d-pad-lr {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centers content horizontally */
  align-items: center;     /* Centers content vertically */
}

#generateBtn {
  margin-bottom: 1em;
}

#canvas {
  margin-top: 1em;
  margin-bottom: 1em;
}

input {
  height: 128px;
  font-size: 32pt;
  background-color: #555555; /* A dark gray background */
  color: #ffffff;           /* White text for contrast */
}

input[type="text"] {
  background-color: #555555; /* A dark gray background */
  color: #ffffff;           /* White text for contrast */
  width: 128px;
  padding-right: 10px;
  line-height: 1.5;
  border: 1px solid #ccc;
  border-radius: 5px; /* Adds rounded corners */
  background-color: #fff;
  color: #333;
  box-sizing: border-box; /* Ensures padding/border are included in width calculation */
  margin-top: 2px;
}

input[type="button"] {
  min-width: 128px;
  padding: 10px 20px;       /* Spacing inside the button */
  border-radius: 4px;       /* Rounded corners */
  cursor: pointer;          /* Hand cursor on hover */
}

#generateBtn {
  width: 256px;
}

#upBtn, #downBtn {
  width: 256px;
}

#leftBtn, #rightBtn {
  width: 256px;
}

#leftBtn {
  float: left;
}

table {
  border-collapse: collapse;
}

th {
  vertical-align: bottom;
  margin-bottom: 0;
}

td, th {
  width: 25%;
  text-align: left;
}