:root {
    --blue: #5b61ac;
    --green: #86c440;
    --font: black;
    --light-font: white;
    --background: silver;
    --background-light: lightgray;
    --error: #ff7e6f;
}
body,td,th,input,select,button,textarea {
  font-family: Arial, Helvetica;
  font-size: 11pt;
}
th {
  color: var(--blue);
}
body {
  background-color: var(--background);
  color: var(--font);
}
h1 {
  background-color: var(--green);
  margin: 20px 0;
  padding: 5px 10px;
  border-radius: 10px;
  color: var(--light-font);
}
a {
  color: var(--blue);
}
input {
    color: var(--blue);
}
input:invalid {
    color: var(--error);
}
form {
    margin: 0;
    padding: 0;
}
input[type="button"], input[type="reset"], input[type="submit"], button {
    background-color: var(--green);
    color: var(--light-font);
    border-radius: 10px;
}
dl {
  display: grid;
  grid-template-columns: max-content auto;
}
dt,dd {
  padding: 5px;
}
dt {
  grid-column-start: 1;
  font-weight: bold;
  color: var(--blue);
}
dd {
  grid-column-start: 2;
}
table {
  border-collapse: collapse;
}
table.oddeven tbody tr:nth-child(odd) {
    background-color: var(--background-light);
}
td,th {
  text-align: left;
  padding: 5px;
}
p.footer {
  display: block;
  text-align: center;
  font-size: 9pt;
}
div.error {
    background-color: var(--error);
    color: var(--light-font);
    margin: 20px 0;
    padding: 5px 10px;
    border-radius: 10px;
}