:root {

  /* Colours */
  --navBorder: #7e94c6;
  --lightPurple: #7992cb;
  --lightBluePurple: #3e5ca0;
  --darkBluePurple: #413ea0;

  --veryVeryLightGrey: #f1f1f1;
  --veryLightGrey: #e2e2e2;

  /* Type */
  --baseFontStack: 'Lato', 'Helvetica Neue', helvetica, arial, sans-serif;
  --baseFontSize: 0.875rem;
  --baseLineHeight: 1.5;

  /* Highly beta™ type vertical rhythm */
  --baseUnitMultiple: 0.5lh;
  --baseRemainder: calc(round(up, var(--baseUnitMultiple), var(--defaultParagraphSpacing)) - var(--baseUnitMultiple));

  /* Perfect fourth */
  --typeScale: 1.25;

  --defaultParagraphSpacing: calc(var(--baseLineHeight) * 1rem);
  --verticalSpacingMultiple: var(--defaultParagraphSpacing);

  --typeXXXXL: calc(var(--baseFontSize) * pow(var(--typeScale), 6));
  --typeXXXL: calc(var(--baseFontSize) * pow(var(--typeScale), 5));
  --typeXXL: calc(var(--baseFontSize) * pow(var(--typeScale), 4));
  --typeXL: calc(var(--baseFontSize) * pow(var(--typeScale), 3));
  --typeL: calc(var(--baseFontSize) * pow(var(--typeScale), 2));
  --typeM: calc(var(--baseFontSize) * var(--typeScale));
  --typeS: var(--baseFontSize);
  --typeXS: calc(var(--baseFontSize) * pow(var(--typeScale), -1));
}

/* Reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  line-height: var(--baseLineHeight);
}

body {
  font-family: var(--baseFontStack);
  font-size: var(--baseFontSize);
  line-height: var(--baseLineHeight);

  color: var(--textColour);
  background: var(--backgroundColour);
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin-block-end: var(--baseRemainder);
}

h1 {
  font-size: var(--typeXXL);
}

h2 {
  font-size: var(--typeXL);
}

h3 {
  font-size: var(--typeL);
}

h4 {
  font-size: var(--typeM);
  margin-block-end: var(--baseRemainder);
}

p {
  margin-block-end: var(--defaultParagraphSpacing);
  text-wrap: pretty;
  color: var(--textColour);
}

ul {
  margin-block-end: var(--defaultParagraphSpacing);
}

li {
  margin-inline-start: var(--verticalSpacingMultiple);
}

small {
  font-size: var(--typeXS);
}

pre,
code {
  font-family: var(--codeFontStack);
  margin-block-end: var(--defaultParagraphSpacing);
  background: var(--codeBackground);
  border-radius: 0.25em;
}

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

#flash-group {
  position: absolute;
  width: 100vw;
  background: rgba(0 0 0 / 0.9);
  text-align: center;
}

#client-error,
#server-error {
  padding: 0.5rem;
}

body {
  color: #333;
}

header {
  background: var(--lightBluePurple);
  background: -webkit-linear-gradient(135deg, var(--darkBluePurple), var(--lightBluePurple));
  height: 90vh;
  padding-top: 10vh;
}

@media (min-width: 768px) {
  header {
    padding-top: 15vh;
  }
}

footer {
  height: 10vh;
  background: var(--veryLightGrey);
  line-height: 10vh;
}

footer small {
  color: #fff;
}

a {
  color: var(--lightBluePurple);
  text-decoration: none;
  transition: color .15s ease-in-out;
}

a:hover {
  color: var(--lightPurple);
}

nav {
  background: -webkit-linear-gradient(135deg, var(--darkBluePurple), var(--lightBluePurple));
}