@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Fira+Code:wght@400;700&display=swap");

:root {
  color-scheme: dark;
  --txt: #e5e0ff;
  --bg: #20202b;
  --bg2: #231c37;
  --blu: #77a8ff;
  --purp: #a335ee;
  --dppurp: #5a00ff;
  --gold: #e6cc80;
  --panel: rgba(35, 28, 55, 0.84);
  --field: rgba(44, 44, 68, 0.88);
  --site-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono-font: "Fira Code Retina", "Fira Code", "Cascadia Mono", Consolas, monospace;
  --text: var(--txt);
  --muted: #bfb6df;
  --bg-alt: var(--bg2);
  --panel-2: var(--field);
  --border: rgba(119, 168, 255, 0.24);
  --accent: var(--blu);
  --accent-2: var(--purp);
  --accent-3: var(--gold);
  --selection-bg: #002a50;
  --selection-fg: var(--gold);
  --shadow: rgba(0, 0, 0, 0.34);
}

html {
  min-height: 100%;
  color-scheme: dark;
  background:
    radial-gradient(circle at top right, rgba(163, 53, 238, 0.18), transparent 28%),
    radial-gradient(circle at top left, rgba(119, 168, 255, 0.13), transparent 24%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  background-color: var(--bg);
  background-repeat: no-repeat;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--txt);
  background: transparent;
  font-family: var(--site-font);
}

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

a {
  color: var(--blu);
}

a:hover {
  color: var(--gold);
}

button,
input,
select,
textarea {
  font: inherit;
}

code,
kbd,
pre,
.mono {
  font-family: var(--mono-font);
}