html {
  height: 100%;
}

#gesture-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
}

body {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: #101010;
}

#gesture-testing {
  margin-bottom: 20px; /* Adds spacing between input fields and terminal */
  color: white; /* Makes all text inside this section white */
}

#dispatchedGestures {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #333; /* Dark gray background */
  color: white; /* White text for visibility */
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
}
#terminal {
  width: 100%;  /* Ensures terminal takes up full width */
  height: 300px; /* Adjust terminal height as needed */
  overflow: auto; /* Enables scrolling if content overflows */
  border: 1px solid #ccc; /* Optional: adds a border for clarity */
  margin-top: 20px; /* Creates spacing above the terminal */
}

#connection-panel {
  text-align: center;
  margin-bottom: 20px;
}

#clientConnectButton {
  position:fixed;
  background-color: rgb(51,105,232);
  border: none;
  border-radius: 8px;
  width: 120px;
  height: 50px;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  left: 15px;
  top: 15px;
  cursor: pointer;
}

#clientConnectButton:hover {
  background-color: #0056b3;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #007BFF;
  color: white;
}

td {
  background-color: #f9f9f9;
}