/*#region Variables */

:root {
  font-feature-settings:
    /* Ligatures  */
    "liga" on,
    "calt" on,
    /* 4 is cool, 2 is professional */ "cv01" 2,
    "cv02" off,
    "cv10" off,
    "cv11" on,
    "cv30" on,
    "cv31" off,
    "cv32" on,
    "cv60" off,
    "cv61" off,
    "cv62" on,
    "ss01" on,
    "ss02" on,
    "ss03" on,
    "ss04" on,
    "ss05" on,
    "ss06" on,
    "ss07" on,
    "ss08" on,
    "ss09" on,
    "ss10" on;
  --background: light-dark(oklch(90% 0.01 70), oklch(25% 0 270));
  --background-bar: oklch(
    from var(--background) calc(l - 0.1) calc(c + 0.02) h
  );
  --borders: light-dark(oklch(75% 0.01 270), oklch(30% 0.01 270));
  --foreground: light-dark(oklch(30% 0.01 270), oklch(85% 0.01 270));
  --keyword: light-dark(oklch(55% 0.25 320), oklch(70% 0.1 330));
  --class: light-dark(oklch(55% 0.09 220), oklch(75% 0.12 180));
  --function: light-dark(oklch(50% 0.08 85), oklch(90% 0.07 105));
  --variable: light-dark(oklch(45% 0.31 265), oklch(70% 0.11 245));
  --string: light-dark(oklch(45% 0.17 30), oklch(80% 0.09 85));
  --number: light-dark(oklch(55% 0.12 160), oklch(80% 0.06 135));
  --comment: light-dark(oklch(50% 0.18 140), oklch(60% 0.11 135));
  --notification: light-dark(oklch(50% 0.16 255), oklch(60% 0.17 250));
}
/*#endregion Variables */

/*#region Font  */

/*#region Font Faces  */
@font-face {
  font-family: mona-semi;
  src: url(fonts/Monaspace\ Argon\ Var.woff2) format(woff2);
}
@font-face {
  font-family: mona-robo;
  src: url(fonts/Monaspace\ Krypton\ Var.woff2) format(woff2);
}
@font-face {
  font-family: mona-sans;
  src: url(fonts/Monaspace\ Neon\ Var.woff2) format(woff2);
}
@font-face {
  font-family: mona-hand;
  src: url(fonts/Monaspace\ Radon\ Var.woff2) format(woff2);
}
@font-face {
  font-family: mona-serif;
  src: url(fonts/Monaspace\ Xenon\ Var.woff2) format(woff2);
}
/*#endregion Font Faces  */

/*#region Font Families */
.semi-serif {
  font-family: mona-semi, "Courier New", Courier, monospace;
}
.robot {
  font-family: mona-robo, "Courier New", Courier, monospace;
}
.sans-serif {
  font-family: mona-sans, "Courier New", Courier, monospace;
}
.handwritten {
  font-family: mona-hand, "Courier New", Courier, monospace;
}
.serif {
  font-family: mona-serif, "Courier New", Courier, monospace;
}
/*#endregion Font Families  */

/*#endregion Font  */

/*#region Class Styles */
.keyword {
  color: var(--keyword);
}
.class {
  color: var(--class);
}
.function {
  color: var(--function);
}
.variable {
  color: var(--variable);
}
.string {
  color: var(--string);
}
.number {
  color: var(--number);
}
.comment {
  color: var(--comment);
}
/*#endregion Class Styles  */

/*#region Defaults */

html {
  height: 100vh;
}
body {
  /* Spacing */
  margin: 0;
  padding: 0;
  height: 100vh;
  /* Grid */
  display: grid;
  grid-template-areas: "aside nav" "aside main" "foot foot";
  grid-template-columns: minmax(auto, 20vw) 1fr;
  grid-template-rows: auto 1fr auto;
  /* Scroll behaviour */
  overflow: hidden;
  /* Default styling */
  font-family: mona-sans, "Courier New", Courier, monospace;
  color-scheme: light dark;
  background-color: var(--background);
  color: var(--foreground);
}
/*#endregion Defaults  */

/*#region HTML Tags */
h1 {
  font-family: mona-serif, serif;
  color: var(--keyword);
}
h2 {
  font-family:
    mona-semi, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
  color: var(--class);
}
h3 {
  color: var(--function);
}
h4 {
  color: var(--variable);
}
a {
  color: var(--notification);
}
code {
  font-family: mona-robo;
  color: var(--string);
  background-color: var(--background-bar);
  border-radius: 0.25em;
  padding: 0.1em;
}
blockquote {
  font-family: mona-hand;
  color: var(--number);
}

/*#endregion Sections  */

nav {
  /* Grid Area */
  grid-area: nav;
  /* Position */
  position: sticky;
  top: 0;
  /* Scroll Behaviour */
  overflow: hidden;
  /* Colour */
  background-color: var(--background-bar);
  border: 1px solid var(--borders);
}

aside {
  /* Grid Area */
  grid-area: aside;
  /* Position */
  position: sticky;
  top: 0;
  /* Scroll Behaviour */
  overflow-x: hidden;
  overflow-y: auto;
  /* Colour */
  background-color: var(--background-bar);
  border: 1px solid var(--borders);
  ul {
    list-style-type: none;
    padding: 0;
  }
  li,
  details {
    /* Position */
    padding: 0.25em;
    border: 1px solid var(--borders);
  }
  a {
    /* Colour */
    color: var(--foreground);
    text-decoration: none;
  }
}

footer {
  /* Grid Area */
  grid-area: foot;
  /* Grid */
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  gap: 0.5em;
  /* Position */
  padding: 0.5em 1em 0em 1em;
  margin: 0;
  position: sticky;
  bottom: 0;
  /* overflow: hidden; */
  /* Colour */
  background-color: var(--background-bar);
  border: 1px solid var(--borders);
  /* Font */
  font-size: 0.75em;

  a {
    color: var(--foreground);
    height: 2em;
    overflow: hidden;
  }
  p {
    padding: 0;
    margin: 0;
  }
  svg {
    fill: var(--foreground);
  }
}

main {
  font-size: 1.5em;
  /* Grid Area */
  grid-area: main;
  height: calc(100vh - 2em);
  /* Scroll Behaviour */
  overflow-y: auto;
  /* Spacing */
  padding: 1em;
}

/*#endregion Sections */