/* About page overrides for NavMenu */
.app-shell.about-vars {
    --about-left-card-w: clamp(280px, 30vw, 520px);
    --about-gap: clamp(24px, 3vw, 48px);
    --moon-x-in-card: clamp(0px, calc((100vw - 1040px) * 0.1315), 5vw);
    --nav-moon-left: calc(50vw - (var(--about-left-card-w)) - (var(--about-gap) / 2) + var(--moon-x-in-card));
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .app-shell.about-vars {
        --about-left-card-w: clamp(280px, 42vw, 420px);
        --about-gap: clamp(24px, 3vw, 48px);
        --moon-x-in-card: clamp(22px, 5vw, 100px);
        --nav-moon-left: calc(50vw - (var(--about-left-card-w)) - (var(--about-gap) / 2) + var(--moon-x-in-card));
    }
}

@media (max-width: 767.98px) {
    .app-shell.about-vars {
        --about-left-card-w: 90vw;
        --nav-moon-left: clamp(65.28px, calc(245.76px + (100vw - 768px) * 0.501333), 245.76px);
    }
}

@media (max-width: 408px) {
    .app-shell.about-vars {
        --nav-moon-left: clamp(3px, calc(65.28px + (100vw - 408px) * 0.5766667), 65.28px);
    }
}