/* base.css */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Double:wght@100..900&family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Double:wght@100..900&family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Intel+One+Mono:ital,wght@0,300..700;1,300..700&display=swap');

/* Theme variables */
:root {
  --font-sans: 'Bitcount Prop Double', 'Bodoni Moda SC', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Intel One Mono', monospace;
  --bg: #000;
  --surface: #111;
  --text-primary: #fff;
  --text-secondary: #ccc;
  --border: #333;
  --shadow: rgba(0, 0, 0, 0.5);
  --radius: 0;
  --spacing: 1rem;
  --transition: 0.3s ease;
}

/* Global reset & layout */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
}

/* Navbar */
.navbar {
  background: var(--surface);
  padding: var(--spacing);
  box-shadow: 0 2px 4px var(--shadow);
  display: flex;
  justify-content: center;
  font-family: var(--font-sans);
}
.navbar-menu {
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin: 0;
  padding: 0;
}
.navbar-link {
  position: relative;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.navbar-link:hover,
.navbar-link.active,
.navbar-link[aria-current="page"] {
  border-color: var(--text-primary);
}

/* Main container & footer */
.footer {
  background: var(--surface);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--spacing);
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  font-family: var(--font-sans);
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* vertical: start at top */
  align-items: center;          /* horizontal: center the box */
  padding: calc(var(--spacing) * 2);
}

/* Homepage only: also center vertically */
.main.homepage {
  justify-content: center;      /* vertical: center */
}

/* HOME HERO: full‑black background */
.home-section {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 4px 8px var(--shadow);
  text-align: center;
  padding: calc(var(--spacing) * 2);
  max-width: 600px;
  width: 90%;
}
.nick-title {
  margin-bottom: var(--spacing);
  /* remove text styles */
  font-size: 0;
  line-height: 0;
}

/* 2. Size the logo itself */
.nick-title img {
  display: block;
  max-width: 500px;     /* tweak to taste */
  width: 80%;           /* or use a fixed px value */
  height: auto;
  margin: 0 auto;       /* center it in the container */
}
.nick-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}


/* Scale‑down navbar & logo on smaller screens */
@media (max-width: 768px) {
  /* Shrink navbar padding */
  .navbar {
    padding: 0.5rem var(--spacing);
  }

  /* Let menu fill, but tighten links */
  .navbar-menu {
    width: 100%;
    justify-content: space-around;  /* spread links evenly */
  }

  .navbar-link {
    padding: 0.25rem 0.5rem;         /* smaller click targets */
    font-size: 0.9rem;              /* slightly smaller text */
  }
}

@media (max-width: 600px) {
  html {
    font-size: 75%;   /* all rem‐based spacing & fonts scale down */
  }
}

@media (max-width: 480px) {
  /* Further shrink padding */
  .navbar {
    padding: 0.25rem var(--spacing);
  }

  .navbar-link {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
  }

  /* Scale logo to 90% of its container width */
  .nick-title img {
    max-width: 90%;
    width: auto;
  }

  /* Tweak home hero padding */
  .home-section {
    padding: var(--spacing);
  }
}