:root {
    --ink: #333;
    --ink-deep: #262626;
    --paper: #fff;
    --accent: #007bff;
    --nav-h: clamp(52px, 6vh, 72px);

    /* Motion tokens: one set of curves used everywhere */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* expo-ish, for entrances */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot, for pops */
    --dur-fast: 180ms;
    --dur: 320ms;
    --dur-slow: 700ms;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--paper);
}

::selection {
    background: var(--accent);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

#page_container {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

#content_wrap {
    padding-bottom: 5rem;    /* Footer height */
}

.navbar {
    background-color: rgba(34, 34, 34, 0.86);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    color: #fff;
    align-items: center;
    width: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    height: var(--nav-h);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 0 2%;
    animation: nav-drop var(--dur-slow) var(--ease-out) both;
}

@keyframes nav-drop {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Reading progress bar along the bottom edge of the navbar.
   Uses scroll-driven animations where supported; elsewhere home.js sets --scroll. */
.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent), #6cb6ff);
    transform-origin: 0 50%;
    transform: scaleX(var(--scroll, 0));
    pointer-events: none;
}

@supports (animation-timeline: scroll()) {
    .navbar::after {
        animation: progress-grow linear both;
        animation-timeline: scroll(root block);
    }
    @keyframes progress-grow {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-h);
}

.nav_content {
    color: white;
    cursor: pointer;
    font-size: large;
    text-decoration: none;
    transition: opacity var(--dur) var(--ease-out);
}

.nav_content h1 {
    margin: 0;
    font-size: clamp(1.15rem, 2.4vh, 1.6rem);
    letter-spacing: -0.01em;
    position: relative;
}

/* Underline that draws in from the left on hover */
.nav_content h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur) var(--ease-out);
}

.nav_content:hover h1::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav_content:hover {
    opacity: 0.85;
}

.bar_container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.nav_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.nav_link img {
    width: 22px;
    height: 22px;
}

.nav_link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px) scale(1.06);
}

.nav_link:active {
    transform: scale(0.94);
}

.nav_button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.nav_button:hover {
    background-color: #45a049;
}

.nav_button:active {
    transform: scale(0.97);
}

.separater-top {
    padding-top: var(--nav-h);
}

.separater-bottom {
    padding-bottom: 6vh;
}

.footer {
    background-color: var(--ink);
    color: #fff;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 6vh;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer .container {
    height: 6vh;
    padding: 0 2%;
}

.footer-content {
    display: flex;
    align-items: center;
    text-align: center;
}

.footer p {
    margin: 0;
    text-align: center;
    opacity: 0.75;
}

.footer-content ul {
    list-style-type: none;
    padding: 0;
}

.footer-content ul li {
    display: inline-block;
    margin-right: 10px;
}

.footer-content ul li:last-child {
    margin-right: 0;
}

.footer-content ul li a {
    color: #fff;
    text-decoration: none;
}

.disabled {
    pointer-events: none;
}

.alert {
    font-size: large;
    justify-content: center;
    color: rgb(0, 0, 0);
    padding: 1%;
    animation: alert-in var(--dur-slow) var(--ease-out) both;
}

@keyframes alert-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}

.alert-success {
    background-color: rgb(0, 167, 50);
}

.alert-danger {
    background-color: rgb(255, 238, 0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}