:root {
  --color-gray-100: hsl(225, 40%, 98%);
  --color-gray-150: hsl(225, 40%, 97%);
  --color-gray-200: hsl(225, 40%, 96%);
  --color-gray-250: hsl(225, 40%, 93%);
  --color-gray-300: hsl(220, 29%, 90%);
  --color-gray-350: hsl(220, 29%, 85%);
  --color-gray-400: hsl(219, 20%, 80%);
  --color-gray-450: hsl(219, 20%, 70%);
  --color-gray-500: hsl(219, 10%, 60%);
  --color-gray-550: hsl(219, 10%, 50%);
  --color-gray-600: hsl(221, 8%, 40%);
  --color-gray-650: hsl(221, 8%, 30%);
  --color-gray-700: hsl(218, 8%, 20%);
  --color-gray-750: hsl(218, 8%, 16%);
  --color-gray-800: hsl(220, 5%, 12%);
  --color-gray-850: hsl(220, 5%, 9%);
  --color-gray-900: hsl(210, 6%, 7%);

  --color-gray-100-a: 225, 40%, 98%;
  --color-gray-150-a: 225, 40%, 97%;
  --color-gray-200-a: 225, 40%, 96%;
  --color-gray-250-a: 225, 40%, 93%;
  --color-gray-300-a: 220, 29%, 90%;
  --color-gray-350-a: 220, 29%, 85%;
  --color-gray-400-a: 219, 20%, 80%;
  --color-gray-450-a: 219, 20%, 70%;
  --color-gray-500-a: 219, 10%, 60%;
  --color-gray-550-a: 219, 10%, 50%;
  --color-gray-600-a: 221, 8%, 40%;
  --color-gray-650-a: 221, 8%, 30%;
  --color-gray-700-a: 218, 8%, 20%;
  --color-gray-750-a: 218, 8%, 16%;
  --color-gray-800-a: 220, 5%, 12%;
  --color-gray-850-a: 220, 5%, 9%;
  --color-gray-900-a: 210, 6%, 7%;

  --color-white: #fff;

  --color-purple: hsl(270, 80%, 20%);
  --color-purple-a: 270, 80%, 20%;
  --color-purple-dark: hsl(270, 80%, 15%);
  --color-purple-dark-a: 270, 80%, 15%;
  --color-purple-hover: hsl(270, 80%, 25%);
  --color-purple-hover-a: 270, 80%, 22%;

  --color-orange: orange;

  --color-green: hsl(120, 30%, 13%);
  --color-green-a: 120, 30%, 13%;
  --color-green-light: hsl(120, 100%, 50%);
  --color-green-light-a: 120, 100%, 50%;

  --color-link: hsl(210, 70%, 55%);
  --color-link-hover: hsl(210, 90%, 70%);
  --color-link-active: hsl(210, 90%, 35%);

  --color-link-dark: hsl(210, 90%, 40%);
  --color-link-dark-hover: hsl(210, 100%, 55%);
  --color-link-dark-active: hsl(210, 100%, 20%);

  --color-link-visited: hsl(270, 45%, 55%);
  --color-link-visited-hover: hsl(270, 45%, 70%);
  --color-link-visited-active: hsl(270, 45%, 35%);

  --color-link-dark-visited: hsl(270, 65%, 40%);
  --color-link-dark-visited-hover: hsl(270, 65%, 65%);
  --color-link-dark-visited-active: hsl(270, 65%, 20%);

  --glass-border: 0.25px solid rgba(255, 255, 255, 0.2);

  --font: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  --font-size: 24px;
  --font-mono: "departure-mono";
}

@font-face {
  font-family: "departure-mono";
  src: url("/src/font/DepartureMono-Regular.woff2") format("woff2"),
    url("/src/font/DepartureMono-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

::selection {
  background-color: var(--color-green);
  color: var(--color-green-light);
}

:focus-visible {
  outline: 3px solid orange;
  transition: outline 0.2s ease;
  border-radius: inherit;
}

html {
  font-size: var(--font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font);
  scrollbar-color: var(--color-purple-hover) transparent;
  scrollbar-width: 1px;
  caret-color: orange;
  height: 100%;
  font-size: var(--font-size);
  font-family: var(--font);
  background-color: #0f0f0f;
  color: rgb(200, 200, 200);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 12px;
  padding-top: 0px;
  box-sizing: border-box;
  line-height: 1.8;
  user-select: text;
}

div#md-wrapper {
  background: radial-gradient(
    circle at top,
    transparent,
    hsla(var(--color-green-light-a), 0.05)
  );
  padding-bottom: 50px;
  border: var(--glass-border);
  border-top: none;
  border-radius: 0 0 20px 20px;
  min-height: 100vh;
  overflow: hidden;
}

div#markdown-box {
  margin: 0 auto;
  padding: 50px;
  margin-inline: auto;
  max-width: max-content;
  user-select: text;
}

p {
  max-width: 60ch;
  hyphens: auto;
  margin: 20px 0;
  text-indent: 2em;
  line-height: 2.5rem;
  user-select: text;
  font-size: 1rem;
  font-family: sans-serif;
}

hr {
  color: hsla(var(--color-gray-100-a), 0.4);
  border: 0.5px solid;
  border-radius: 100%;
  max-width: 65ch;
  margin: 0 auto;
}

h1 {
  text-align: center;
  font-size: 3rem;
  margin: 0;
}