* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: var(--transition-color);
}

:root {
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --sky-300: #7dd3fc;
  --blue-600: #2563eb;
  --violet-800: #5b21b6;
  --pink-200: #fbcfe8;
  --green-500: #22c55e;
  --amber-500: #f59e0b;
  --red-500: #ef4444;
  --blue-500: #3b82f6;
  --amber-50: #fffbeb;
  --emerald-50: #ecfdf5;

  --color-primary: var(--sky-300);
  --color-accent: var(--blue-600);

  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-error: var(--red-500);
  --color-info: var(--blue-500);

  --color-bg: var(--gray-100);
  --color-bg-secondary: var(--emerald-50);
  --color-bg-hover: var(--gray-200);
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-inverse: var(--gray-100);

  --transition-color: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--violet-800);
    --color-accent: var(--pink-200);

    --color-bg: var(--gray-900);
    --color-bg-secondary: var(--gray-800);
    --color-bg-hover: var(--gray-700);
    --color-text: var(--gray-100);
    --color-text-secondary: var(--gray-400);
    --color-text-inverse: var(--gray-900);
  }
}

html {
  font-family: Cantarell, Roboto, "Segoe UI", system-ui, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color: var(--color-text);
  background-color: var(--color-bg);
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

aside {
  height: 100vh;
  padding: var(--space-lg);
  padding-right: 0;
}

header {
  background-color: var(--color-bg-secondary);
  width: 12em;
  height: 100%;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

header .avatar {
  width: 4rem;
  height: 4rem;
  margin: var(--space-md) auto;
}
header .avatar img {
  width: 100%;
  height: 100%;
}

header nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

main {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

section {
  background-color: var(--color-bg-secondary);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-md);
}

a {
  color: var(--color-text);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

a h2 {
  color: var(--color-text);
}
a h2:hover {
  color: inherit;
}

li {
  width: 10rem;
  list-style: none;
  padding: var(--space-sm) var(--space-md);
  transition:
    var(--transition-color),
    transform 0.3s ease;
}
li:hover {
  background-color: var(--color-bg-hover);
  transform: translate(var(--space-md), 0);
}

button {
  background-color: var(--color-primary);
  color: var(--color-text);
  border: none;
  padding: calc(var(--space-md) / 3) var(--space-md);
  font-size: large;
  cursor: pointer;
}
button:hover {
  box-shadow: 0 0 var(--space-sm) var(--color-accent);
}
button:active {
  box-shadow: inset 0 0 var(--space-sm) var(--color-accent);
}

.category {
  font-size: larger;
}

.category a:not(:first-child)::before {
  content: " > ";
  color: var(--color-text);
}

.article-list {
  background-color: var(--color-bg-secondary);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.article-list article,
.corner-border {
  background-color: var(--color-bg);
  cursor: default;
  border-top: solid 8px var(--color-primary);
  border-left: solid 2px var(--color-primary);
}
.article-list article:hover {
  box-shadow: 0 0 var(--space-sm) var(--color-accent);
}

article {
  max-width: 48rem;
  background-color: var(--color-bg-secondary);
  padding: var(--space-md);
}

@media (width < 48rem) {
  :root {
    --space-sm: 0.2rem;
    --space-md: 0.5rem;
    --space-lg: 1rem;
  }
  body {
    flex-direction: column;
    gap: var(--space-md);
  }
  aside {
    height: auto;
    padding: 0;
  }
  header {
    width: 100%;
    flex-direction: row;
  }
  header .avatar {
    width: 3rem;
    height: 3rem;
    margin: var(--space-md);
  }
  header nav {
    flex-direction: row;
  }
  li {
    width: auto;
  }
  li:hover {
    background-color: var(--color-bg-hover);
    transform: translate(0, var(--space-md));
  }

  main {
    padding: 0;
  }
  .article-list,
  article {
    max-width: 100vw;
    width: 100%;
  }
  article pre code {
    font-size: small !important;
  }
}