/** CSS Constants / Variables magic */
:root {
  --body-colour: #212529;

  --primary-colour: #008d37;
  --secondary-colour: #28156f;
  --accent-colour: #71625b;
  --highlight-colour: #f8c301;

  /* https://paletton.com/#uid=54c0u0ktrkdlbrDqrou-ifNL8aq */
  --link-colour: #214282;
  --hover-colour: #5b1d83;

  /* https://paletton.com/#uid=53J0u0klhrGbFGUh0vIpPopsRjk */
  --box-colour: #5873a8;
  --box-hover-colour: #234382;

  --light-grey-colour: #ccc;
  --lighter-grey-colour: #eee;

  --white-colour: #fff;

  --gutter-width: 15px;
  --neg-gutter-width: -15px;

  --max-content-width: 720px;
  --extended-max-content-width: 920px;
}

/* Use border box throughout */
* {
  box-sizing: border-box;
}

/* Reset font size */
html {
  font-size: 62.5%;
}

body {
  /** Set font to system */
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

/** Hide from screen readers */
.sr-only {
	display: block;
	height: 1px;
	width: 1px;
	text-indent: -9999px;
	overflow: hidden;
}

/** Max width images */
img {
	max-width: 100%;
	height: auto;
}

/** Container */
.container {
	max-width: 100%;
}

/* Links */
a,
a:visited,
a:active {
  color: var(--link-colour);
}

a:hover,
a:focus {
  color: var(--hover-colour);
}