/* Fonts - Inter variable for fine-tuned weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap');

/* Theme: Warm Dark (default) */
:root {
  --bg: hsl(20, 14%, 10%);
  --bg-alt: hsl(20, 10%, 15%);
  --fg: hsl(30, 10%, 90%);
  --fg-muted: hsl(25, 6%, 64%);
  --link: hsl(45, 96%, 56%);
  --link-hover: hsl(0, 90%, 70%);
  --code: hsl(48, 90%, 65%);
  --selection: hsl(20, 10%, 25%);
  --border: hsl(20, 10%, 25%);
}

/*
/* Theme: Navy (Armin-style)
[data-theme="navy"] {
  --bg: hsl(220, 50%, 22%);
  --bg-alt: hsl(220, 45%, 28%);
  --fg: hsl(210, 50%, 92%);
  --fg-muted: hsl(215, 30%, 70%);
  --link: hsl(200, 100%, 70%);
  --link-hover: hsl(0, 85%, 70%);
  --code: hsl(30, 100%, 75%);
  --selection: hsl(210, 60%, 40%);
  --border: hsl(220, 40%, 35%);
}

/* Theme: Gruvbox
[data-theme="gruvbox"] {
  --bg: hsl(0, 0%, 16%);
  --bg-alt: hsl(20, 5%, 22%);
  --fg: hsl(45, 50%, 82%);
  --fg-muted: hsl(40, 15%, 55%);
  --link: hsl(45, 95%, 58%);
  --link-hover: hsl(25, 98%, 55%);
  --code: hsl(60, 70%, 45%);
  --selection: hsl(30, 15%, 28%);
  --border: hsl(30, 10%, 28%);
}
*/

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Stars */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, hsla(0, 0%, 100%, 0.8), transparent),
    radial-gradient(1px 1px at 25% 85%, hsla(0, 0%, 100%, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 10%, hsla(0, 0%, 100%, 0.9), transparent),
    radial-gradient(1px 1px at 55% 45%, hsla(0, 0%, 100%, 0.5), transparent),
    radial-gradient(1px 1px at 70% 75%, hsla(0, 0%, 100%, 0.7), transparent),
    radial-gradient(2px 2px at 85% 30%, hsla(0, 0%, 100%, 1), transparent),
    radial-gradient(1px 1px at 90% 90%, hsla(0, 0%, 100%, 0.6), transparent),
    radial-gradient(1px 1px at 5% 60%, hsla(0, 0%, 100%, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 35% 55%, hsla(0, 0%, 100%, 0.8), transparent),
    radial-gradient(1px 1px at 60% 5%, hsla(0, 0%, 100%, 0.5), transparent),
    radial-gradient(1px 1px at 75% 50%, hsla(0, 0%, 100%, 0.6), transparent),
    radial-gradient(2px 2px at 15% 40%, hsla(200, 50%, 90%, 0.9), transparent),
    radial-gradient(1px 1px at 45% 70%, hsla(0, 0%, 100%, 0.7), transparent),
    radial-gradient(1px 1px at 95% 60%, hsla(0, 0%, 100%, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 50% 25%, hsla(40, 50%, 95%, 0.8), transparent),
    radial-gradient(1px 1px at 20% 95%, hsla(0, 0%, 100%, 0.6), transparent),
    radial-gradient(1px 1px at 80% 15%, hsla(0, 0%, 100%, 0.7), transparent),
    radial-gradient(1px 1px at 30% 30%, hsla(0, 0%, 100%, 0.5), transparent);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--fg);
  background:
    /* main nebula clouds - boosted */
    radial-gradient(ellipse at 15% 80%, hsla(280, 70%, 18%, 0.9), transparent 45%),
    radial-gradient(ellipse at 85% 20%, hsla(210, 80%, 15%, 0.85), transparent 40%),
    radial-gradient(ellipse at 50% 50%, hsla(330, 60%, 15%, 0.7), transparent 50%),
    radial-gradient(ellipse at 20% 20%, hsla(200, 70%, 12%, 0.8), transparent 35%),
    /* wispy clouds - more visible */
    radial-gradient(ellipse 80% 50% at 70% 70%, hsla(260, 60%, 15%, 0.75), transparent 55%),
    radial-gradient(ellipse 60% 80% at 30% 40%, hsla(190, 65%, 12%, 0.7), transparent 45%),
    radial-gradient(ellipse 100% 40% at 90% 90%, hsla(300, 55%, 12%, 0.6), transparent 50%),
    radial-gradient(ellipse 50% 100% at 5% 50%, hsla(220, 70%, 10%, 0.7), transparent 40%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  font-weight: 600;
  margin: 1.5em 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: 2.25em; font-weight: 700; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }

p {
  margin: 1em 0;
}

strong, b {
  font-weight: 600;
  color: var(--fg);
}

em, i {
  font-style: italic;
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
}

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

/* Lists */
ul, ol {
  padding-left: 1.5em;
  margin: 1em 0;
}

li {
  margin: 0.25em 0;
}

/* Code */
code {
  font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  background: var(--bg-alt);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  color: var(--code);
}

pre {
  background: var(--bg-alt);
  padding: 1em;
  border-radius: 6px;
  overflow-x: auto;
  margin: 1em 0;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.875em;
  color: var(--fg);
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--link);
  margin: 1em 0;
  padding: 0.5em 1em;
  color: var(--fg-muted);
  font-style: italic;
}

/* Horizontal Rule */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

th, td {
  padding: 0.5em 1em;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  font-weight: 600;
  color: var(--fg);
}

tbody tr:hover {
  background: var(--bg-alt);
}

/* Selection */
::selection {
  background: var(--selection);
  color: var(--fg);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
}

/* ===================
   Homepage Layout
   =================== */

.nav-bar {
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 1em 2em;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.nav-bar .image img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.nav-bar .logo {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}

.nav-bar .logo:hover {
  color: var(--link);
}

.nav-bar .subtext {
  display: none;
}

.nav-bar ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: auto;
  gap: 1.5em;
}

.nav-bar li {
  margin: 0;
}

.nav-bar a {
  color: var(--link);
}

.nav-bar a:hover {
  color: var(--link-hover);
}

.content {
  max-width: 700px;
  margin: 0 auto;
  padding: 2em;
}

.content h1:first-child {
  margin-top: 0;
}

.content h2 {
  margin-top: 2em;
  font-size: 1.3em;
  color: var(--fg-muted);
}

.hello {
  font-size: 1.1em;
  line-height: 1.7;
}

.current-projects,
.past-projects,
.quick-links {
  margin-top: 2em;
}

/* ===================
   Blog Post Layout
   =================== */

.post {
  max-width: 700px;
  margin: 0 auto;
  padding: 2em 1em;
}

/* Responsive */
@media (max-width: 600px) {
  .nav-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.75em;
    padding: 1em;
  }

  .nav-bar ul {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
  }

  .content {
    padding: 1em;
  }
}