html * {
  font-family: sans-serif;
  font-size: 1.5rem;
}


body {
  margin: 0px 5%;
}

header {
  grid-row: 1;
  grid-column: 1 / span 3;
}

.editor-container {
  grid-row: 2;
  grid-column: 1 / span 3;
}

.editor {
  font-family: monospace;
}

.settings {
  grid-row: 3;
}

.output {
  grid-row: 4;
  grid-column: 1 / span 3;
}

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

th, td {
  border: 1px solid #ccc;
  padding: 0.5em 1em;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
}

#error-details {
  padding: 10px;
  background-color: #ffffcc;
  border: 1px solid #ffeb3b;
}

#error-details.error {
  background-color: #ffdddd;
  border-color: #ff5c5c;

}