@media (prefers-color-scheme: light) {
  :root {
    --bg-main: #eff2f5;
    --bg-card: #e4e8f2;
    --bg-hover: #d8dde7;

    --fg-main: #2e3440;
    --fg-hover: #9dc2f6;
  }
}

@media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {
  :root {
    --bg-main: #232836;
    --bg-card: #282e3f;
    --bg-hover: #2f364a;

    --fg-main: #8686a4;
    --fg-hover: #ccccfa;
  }
}

.themed {
  --bg-main: var(--color0);
  --bg-card: var(--background);
  --bg-hover: var(--color5);

  --fg-main: var(--foreground);
  --fg-hover: var(--color0);
}

body:not(.img) {
  background: var(--bg-main);
}

.img {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-family: 'Consolas', monospace;
}

* {
  box-sizing: border-box;
}

.container {
  padding: 1em 1em;
  height: 100vh;
  width: 100vw;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

#theme,
.ss-main {
  max-width: 100%;
  grid-column: 1 / span 2;
  grid-row: 1;
  /* grid-column: -3 / span 2; */
  /* grid-row: 1; */
}

#links {
  grid-column: 2 / 6;
  grid-row: 2 / 5;
}

section {
  display: inline-block;
  --bg-hovers: var(--bg-hover);
  background-color: var(--bg-hovers);
  padding: 0em 0.5em;
  border-radius: 0.2em;
}

a:visited,
a {
  color: var(--fg-main);
  text-decoration: none;
  outline: none;
}

.la,
.lab,
.lad,
.lal,
.lar,
.las {
  padding-right: 0.3em;
}

/* #region Slim Select */
/* TODO consider simplifying with .ss-bg/.ss-fg classes?  */
/* "inherits any classes that were added to the original select element. This includes options as well." */

.ss-single-selected {
  background-color: var(--bg-hover) !important;
  color: var(--fg-main) !important;
  border: none !important;
  /* width: fit-content !important; */
  /* font-size: small; */
}

.ss-single-selected:hover {
  background-color: var(--bg-card) !important;
  color: var(--fg-main) !important;
  border: none !important;
  /* width: fit-content !important; */
  /* font-size: small; */
}

.ss-open-below {
  background-color: var(--bg-card) !important;
}

.ss-content {
  border: none !important;
  /* width: fit-content !important; */
  /* font-size: small; */
}

.ss-optgroup-label {
  background-color: var(--bg-card) !important;
  color: var(--fg-main) !important;
}

.ss-option {
  background-color: var(--bg-card) !important;
  color: var(--fg-main) !important;
}

.ss-disabled {
  color: var(--fg-main) !important;
}

.ss-option:hover {
  background-color: var(--bg-hover) !important;
  color: var(--fg-hover) !important;
}

/* #endregion */