@font-face {
  font-display: fallback;
  font-family: "DepartureMono";
  font-weight: normal;
  font-style: normal;
  src: url("../font/DepartureMono-Regular.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

:root {
  --brand-color-900: #b60d4e;
  --brand-color-700: #bf3b6d;
  --brand-color-500: #cf618b;
  --brand-color-300: #faeff3;

  --complementary-color-900: #00449e;
  --complementary-color-500: #357edd;

  --font-body: Verdana, Helvetica, Arial, sans-serif;
  --font-head: "DepartureMono", monospace;

  --dist-1: 0.1rem;
  --dist-2: 0.25rem;
  --dist-3: 0.5rem;
  --dist-4: 1rem;
  --dist-5: 2rem;
  --dist-6: 4rem;
}

body {
  font-family: var(--font-body);
}

html,
body {
  height: 100%;
}

.mw7 {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--dist-4);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-head);
  color: var(--brand-color-700);
}

a {
  color: var(--complementary-color-500);
  &:hover,
  &:focus {
    color: var(--complementary-color-900);
    transition: color 0.15s ease-in;
    text-decoration: underline;
  }
}

h1 {
  font-size: var(--dist-5);
}

/** Specific markup for the logo */
header .rdmr-logo,
footer .rdmr-logo {
  height: 1rem;
  top: 0;
  fill: #b60d4e;
}

/** Accessibility */
.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/** Accessibilty */
.skip-link {
  height: 0;
  overflow: hidden;
}

pre {
  font-size: 0.9rem;
}

hr {
  width: 5em;
  margin: var(--dist-3) auto;
  border: 0;
  border-radius: var(--dist-3);
  background-color: var(--brand-color-900);
  height: 1px;
}

/* bg-*: background */
.bg-color-white {
  background-color: white;
}

.bg-color-brand-500 {
  background-color: var(--brand-color-500);
}

.bg-gradient {
  background-image: linear-gradient(
    to bottom in oklch shorter hue,
    var(--brand-color-700) 0%,
    white 40rem
  );
  background-repeat: no-repeat;
}

.w-100 {
  width: 100%;
}