html, body {
  min-height: 100vh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--background);
  color: var(--foreground);
}

#wrapper {
  width: var(--content-width);
  margin-top: var(--separation);
}

#header {
  display: flex;
  justify-content: center;
  margin-bottom: var(--separation);
}
#header > a {
  color: unset;
  text-decoration: unset;
}

pre#logo {
  text-align: left;
  display: inline-block;
  /*font-size: 1.6em;*/
  font-family: inherit;
}

.content {
  border: 1px solid var(--foreground);
  margin-bottom: var(--separation);
}

div.content {
  padding: var(--separation);
}

form.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

form.content > *:not(:nth-last-child(-n+2)) {
  border-bottom: 1px solid var(--foreground);
}

form.content > label {
  display: grid;
  align-items: center;
  justify-content: right;
}

.select-wrapper {
  display: grid;
  grid-template-columns: 1fr 2em;
}

.select-wrapper::after {
  grid-area: 1 / 2 / 1 / 3;

  content: "v";
  
  padding: 0.3em;
  border-left: 1px solid var(--foreground);
  
  /* Prevent hide any overlapping select text */
  background-color: var(--background);
  pointer-events: none;
  text-align: center;
}
.select-wrapper > select {
  grid-area: 1 / 1 / 1 / 3;
  padding: 0.3em;
  appearance: none;
  background-color: var(--background);
}

.primary-input > :nth-last-child(2) {
  border-right: 1px solid var(--foreground);
}

.primary-input {
  grid-column: 1 / -1;
  display: flex;
}

.primary-input > :not(:last-child) {
  flex-grow: 1;
}

.primary-input > :not(input) {
  display: grid;
  text-align: center;
  align-items: center;
}

.primary-input > input {
  padding: 0.7em 1em;
}

#slogan {
  text-align: center;
  margin-bottom: var(--separation);
}

.nav {
  display: flex;
  justify-content: center;
  
  margin-left: var(--separation);
  margin-right: var(--separation);

  flex-wrap: wrap;
  margin-bottom: calc(var(--separation) / 2);
}

.nav > a {
  margin-left: calc(var(--separation) / 2);
  margin-right: calc(var(--separation) / 2);
  margin-bottom: calc(var(--separation) / 2);
}


/* Misc Styling */
pre.error-message {
  overflow-x: auto;
  padding: 1em 0;
}

.pagination {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-areas: "first previous _ next last";
  grid-gap: var(--separation);
}

.pagination .first {
  grid-area: first;
}
.pagination .previous {
  grid-area: previous;
}
.pagination .next {
  grid-area: next;
}
.pagination .last {
  grid-area: last;
}