/* Colour definitions */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --foreground-colour: black;
    --background-colour: white;
    --background-light-colour: #f5f5f5;
    --primary-colour: #0064d7;
    --border-colour: #888888;

    --input-shadow: rgba(0, 0, 0, 0.15);
    --button-highlight: #3d8ee8;
    --button-shadow: #003d85;
    --button-active-bg: #0058c0;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --foreground-colour: #e0e0e0;
    --background-colour: #121212;
    --background-light-colour: #2a2a2a;
    --primary-colour: #6da7e9;
    --border-colour: #555555;

    --input-shadow: rgba(0, 0, 0, 0.4);
    --button-highlight: #9dc5f0;
    --button-shadow: #3a6a9f;
    --button-active-bg: #5a96d6;
  }
}

:root {
  --text-colour: var(--foreground-colour);
  --link-colour: var(--primary-colour);
  --active-link-colour: var(--primary-colour);
  --visited-link-colour: var(--primary-colour);
  --hover-link-colour: var(--background-colour);
  --hover-link-background-colour: var(--primary-colour);
  --input-focus-border: var(--primary-colour);
  --button-text: var(--background-colour);
  --button-background: var(--primary-colour);
  --table-border-colour: var(--border-colour);
  --input-border: var(--border-colour);
  --fieldset-border: var(--border-colour);
  --table-stripe-colour: var(--background-light-colour);
  --input-background: var(--background-light-colour);
}

/* End of colour definitions */

input,
select,
textarea {
  font-family: inherit;
  border: 1px solid var(--input-border);
  padding: 8px;
  box-shadow: inset 0 1px 3px var(--input-shadow);
  font-size: 100%;
  background-color: var(--input-background);
  border-radius: 4px;
  color: var(--text-colour);
  accent-color: var(--link-colour);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--input-focus-border);
}

button {
  font-family: inherit;
  font-size: 100%;
  color: var(--button-text);
  background-color: var(--button-background);
  border-style: solid;
  border-width: 2px;
  border-top-color: var(--button-highlight);
  border-left-color: var(--button-highlight);
  border-bottom-color: var(--button-shadow);
  border-right-color: var(--button-shadow);
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

button:active {
  background-color: var(--button-active-bg);
  border-top-color: var(--button-shadow);
  border-left-color: var(--button-shadow);
  border-bottom-color: var(--button-highlight);
  border-right-color: var(--button-highlight);
  transform: translate(1px, 1px);
}

button:disabled {
  opacity: 0.5;
  cursor: wait;
}

html,
body {
  font-family: "Source Sans Pro", "Source Sans 3", system-ui, sans-serif;
  font-feature-settings: "tnum";
}

body {
  color: var(--text-colour);
  background-color: var(--background-colour);
}

a {
  color: var(--link-colour);
  text-decoration: none;
}

a:visited {
  color: var(--visited-link-colour);
}

a:active {
  color: var(--active-link-colour);
  background-color: var(--background-colour);
}

a:hover {
  color: var(--hover-link-colour);
  background-color: var(--hover-link-background-colour);
}

table,
th,
td {
  border: var(--table-border-colour) solid 1px;
  border-collapse: collapse;
  padding: 8px;
}

tr:nth-child(odd) {
  background-color: var(--table-stripe-colour);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Source Serif Pro", "Source Serif 4", serif;
}

nav ul li {
  display: inline;
  padding: 8px;
}

.right {
  text-align: right;
}

.mono {
  font-family: "Source Code Pro", "Courier Prime", monospace;
}

th {
  background: var(--background-colour);
  position: sticky;
  top: 0;
}

form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

fieldset {
  border: thin solid var(--fieldset-border);
  border-radius: 0.5em;
}

legend {
  color: var(--text-colour);
  padding: 0 8px;
}