@import "base.css";
@import "components.css";

body {
    background-color: var(--surface);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

nav {
    /* positioning and look */
    position: sticky;
    top: 0;
    backdrop-filter: blur(var(--backdrop-blur));
    background-color: color-mix(in srgb, var(--surface), transparent 20%);
    padding: 1rem;
    height: 4rem;

    /* content inside */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
	align-items: center;

    & :last-child { justify-self: end }
    & > div {
        display: flex;
        align-items: center;
        gap: 1rem;

        & > a {
            font-size: 1.25rem;
            color: var(--on-background);
            text-decoration: none;
        }

        /* The main selected link doesn't have a href attribute, so we can use that for styles */
        & > a:not([href]) {
            color: var(--primary);
            padding-bottom: 4px;
            border-bottom: 2px solid var(--primary);
        }
    }
}