/* :root {
  --fg-rgb: 0,0,0;
  --selection: royalblue;
  --selection-rgb: 65,105,225;
} */
:root {
  --theme-light-bg-rgb: 250,250,250;
  --theme-light-bg: rgb(var(--theme-light-bg-rgb));
  --theme-light-fg: black;
  --theme-light-dialog-bg: rgb(245,245,245);
  --theme-light-dialog-bg-rgb: 245,245,245;
  --theme-light-key-bg-rgb: 233,233,237;
  --theme-light-key-bg-base: rgb(var(--theme-light-key-bg-rgb));
  --theme-light-key-none-bg-base: rgba(var(--theme-light-key-bg-rgb), 0.35);
  --theme-light-key-color-rgb: 50,50,50;
  --theme-light-key-color-base: rgb(var(--theme-light-key-color-rgb));
  --theme-light-key-color-extreme: #313131;
  --theme-light-key-color-hover: white;
  --theme-light-code-bg: rgba(0, 0, 0, 0.1);

  --theme-dark-fg: rgb(230,230,230);
  --theme-dark-fg-rgb: 230,230,230;
  --theme-dark-bg: hsl(211, 20%, 12%);
  --theme-dark-bg-rgb: 17,34,51;
  --theme-dark-dialog-bg: hsl(210, 10%, 12%);
  --theme-dark-dialog-bg-rgb: 28, 31, 34;
  --theme-dark-key-bg-base: hsl(208.2, 23%, 18%);
  --theme-dark-key-bg-rgb: 49, 65, 78;
  --theme-dark-key-none-bg-base: hsl(208.2, 23%, 18%, 0.35);
  --theme-dark-key-color-base: hsl(0, 0%, 75%);
  --theme-dark-key-color-rgb: 230,230,230;
  --theme-dark-key-color-extreme: #e7e7e7;
  --theme-dark-code-bg: rgba(255, 255, 255, 0.1);

  --dark-red: #910e0e;
  --dark-blue: #6d99c6;
  --error-highlight: rgb(179, 60, 60);
  --selection: rgb(60, 179, 113);
  --hover-selection: rgba(60, 179, 113, 0.85);
  --delete: rgb(179, 60, 72);
  --delete-faint: rgba(179, 60, 72, 0.6);
  --link: royalblue;
  --link-hover: #6d99c6;
}

[data-theme="light"], body:not([data-theme="dark"]) {
  --bg-rgb: var(--theme-light-bg-rgb);
  --bg: var(--theme-light-bg);
  --fg: var(--theme-light-fg);
  --dialog-bg: var(--theme-light-dialog-bg);
  --dialog-bg-rgb: var(--theme-light-dialog-bg-rgb);
  --key-bg-rgb: var(--theme-light-key-bg-rgb);
  --key-bg-base: var(--theme-light-key-bg-base);
  --key-none-bg-base: var(--theme-light-key-none-bg-base);
  --key-color-rgb: var(--theme-light-key-color-rgb);
  --key-color-base: var(--theme-light-key-color-base);
  --key-color-extreme: var(--theme-light-key-color-extreme);
  --key-color-hover: var(--theme-light-key-color-hover);
  --code-bg: var(--theme-light-code-bg);
}
html {
  font-family: sans-serif;
}
html, body {
	width: 100vw;
	height: 100vh;
	overflow: auto;
	padding: 0;
	margin: 0;
  background-color: var(--bg);
  color: var(--fg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Quicksand, avenir, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --fg: var(--theme-dark-fg);
  --fg-rgb: var(--theme-dark-fg-rgb);
  --bg: var(--theme-dark-bg);
  --bg-rgb: var(--theme-dark-bg-rgb);
  --dialog-bg: var(--theme-dark-dialog-bg);
  --dialog-bg-rgb: var(--theme-dark-dialog-bg-rgb);
  --key-bg-base: var(--theme-dark-key-bg-base);
  --key-bg-rgb: var(--theme-dark-key-bg-rgb);
  --key-none-bg-base: var(--theme-dark-key-none-bg-base);
  --key-color-base: var(--theme-dark-key-color-base);
  --key-color-rgb: var(--theme-dark-key-color-rgb);
  --key-color-extreme: var(--theme-dark-key-color-extreme);
  --code-bg: var(--theme-dark-code-bg);
}
@media (prefers-color-scheme: dark) {
  body[data-theme="system"] {
    color-scheme: dark;
    --fg: var(--theme-dark-fg);
    --fg-rgb: var(--theme-dark-fg-rgb);
    --bg: var(--theme-dark-bg);
    --bg-rgb: var(--theme-dark-bg-rgb);
    --dialog-bg: var(--theme-dark-dialog-bg);
    --key-bg-base: var(--theme-dark-key-bg-base);
    --key-bg-rgb: var(--theme-dark-key-bg-rgb);
    --key-none-bg-base: var(--theme-dark-key-none-bg-base);
    --key-color-base: var(--theme-dark-key-color-base);
    --key-color-rgb: var(--theme-dark-key-color-rgb);
    --key-color-extreme: var(--theme-dark-key-color-extreme);
    --code-bg: var(--theme-dark-code-bg);
  }
}

h3 {
  margin: 10px 0;
}

a { color: var(--link) }
a:hover { color: var(--link-hover) }

code {
  background-color: var(--code-bg);
  border-radius: 2px;
  padding: .15em .3em .05em;
}

p {
  line-height: 1.3rem;
}

#settings-bar {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
}

#settings-bar button {
  background: none;
  color: var(--fg);
  border: none;
}
#settings-bar button:hover {
  cursor: pointer;
  color: royalblue;
}

.fa-delete-right::before {
  content: '\f55a';
  transform-origin: center;
  transform: rotateZ(180deg);
  display: inline-block;
}