/* Reset default margins/padding */
html, body {
  margin: 0.0em;
  padding: 0.0em;
}

/* Global grid container: 16 columns, each 6.25% of the viewport width */
.grid-container {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  width: calc(100vw - 0.4em);
  margin: 0.2em;
  background: #f5e8c7;
}

/* Style for all grid items */
.grid-item {
  box-sizing: border-box;
  padding: 0.5em;
  border: 1px solid #ccc;
  text-align: center;
}

.grid-label {
  text-align: right;
}

/* Style for the message box */
.message-box {
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 0.5em;
  background: #eef;
  height: 100%;
  width: 100%;
  text-align: left;
}

/* Ensure input elements fill their grid cell */
.grid-item input {
  width: 100%;
  box-sizing: border-box;
}