/* Set Encoding to UTF-8, Import /css/reset.css */
@charset 'UTF-8';
@import url(/css/reset.css);

/* Fonts */
@font-face {
  font-family: DepartureMonoNerdFontPropo;
  src:
    url(/font/DepartureMonoNerdFontPropo-Regular.woff2),
    url(/font/DepartureMonoNerdFontPropo-Regular.woff),
    url(/font/DepartureMonoNerdFontPropo-Regular.otf);
  font-weight: 400;
}

/* Global Variables */
:root {
  /* Theme */
  --theme-crust: #181926;
  --theme-mantle: #1e2030;
  --theme-base: #24273a;
  --theme-surface-0: #363a4f;
  --theme-surface-1: #494d64;
  --theme-surface-2: #5b6078;
  --theme-overlay-0: #6e738d;
  --theme-overlay-1: #8087a2;
  --theme-overlay-2: #939ab7;
  --theme-subtext-0: #a5adcb;
  --theme-subtext-1: #b8c0e0;
  --theme-text: #cad3f5;
  --theme-lavender: #b7bdf8;
  --theme-blue: #8aadf4;
  --theme-sapphire: #7dc4e4;
  --theme-sky: #91d7e3;
  --theme-teal: #8bd5ca;
  --theme-green: #a6da95;
  --theme-yellow: #eed49f;
  --theme-peach: #f5a97f;
  --theme-maroon: #ee99a0;
  --theme-red: #ed8796;
  --theme-mauve: #c6a0f6;
  --theme-pink: #f5bde6;
  --theme-flamingo: #f0c6c6;
  --theme-rosewater: #f4dbd6;

  /* Browser Facing */
  --font-size: 16px;
  --line-height: calc(var(--font-size) * 1.4);
  --font-family: DepartureMonoNerdFontPropo;

  --color: var(--theme-text);
  --background-color: var(--theme-base);

  --border-color: var(--theme-overlay-1);
  --border-thickness: 2px;
  --border-radius: calc(var(--font-size) * 0.4);

  --padding: 5px;
  --spacing: 6px;

  --link-color: var(--theme-blue);
  --hovered-link-color: var(--theme-sapphire);
  --visited-link-color: var(--theme-teal);

  --h1-multiplier: 2.25;
  --h2-multiplier: 2;
  --h3-multiplier: 1.75;
  --h4-multiplier: 1.5;
  --h5-multiplier: 1.25;
  --h6-multiplier: 1;
  --h1-text-color: var(--theme-text);
  --h2-h6-text-color: var(--theme-subtext-0);
}

html {
  color: var(--color);
  background-color: var(--background-color);

  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

body {
  flex-direction: column;
  justify-content: center;
}

main {
  display: block;
  width: 90%;
  height: fit-content;
  margin: 0 auto;
}

hr {
  display: block;
  height: var(--border-thickness);
  width: 95%;
  border: 0;
  border-top: var(--border-thickness) solid var(--color);
  margin: 0.5rem auto;
  padding: 0;
}

footer {
  display: block;
  margin: 0 auto;
  width: fit-content;
  height: fit-content;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
}

/* Put a Point At The Start Of Headers */
:is(h1, h2, h3, h4, h5, h6)::before {
  display: inline;
  content: "°";
  position: relative;
  top: calc(var(--font-size) / 2);
}

/* Set Font Sizes For Headers */
h1 {
  font-size: calc(var(--font-size) * var(--h1-multiplier));
}

h2 {
  font-size: calc(var(--font-size) * var(--h2-multiplier));
}

h3 {
  font-size: calc(var(--font-size) * var(--h3-multiplier));
}

h4 {
  font-size: calc(var(--font-size) * var(--h4-multiplier));
}

h5 {
  font-size: calc(var(--font-size) * var(--h5-multiplier));
}

h6 {
  font-size: calc(var(--font-size) * var(--h6-multiplier));
}

/* Set Text Color For Headers */
h1 {
  color: var(--h1-text-color);
}

h2,
h3,
h4,
h5,
h6 {
  color: var(--h2-h6-text-color);
}

/* Set Defaults For The Paragraph Element */
p {
  display: block;
  width: fit-content;
  height: fit-content;
  margin: 0 0 0.5em 1em;
}

img,
a,
span {
  display: inline;
}

/* Link Colors */
a {
  color: var(--link-color);
}

a:hover {
  color: var(--hovered-link-color);
  cursor: pointer;
}

a:visited {
  color: var(--visited-link-color);
}

a:hover:visited {
  color: var(--hovered-link-color);
  cursor: pointer;
}