:root {
  --app-max-width: 1400px;

  --body-padding-left-xs: 20pt;
  --body-padding-right-xs: 20pt;

  --body-padding-left-m: 24pt;
  --body-padding-right-m: 24pt;

  --theme-background-color: rgb(18, 24, 32);
  /* --theme-background-color: rgb(34, 34, 34); */
  --theme-background-color-blurred: rgba(18, 24, 32, 0.7);
  /* --theme-background-color-blurred: rgba(34, 34, 34, 0.7); */
  --theme-background-blur-radius: 20pt;

  --text-color-active: #f1f1f1;
  --text-color: #e1e1e1;
  --text-secondary-color: #a4a4a4;

  --nav-height: 54pt;
  --footer-height: 40pt;

  --main-navigation-width-xs: 240pt;
  --main-navigation-width-l: 220pt;

  --scrollbar-size: 3pt;
  --scrollbar-color: rgb(81, 81, 81);
  --scrollbar-background-color: rgb(28, 28, 28);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  background-color: var(--theme-background-color);
  color: var(--text-color);
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
}

body #root {
  position: relative;
  height: 100%;
  overflow-y: hidden;
  overflow-x: auto; /* for min with 340px */
}

a.active {
  position: relative;
  color: white;
  font-weight: 500;
}

a.active::after {
  content: "";
  position: absolute;
  border-bottom: 2pt solid #479ea9;
  bottom: -2pt;
  left: -1pt;
  right: -1pt;
}

main aside a {
  color: #479ea9;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}

main aside a svg {
  display: block;
  align-self: center;
}

main aside code {
  padding-inline: 4pt;
  background-color: #2d2b57;
  border-radius: 2pt;
  color: var(--text-color);
  font-family: monospace;
}

main aside h1 small {
  font-size: 0.6em;
  font-weight: normal;
}

.quicklinks a.active::after {
  border-bottom: 2pt solid #b69803;
}

.hspacer {
  margin-top: 20pt;
  margin-bottom: 16pt;
  width: 100%;
}

@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-background-color);
  }
}

@media (-webkit-min-device-pixel-ratio: 0) {
  *::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }
  *::-webkit-scrollbar-thumb {
    border-radius: var(--scrollbar-size);
    background: var(--scrollbar-color);
  }

  *::-webkit-scrollbar-track {
    background: var(--scrollbar-background-color);
  }
}

nav .message {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  font-size: 0.85em;
  color: rgb(209, 130, 73);
}