:root {
  /* Fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  /* Borders */
  --standard-border-radius: 5px;
  --border-width: 1px;

  /* Light theme */
  --bg: oklch(1 0 0); /*--background*/
  --accent-bg: oklch(0.985 0 0); /*--sidebar*/
  --text: oklch(0.145 0 0); /*--foreground*/
  --text-light: oklch(0.556 0 0); /*--muted-foreground*/
  --border: oklch(0.922 0 0); /*--border*/
  --accent: oklch(0.205 0 0); /*--primary*/
  --accent-hover: oklch(0.577 0.245 27.325); /*--destructive*/
  --accent-text: var(--bg);
  --marked: oklch(0.577 0.245 27.325); /*--destructive*/
  --disabled: oklch(0.97 0 0); /*--muted*/
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
      --bg: oklch(0.145 0 0); /*--background*/
      --accent-bg: oklch(0.205 0 0); /*--sidebar*/
      --text: oklch(0.985 0 0); /*--foreground*/
      --text-light: oklch(0.708 0 0); /*--muted-foreground*/
      --border: oklch(1 0 0 / 10%); /*--border*/
      --accent: oklch(0.922 0 0); /*--primary*/
      --accent-hover: oklch(0.704 0.191 22.216); /*--destructive*/
      --accent-text: var(--bg);
      --marked: oklch(0.704 0.191 22.216); /*--destructive*/
      --disabled: oklch(0.269 0 0); /*--muted*/
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans-font);
  background: var(--bg);
  color: var(--text);
  display: grid;
  grid-template-columns: 1fr min(45rem, 90%) 1fr;
}
body > * { grid-column: 2; }

article {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    margin: 2rem 0;
    background: var(--accent-bg);
    border-radius: var(--standard-border-radius);
    border: var(--border-width) solid var(--border);
}

header {
  grid-column: 2 / 3;
  text-align: center;
  padding: 2rem 1rem;
}

header img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-width) solid var(--border);
}

header h1 {
  font-size: 2.4rem;
  color: var(--accent);
}

header p {
  font-size: 1.1rem;
  color: var(--text-light);
}

section {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 0 1rem;
}

a,
a:visited {
  color: var(--accent);
}

a:hover {
  text-decoration: none;
}

.button:visited {
  color: var(--accent-text);
}

.button {
  display: block;
  text-align: center;
  background: var(--accent);
  color: var(--accent-text);
  padding: .9rem 0;
  border-radius: var(--standard-border-radius);
  border: var(--border-width) solid var(--accent);
  font-size: 1.1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, transform .1s ease;
}

.button.primary {
  background-color: var(--marked);
  border-color: var(--marked);
}

.button.secondary {
  background-color: var(--disabled);
  border-color: var(--disabled);
  color: var(--text-light);
}

.button:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
}

mark {
  padding: 2px 5px;
  border-radius: var(--standard-border-radius);
  background-color: var(--marked);
  color: black;
}

hr {
  border: none;
  height: var(--border-width);
  background: var(--border);
  margin: 1rem auto;
}

footer {
  grid-column: 2 / 3;
  text-align: center;
  font-size: .85rem;
  color: var(--text-light);
  margin-top: 3rem;
  padding: 0 1rem;
  border-top: var(--border-width) solid var(--border);
}

/* Responsive */
@media only screen and (max-width: 720px) {
  header { padding-top: 1.5rem; }
  header h1 { font-size: 2rem; }
  header p { font-size: 1rem; }
  .button { font-size: 1rem; padding: .8rem 0; }
}

/* Lucide Icons */
.lucide-icon {
    width: 1rem;
    height: 1rem;
    position: relative;
    top: .125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lucide-icon-md {
    width: 2rem;
    height: 2rem;
    position: relative;
    top: .650rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lucide-icon-xl {
    width: 6rem;
    height: 6rem;
    display: block;
    margin: 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lucide-icon-xl:hover {
    stroke: var(--accent);
}