nav, main {
    width: 100vw;
}

nav, .navbar {
    position: sticky;
    top: 0;
    background-color: var(--canvas-dark);
    box-sizing: border-box;
    box-shadow: var(--shadow-navbar);
    z-index: 999;
}

.navbar-brand {
    font-family: var(--body-font-family);
    font-weight: 800;
    border-radius: var(--radius-md);
    color: transparent;
    background-image: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-size: 102% 100%, 102% 100%;
    background-position: left, left;
    transition: background-size 0.3s ease-in-out;
    padding: 5px;
}

.navbar-brand:hover {
    background-size: 0% 100%, 102% 100%;
    background-position: right, left;
}

.nav-item, .nav-item a {
    font-weight: 400; /* Other templates try to override this, that's why it's here explicitly */
    transition: all 0.3s ease;
}

.nav-item.active > a {
    color: var(--primary-accent) !important; /* This is like using global variables for everything but argh how else can I target it without unreliable selectors */
    font-weight: bold;
}

.dropdown-menu {
    background-color: var(--primary-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
}

.dropdown-menu a.dropdown-item {
    font-weight: 600;
    color: var(--text);
    transition: all 0.3s ease;
}

.dropdown-menu a.dropdown-item:hover {
    color: var(--primary-accent);
    background-color: var(--surface-bg-alt);
}