:root {
  /* Fonts */
  --body-font-family: 'DM Sans', -apple-system, 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', 'sans-serif', 'system-ui', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;

  /* Colors */
  --rsr-color-primary: #1f5b73;
  --rsr-color-primary-100: #ebf5fa;
  --rsr-color-primary-200: #c3e2ef;
  --rsr-color-primary-300: #9bcfe4;
  --rsr-color-primary-400: #72bcd9;
  --rsr-color-primary-500: #4aa9ce;
  --rsr-color-primary-600: #318fb5;
  --rsr-color-primary-700: #266f8d;
  --rsr-color-primary-800: #1b4f64;
  --rsr-color-primary-900: #10303c;
  --rsr-color-info: #001e33;
  --rsr-color-info-100: #e5f4ff;
  --rsr-color-info-200: #b3e0ff;
  --rsr-color-info-300: #80cbff;
  --rsr-color-info-400: #4db5ff;
  --rsr-color-info-500: #1aa1ff;
  --rsr-color-info-600: #0087e6;
  --rsr-color-info-700: #0069b3;
  --rsr-color-info-800: #004b80;
  --rsr-color-info-900: #002d4d;
  --rsr-color-danger: #d00000;
  --rsr-color-danger-100: #ffe5e5;
  --rsr-color-danger-200: #ffb3b3;
  --rsr-color-danger-300: #ff8080;
  --rsr-color-danger-400: #ff4d4d;
  --rsr-color-danger-500: #ff1a1a;
  --rsr-color-danger-600: #e60000;
  --rsr-color-danger-700: #b30000;
  --rsr-color-danger-800: #800000;
  --rsr-color-danger-900: #4d0000;
  --rsr-color-success: #1d8666;
  --rsr-color-success-100: #eafaf5;
  --rsr-color-success-200: #c0f1e2;
  --rsr-color-success-300: #96e8cf;
  --rsr-color-success-400: #6cdfbc;
  --rsr-color-success-500: #42d6a9;
  --rsr-color-success-600: #29bd90;
  --rsr-color-success-700: #209370;
  --rsr-color-success-800: #176950;
  --rsr-color-success-900: #0e3f30;
  --rsr-color-warning: #ff6d00;
  --rsr-color-warning-100: #fff0e5;
  --rsr-color-warning-200: #ffd3b3;
  --rsr-color-warning-300: #ffb680;
  --rsr-color-warning-400: #ff994d;
  --rsr-color-warning-500: #ff7c1a;
  --rsr-color-warning-600: #e66200;
  --rsr-color-warning-700: #b34c00;
  --rsr-color-warning-800: #803700;
  --rsr-color-warning-900: #4d2100;
  --rsr-color-neutral: #4f4f50;
  --rsr-color-neutral-100: #f2f2f2;
  --rsr-color-neutral-200: #d9d9d9;
  --rsr-color-neutral-300: #bfbfc0;
  --rsr-color-neutral-400: #a5a5a6;
  --rsr-color-neutral-500: #8c8c8d;
  --rsr-color-neutral-600: #727273;
  --rsr-color-neutral-700: #59595a;
  --rsr-color-neutral-800: #3f3f40;
  --rsr-color-neutral-900: #262626;

  --rsr-color-white: #fff;
  --rsr-color-black: #171717;

  --rsr-color-brand-risr: #001e33;
  --rsr-color-brand-assess: #68e348;
  --rsr-color-brand-advance: #f29f05;
  --rsr-color-brand-apply: #d447ed;

  --border-radius: 0.24em;

  --heading-color: var(--rsr-color-primary-800);
  --text-color: var(--rsr-color-neutral-800);
  --text-details-color: var(--rsr-color-info);
  --link-color: var(--rsr-color-primary-800);

  --body-bg-color: var(--rsr-color-neutral-100);
}

body {
  background-color: var(--body-bg-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: 1rem;
}

header {
  align-items: center;
  display: flex;
  justify-content: space-around;
  padding: 2em 0.64em;
}

header p,
header a {
  font-size: 0.88rem;
  color: var(--text-details-color);
}

header a {
  text-decoration: underline;
}

main {
  margin: 4em auto;
  max-width: 768px;
  width: 90vw;
}

h1 {
  color: var(--heading-color);
  font-weight: 900;
  font-size: 3.6rem;
  margin: 1.64em 0 0.48em;
  text-align: center;
}

p,
ul {
  font-size: 1.2rem;
  line-height: 140%;
  padding: 1em 0;
  text-align: center;
}

a,
button {
  color: var(--link-color);
}

a {
  text-decoration: underline;
}

button {
  appearance: none;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

a:hover,
button:hover {
  color: var(--heading-color);
  text-decoration: underline;
}

.text-details {
  color: var(--text-details-color);
  font-size: 1rem;
}

#error {
  background-color: var(--rsr-color-primary-100);
  border: 1px solid var(--rsr-color-primary-200);
  border-radius: var(--border-radius);
  margin-top: 4em;
  padding: 1em;
  text-align: center;
}

#url {
  text-decoration: underline;
}

#url,
#timestamp {
  color: var(--rsr-color-primary-800);
}

#error h2 {
  font-size: 1.2rem;
}

#error p {
  font-size: 0.88rem;
  margin: 0;
  padding: 0.14em 0;
}

.has-js {
  display: none;
}

@media (scripting: enabled) {
  .has-js {
    display: block;
  }
}