body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  background-color: #f8dde9;
  padding-left: 20px;
}

h1 {
  font-size: 1.8rem;
}

/* ----- Navigation ----- */
ul {
  display: flex;
  gap: 30px;
}

ul li {
  list-style-type: none;
}

a {
    color: #773754;
}

a:hover {
    text-decoration: underline;
}

/* ----- Training form ----- */
#trainingInformation {
  display: grid;
  grid-template-columns: min-content min-content;
  white-space: nowrap;
  gap: 10px;
}

/* ----- Information and error messages ----- */
.info {
  color: green;
  font-weight: bold;
  margin-left: 30px;
}

.error {
  color: red;
  font-weight: bold;
}

/* ----- Statistics form and display ----- */
label {
  display: block;
  margin-bottom: 10px;
}

h3 {
  margin: 30px 0;
}

th {
  border-bottom: 1px solid gray;
  padding-bottom: 10px;
}

.first-column {
  border-right: 1px solid gray;
}

.frequency {
  display: flex;
  align-items: center;
}

.interval-swatch {
  height: 50px;
  border: 1px solid black; 
}

.interval-boundaries, .interval-datapoints {
  padding: 20px 20px;
  font-size: 1.2em;
}

.interval-boundaries {
  vertical-align: middle;
}