:root {
  /* Keyman brand colours, derived from https://keyman.com/ */
  --blue: #6fbbd4;
  --blue-light: #b3dbe7;
  --red: #b90529;
  --red-light: #de929c;
  --orange: #f18407;
  --orange-light: #fbc88f;
  --gray: #888888;
  --gray-secondary-text: #515154;
  --gray-hover: #c5c5c5;
  --gray-disabled: #949494;
  --gray-light: #d6d6d6;
  --gray-highlight: #e0e0e0;
  --gray-dark: #454545;
  --lite-white: #f1f1f1;
  --white: #ffffff;
  --primary-blue: #0077cc;
  --dark-blue: #054b7a;
  --error-bg-color: #f8d7db;
  --error-fg-color: #400000;

  --default-text-color: #000;

  /* Font stack */
  /* Custom fonts downloaded from Google Fonts -- see public/index.html */
  --main-font: "Cabin";
  --secondary-font: "Roboto";
  --mono-font: "Roboto Mono";

  /* Font-size variables */
  --xxs: 0.75em;
  --xs: 0.875em;
  --s: 1em;
  --m: 1.125em;
  --l: 1.25em;
  --xl: 1.5em;
  --xxl: 2.5em;

  /* Spacing and border variables */
  --sb-xxs: .3125rem;
  --sb-xs: .625rem;
  --sb-s: .9375rem;
  --sb-m: 1.25rem;
  --sb-l: 1.5625rem;
  --sb-xl: 1.875rem;
  --sb-xxl: 2.5rem;
}

body {
  font-family: var(--main-font), sans-serif;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--main-font), sans-serif;
}

pre,
code,
samp {
  font-family: var(--mono-font), monospace;
}

/**
 * .button Block
 *
 * Can be applied to either a <button> or <a> element.
 */
.button {
  display: inline-block;
  margin: 0 .625em;
  padding: .625rem 1.25rem; /* button--medium size */
  border: 1px solid transparent;
  border-radius: .625rem;

  font: bold 1em var(--main-font), sans-serif;
  text-transform: uppercase;
  text-decoration: none;

  color: var(--default-text-color);
  background-color: var(--lite-white); /* button--grey */

  transition-duration: 0.2s;
  cursor: pointer;
}

/* make <a> .button have a focus ring like <button> elements. */
a.button:focus {
  outline: .5rem auto var(--primary-blue);
  outline-color: -webkit-focus-ring-color;
}

.button--grey:hover {
  background-color: var(--gray-hover);
}

.button--grey.button--outline {
  border-color: var(--gray-hover);
  background-color: var(--white);
}

.button--blue,
.button--primary {
  background-color: var(--primary-blue);
  color: var(--white);
}

.button--blue:hover,
.button--primary:hover {
  background-color: var(--dark-blue);
}

.button--blue.button--outline,
.button--primary.button--outline {
  border-color: var(--primary-blue);
  background-color: var(--white);
  color: var(--primary-blue);
}

.button--outline:hover {
  background-color: var(--lite-white);
}

.button--shadow {
  box-shadow: 0px 25px 30px rgba(0, 0, 0, 0.15);
}

.button--small {
  padding: .3125rem .625rem;
}

.button--large {
  padding: .625rem 3.75rem;
}

/**
 * Utility classes for margin top
 */
.mt-xs {
  margin-top: 10px;
}
.mt-s {
  margin-top: 14px;
}
.mt-m {
  margin-top: 20px;
}
.mt-l {
  margin-top: 30px;
}
.mt-xl {
  margin-top: 40px;
}
.mt-xxl {
  margin-top: 50px;
}

/**
 * Utility classes for margin bottom
 */
.mb-s {
  margin-bottom: 10px;
}
.mb-m {
  margin-bottom: 20px;
}
.mb-l {
  margin-bottom: 30px;
}
.mb-xl {
  margin-bottom: 40px;
}
.mb-xxl {
  margin-bottom: 50px;
}