/* src/assets/styles/_reset.css */
html {
  overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
  html {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul[role=list],
ol[role=list] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  text-rendering: optimizespeed;
  line-height: 1.5;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
img,
picture {
  max-width: 100%;
  display: block;
}
input,
button,
textarea,
select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* src/assets/styles/_branding.css */
:root {
  --color-text: #222;
  --color-background: white;
  --color-light: silver;
  --color-primary: #7950f2;
  --unit: 1rem;
  --container-width: 60ch;
  --font-family-serif:
    Merriweather,
    Times,
    serif;
  --font-family-sans-serif: Arial, -apple-system;
  @media (prefers-color-scheme: dark) {
    --color-text: #fff;
    --color-background: #222;
  }
}

/* src/assets/styles/_layout.css */
.header-container {
  display: grid;
  grid-template-areas: "logo nav";
  grid-template-columns: auto 1fr;
  .logo {
    display: inline-block;
    width: 50px;
    height: 50px;
  }
  nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
  }
}
.content {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(60ch, 100% - var(--gap) * 2);
  --breakout: minmax(0, 2rem);
  --feature: minmax(0, 5rem);
  display: grid;
  grid-template-columns: [full-start] var(--full) [feature-start] var(--feature) [breakout-start] var(--breakout) [content-start] var(--content) [content-end] var(--breakout) [breakout-end] var(--feature) [feature-end] var(--full) [full-end];
}
.content > * {
  grid-column: content;
}
.breakout {
  grid-column: breakout;
}
.feature {
  grid-column: feature;
}
.full {
  grid-column: full;
}
main {
  margin-block-end: 3rem;
}
footer {
  small {
    display: block;
    text-align: center;
  }
}

/* src/assets/styles/_content.css */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-sans);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em 0;
}
h1 {
  font-family: var(--font-family-serif);
  font-size: 4em;
  margin: 0 0 1em 0;
}
h2 {
  margin: 1.6em 0 0 0;
  font-size: 1.8em;
}
h3 {
  font-size: 1.5em;
}
h4 {
  font-size: 1.4em;
}
h5 {
  font-size: 1.3em;
}
h6 {
  font-size: 1.2em;
}
p,
ul,
ol {
  font-size: 1.3rem;
  line-height: 1.75em;
  margin: 1.2em 0;
}
ol,
ul {
  padding-left: 2rem;
  -webkit-padding-start: 5%;
  -webkit-padding-end: 5%;
}
li {
  margin: 1rem 0;
}
li p {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
a {
  color: inherit;
  transition: color linear 0.15s;
}
a:hover {
  color: var(--primary-color);
}
p a {
  text-decoration: none;
  box-shadow: inset 0 -0.12em 0 var(--primary-color);
  -webkit-transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
}
p a:hover {
  box-shadow: inset 0 -1.5em 0 var(--primary-color);
  color: #fff;
}
img {
  max-width: 100%;
  height: auto;
}
hr {
  padding: 0;
  border: 0;
  height: 10px;
  margin: 40px auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='10'  viewBox='0 0 20 10' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-miterlimit='10'%3e%3cpath fill='none' d='M0 0h20v10H0z'/%3e%3cclipPath id='a'%3e%3cpath d='M0 0h20v10H0z'/%3e%3c/clipPath%3e%3cg clip-path='url(%23a)'%3e%3cpath d='M20 7.384c-4.999-.001-5-4.768-9.999-4.768C5 2.616 5 7.384 0 7.384' fill='none' stroke-width='3' stroke='%23548E9B'/%3e%3c/g%3e%3c/svg%3e");
}
code {
  font-family:
    "SF Mono",
    menlo,
    inconsolata,
    monospace;
  font-size: calc(1em - 2px);
  color: #555;
  padding: 0.2em 0.4em;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
pre {
  overflow: auto;
  border-radius: 8px !important;
  margin: 1.2em 0 !important;
  padding: 1.2em;
}
pre code {
  padding: 0;
}
blockquote {
  border-left: 4px solid #cccccc;
  font-size: 1.4em;
  font-style: italic;
  margin: 2rem 0;
  padding-left: 2rem;
  padding-right: 2rem;
}
blockquote p {
  padding-bottom: 6px;
}
blockquote footer {
  font-size: 1.1rem;
  text-align: right;
}
figure {
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  margin: 0 0 3em 0;
}
table {
  border-collapse: collapse;
  font-family: var(--font-family-sans);
  font-size: 1.125em;
  margin: 2em 0;
}
th {
  border-bottom: 2px solid #cccccc;
  padding: 0.4em 0.8em;
  word-break: break-word;
}
td {
  padding: 0.4em 0.8em;
  word-break: break-word;
}
.container {
  margin: 0 auto;
  max-width: 42em;
  width: 100%;
}
.content h1 {
  font-size: 3em;
  margin: 1em 0;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0.33em 0.67em;
  padding-top: 8px;
  margin-left: 10px;
  gap: 0.6em;
  border-radius: 99em;
  background-color: var(--theme-code-inline-bg);
}
.theme-toggle > label:focus-within {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
}
.theme-toggle > label {
  color: var(--theme-code-inline-text);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  cursor: pointer;
}
.theme-toggle .checked {
  color: var(--theme-accent);
  opacity: 1;
}
input[name=theme-toggle] {
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
@media (max-width: 1020px) {
  h1 {
    font-size: 3em;
  }
  .content h1 {
    font-size: 2.4em;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  p,
  ul,
  ol {
    font-size: 1.2rem;
    margin: 1em 0;
  }
}

/* src/assets/styles/styles.css */
body {
  color: var(--color-text);
  background-color: var(--color-background);
  font-family: var(--font-family-serif);
}
a {
  color: var(--color-primary);
}
#main {
}
#navigation {
  display: flex;
}
#footer {
}
hr {
  border-color: var(--color-light);
}
img {
  height: auto;
}
.navigation-item,
.navigation-label,
button {
}
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
label,
input,
textarea {
  width: 100%;
  display: block;
}
button {
  margin: 0;
}
label {
  padding: calc(var(--unit) / 2) 0;
}