:root {
  --bg-0: #0c0c0c;
  --bg-1: #181818;
  --bg-2: #252525;
  --bg-3: #333333;
  --bg-4: #595959;

  --text-0: #ffffff;
  --text-1: #dddddd;
  --text-2: #bbbbbb;
  --text-3: #888888;

  --black-1: #666;
  --black-2: #222;
  --white-1: #ddd;
  --white-2: #bbb;
  --red-1: oklch(0.6187 0.2311 20.83);
  --red-2: oklch(0.3813 0.1311 20.83);
  --yellow-1: oklch(0.8116 0.1543 94.54);
  --yellow-2: oklch(0.5504 0.1043 94.54);
  --green-1: oklch(0.8027 0.2256 140.47);
  --green-2: oklch(0.4377 0.1256 140.47);
  --blue-1: oklch(0.6869 0.1663 245.16);
  --blue-2: oklch(0.4618 0.1163 245.16);
  --purple-1: oklch(0.647 0.2487 308.19);
  --purple-2: oklch(0.3724 0.1487 308.19);

  --time-1: 500ms;
  --time-2: 250ms;
}

/* -- Fonts -- */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Lexend.ttf) format('truetype');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/OpenDyslexic.woff2) format('woff2');
}

/* -- General styling -- */
body {
  color: var(--text-1);
  background-color: var(--bg-1);
  font-family: Lexend, Arial, sans-serif;
  margin: 0px;
  padding: 0px;
  caret-color: transparent;
}
h1, h2, p {
  margin: 2px;
}
h3, h4, h5, h6 {
  margin-bottom: 2px;
  margin-top: 1em;
}
hr, iframe {
  color: var(--text-2);
  border-color: currentColor;
  border-style: solid;
}
img {
  user-select: none;
}
svg {
  fill: currentColor;
  stroke: currentColor;
  transition: var(--time-1);
}
summary {
  cursor: pointer;
}
ul, ol {
  margin: 0px;
  padding-left: 25px;
}
li {
  margin: 2px;
}

/* -- Dialogs -- */
dialog {
  padding: 10px;
  color: var(--text-1);
  border-radius: 1rem;
  background-color: var(--bg-1);
  border: 2px currentColor solid;
}
::backdrop {
  backdrop-filter: blur(2px);
}

/* -- Scrollbar -- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: inherit, var(--bg-1);
}
::-webkit-scrollbar-corner {
  background: inherit, var(--bg-1);
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--text-3);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--bg-3);
}

/* -- Fsh ownership title -- */
.title {
  font-size: 250%;
  color: var(--text-0);
}
a:has(.title) {
  text-decoration: none;
  display: block;
  width: fit-content;
  margin-inline: auto;
}
.title h1 {
  margin: 0px;
  font-weight: normal;
  margin-top: -12px;
}

/* -- Links -- */
a {
  cursor: pointer;
  color: var(--blue-1);
  transition: color var(--time-2) ease;
}
a:hover {
  color: var(--blue-2);
}

/* -- Inputs -- */
button {
  cursor: pointer;
  font-size: 80%;
  font-family: inherit;
  color: var(--text-1);
  padding: 5px;
  outline: none;
  border: 2px var(--text-1) solid;
  border-radius: 0.5rem;
  transition: var(--time-1);
  background-color: transparent;
}
button[disabled] {
  cursor: not-allowed;
  color: var(--text-3);
  border: 2px currentColor solid;
}
button:not([disabled]):hover {
  color: var(--bg-1);
  background-color: var(--text-1);
}
input:not([type=range]), textarea, select {
  margin: 5px;
  padding: 5px;
  outline: none;
  font-family: inherit;
  caret-color: auto;
  color: var(--text-1);
  border-radius: 0.75rem;
  border: 2px var(--text-1) solid;
  background-color: transparent;
}
input[type=color] {
  padding: 0px;
}
input[type=file]::file-selector-button {
  outline: none;
  caret-color: auto;
  color: var(--text-1);
  border-radius: 0.25rem;
  border: 2px var(--text-1) solid;
  background-color: transparent;
}
input::placeholder, textarea::placeholder {
  color: var(--text-3);
}
select {
  cursor: pointer;
  padding: 2px;
  border-radius: 0.5rem;
}
option {
  background-color: var(--bg-1);
}
option:disabled {
  background-color: var(--bg-0);
}
button:focus-within, input:focus-within, textarea:focus-within, select:focus-within {
  outline: 1px solid var(--text-0);
}

/* Accessibility */
@media (prefers-reduced-motion) {
  * {
    transition: none !important;
  }
}