::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 100vh;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd{
    margin: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);

    min-height: 100vh;
}

main {
    font-family: "Libre Baskerville", serif;
    line-height: 1.5;
}

/* heading configuration */

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

    color: var(--heading-color);
    background-color: transparent;
    background-image: linear-gradient(to right, var(--text-color) 0%, transparent 100%);

    width: fit-content;

    margin-top: 16px;
    margin-bottom: 16px;

    padding-left: 8px;
    padding-right: 5em;
}

h1 {
    font-size: var(--h1-font-size);

    width: 100%;

    margin-top: 0;
    margin-bottom: 0;

    padding-left: calc(var(--main-padding) + 8px);
}

h2 {
    font-size: var(--h2-font-size);
}

h3 {
    font-size: var(--h3-font-size);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

/* headings with links */

h1:has(a),
h2:has(a),
h3:has(a),
h4:has(a),
h5:has(a),
h6:has(a) {
    background-color: transparent;
    background-image: linear-gradient(to right, var(--link-color), transparent);
}

h1:has(a:hover),
h2:has(a:hover),
h3:has(a:hover),
h4:has(a:hover),
h5:has(a:hover),
h6:has(a:hover) {
    background-color: transparent;
    background-image: linear-gradient(to right, var(--selection-bg), transparent);
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    background-color: transparent;
}

:is(h1, h2, h3, h4, h5, h6) a {
    color: var(--bg-color);
}

p {
    font-size: var(--text-font-size);

    margin: var(--text-font-size) 0;
}

p:first-child {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

pre {
    font-size: 1rem;
    line-height: normal;
    font-variant-ligatures: none;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--selection-fg);
    background-color: var(--selection-bg);
}

ul {
    list-style-type: square;
}

li {
    font-size: var(--text-font-size);
}

.nav-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;

  display: flex;
  justify-content: space-between;

  font-family: var(--nav-bar-font-family);
  line-height: 1.5;

  color: var(--nav-bar-text-color);
  background-color: var(--nav-bar-bg-color);

  border-bottom: white solid 1px;

  width: 100%;
}

.nav-bar ul {
    list-style-type: none;
    margin: 0;
}

.nav-bar li {
    font-size: var(--nav-bar-font-size);
}

.nav-bar a {
    color: var(--nav-bar-link-color);
    text-decoration: none;
}

.nav-bar a:hover {
    color: var(--nav-bar-selection-fg);
    background-color: var(--nav-bar-selection-bg);
}

.nav-bar-path {
    padding: var(--nav-bar-padding);
}

.nav-bar-path li {
    display: inline;
}

.nav-bar-links {
    display: flex;
    gap: var(--text-font-size);

    padding: var(--nav-bar-padding);
}

.nav-bar-link {
    white-space: nowrap;
}

/* add brackets around links so it's in this format -> [Link] */
.nav-bar-link::before {
    display: inline;
    content: "[";
}
.nav-bar-link::after {
    display: inline;
    content: "]";
}

.tree-branch {
    color: var(--subtext-color);
}

.dropdown {
  position: relative;
}

.dropdown button {
    font-size: var(--nav-bar-font-size);
    color: var(--link-color);
    background-color: transparent;

    border: none;
}

.dropdown button:hover {
    color: var(--selection-fg);
    background-color: var(--selection-bg);
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;

    background-color: var(--nav-bar-bg-color);

    top: 36px; /* I have no idea why this has to be 36px, but it's the value that makes the content align*/
    left: calc((var(--nav-bar-font-size) / 2) * -1); /* move left by half of the gap between elements to align with the main element */

    /* box shadow to visually simulate extension of the menu */
    box-shadow:
    -1px 0px 0 white, /* "border" */
    1px 0px 0 white,
    0px 1px 0 white,
    8px 8px 0 black, /* shadows */
    8px 1px 0 black;

    padding: calc(var(--nav-bar-font-size) / 2);
    padding-right: calc((var(--nav-bar-font-size) / 2) + var(--nav-bar-font-size) / 4); /* add extra padding to accommodate for extra space used by tree structure characters */
    padding-top: 0;
}

/* create a bridge so the dropdown doesn't disappear when moving cursor down to the content */
.dropdown-content::before {
    content: "╷";

    position: absolute;
    top: calc(var(--nav-bar-font-size) * -1); /* move up by the value of margin-top */

    color: var(--subtext-color);
    background: transparent; 

    width: 100%;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.subtext {
    color: var(--subtext-color);
}

.subtext p {
    color: var(--subtext-color);
}

.main-container {
    width: 960px;
    padding: var(--main-padding);
}

.centered {
    margin: auto;
}

.full-width {
    width: 100%;
}

.inline {
    display: inline;
}

.ascii-art {
    font-variant-ligatures: none;
    white-space: preserve;
}

.note {
    background-color: var(--note-bg-color);

    border: 1px dotted var(--note-border-color);

    box-shadow:
    8px 8px 0 var(--note-shadow-color); /* shadows */

    padding: var(--note-padding);

    margin: var(--text-font-size) 0;
}

.note p {
    color: var(--note-text-color);
}

.note.important {
    --note-text-color: black;
    --note-bg-color: olive;
    --note-border-color: yellow;
}

.note.urgent {
    --note-text-color: white;
    --note-bg-color: maroon;
    --note-border-color: red;
}

.note.educational {
    --note-text-color: black;
    --note-bg-color: lavender;
    --note-border-color: black;
}

/* style for visualising console environment */
.console {
    font-family: "JetBrains Mono", monospace; /* force monospaced font */
    font-size: 1rem;

    background-color: black;
    color: white;

    padding: 16px;
}

.console * {
    margin: 0; /* remove default margins to visualise console environment properly */
}