/* css/style.css */

.dark {
    --background: 210 11.1% 3.53%;
    --foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --border: 0 0% 14.9%;
    --font-sans: 'Inter', sans-serif;
}

.font-sans {
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin: 0;
}

nav {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 1.4rem 0 0.8rem;
    text-align: center;
    
    /* Add these lines */
    background: hsl(var(--background));     /* or #000 or whatever matches your dark theme */
    backdrop-filter: blur(12px);            /* optional: nice frosted glass effect */
    -webkit-backdrop-filter: blur(12px);   /* for Safari */
}

.nav-list {
    display: inline-flex;
    gap: 3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    transition: color 0.18s ease;
}

.nav-link:hover,
.nav-link.active {
    color: hsl(var(--foreground));
}

div.outer-container {
    padding: 4rem 1.5rem 4rem;   /* top | sides | bottom */
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    text-align: center;
}

.inner-container {
    display: inline-block;
    text-align: left;
}

h1 {
    font-weight: 700;
    font-size: 1.875rem;
    letter-spacing: -0.05em;
    line-height: 1;
    opacity: 1;
    filter: blur(0px);
    will-change: auto;
    transform: translateY(-8px);
    margin: 0.3em 0 0.5em 0;
    margin-bottom: 0.25rem;   /* very close to hr */
}

hr {
    border: 0;
    height: 1px;
    background: hsl(var(--border));
    margin: 0.5rem 0; 
    width: 80%;
    max-width: 400px;
}

p {
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.01em;
    line-height: 1.5;
    margin-top: 0;
    margin-left: 8px;
}

.back-arrow {
    transform: translateX(-100%);    /* move completely to the left of center */
    color: hsl(var(--muted-foreground));
    opacity: 0.75;
    z-index: 100;
    font-size: 80%;
    text-decoration: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.back-arrow:hover {
    opacity: 1;
    color: hsl(var(--foreground));
    transform: translateX(-100%) translateX(-0.25rem);   /* tiny left nudge on hover */
}

.back-arrow::before {
    content: "←";
}

@media (min-width: 640px) {
    h1 { font-size: 3rem; }
    p  { font-size: 1rem; margin-left: 9px; }
    .nav-list { gap: 4rem; }
}

@media (min-width: 1280px) {
    h1 { font-size: 3.75rem; }
    p  { font-size: 1rem; margin-left: 10px; }
}