@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
:root {
  --accent: #4f46e5;
  --link: #d62bd6;
  --primary: #3d3c62;
  --base: #ffffff;
  --contrast: #000000;
  --code-bg: hsl(276, 10%, 92%);
  --bg: hsl(0, 0%, 98%);
  --bg-50: color-mix(in srgb, var(--bg-100), 50% var(--base));
  --bg-100: hsl(276, 10%, 90%);
  --gray-100: hsl(222, 13%, 85%);
  --gray-200: hsl(231, 14%, 90%);
  --gray-500: hsl(231, 14%, 60%);
  --text-light: hsl(231, 14%, 40%);
  --text: hsl(231, 14%, 20%);
  --border: hsl(231, 14%, 85%);
  --border-mid: color-mix(in oklab, #808080 40%, var(--bg-100));
  --font: "Source Serif 4", serif;
  --font-sans-serif: "Nunito", sans-serif;
  --font-mono: "Fira Code", monospace;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --box-shadow-ring: 0 0 0 2px color-mix(in srgb, var(--text) 20%, transparent);
  --scrollbar-color: #9f9f9f transparent;
}
html {
  margin: 0;
  padding: 0;
  color-scheme: light dark;
}
html[data-theme=dark] {
  --link: #d62bd6;
  --accent: #908af6;
  --base: #000000;
  --contrast: #ffffff;
  --bg: hsl(231, 12%, 8%);
  --bg-100: hsl(231, 12%, 11%);
  --primary: #a5a4c2;
  --code-bg: hsl(240, 2%, 10%);
  --gray-100: hsl(231, 14%, 20%);
  --gray-200: hsl(231, 14%, 25%);
  --gray-500: hsl(231, 14%, 50%);
  --text-light: hsl(231, 14%, 60%);
  --text: hsl(231, 14%, 80%);
  --border: hsl(231, 14%, 25%);
  --scrollbar-color: #9f9f9f transparent;
}
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color);
}
* ::selection {
  background-color: color-mix(in srgb, var(--accent), 50% transparent);
  color: white;
}
body {
  margin: 0;
  padding: 0;
  color-scheme: light;
  font-family: var(--font);
  font-weight: 400;
  font-style: normal;
  color: var(--text);
  background-color: var(--bg-100);
  font-optical-sizing: auto;
}
a {
  color: var(--link);
  font-style: italic;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-sans-serif);
}
button.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  color: inherit;
  width: fit-content;
  height: fit-content;
  padding: var(--padding, 0.25rem);
  border-radius: 0.375rem;
  font-weight: inherit;
  transition: background-color 0.25s;
  background: transparent;
}
button.icon:hover {
  background-color: var(--gray-100);
  box-shadow: none;
}
button.icon:focus {
  box-shadow: none;
}
main h1 {
  color: var(--primary);
}
main section {
  width: 100%;
  margin-block: 1rem;
}
main section h3 {
  scroll-margin-top: 2rem;
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 500;
  position: relative;
  width: fit-content;
}
main section h3:before {
  transition: all 0.3s;
  content: "#";
  position: absolute;
  left: -1rem;
  opacity: 0;
  color: color-mix(in srgb, var(--text), 50% transparent);
}
@media screen and (max-width: 768px) {
  main section h3:before {
    content: unset;
  }
}
main section:hover h3:before {
  opacity: 1;
}