.nav-container {
    background-color: #0f1114;
    border-bottom: 1px solid var(--dirty-gold);
    position: sticky;
    top: 0;
    z-index: 900;
}

.nav-link-custom {
    display: block;
    padding: 15px 30px;
    text-decoration: none;
    color: #666;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
    position: relative;
}

li.border-left .nav-link-custom {
    border-left: 1px solid #222;
}

li.border-right .nav-link-custom {
    border-right: 1px solid #222;
}

.nav-link-custom:hover {
    color: var(--parchment);
    background-color: var(--blood-god);
    box-shadow: inset 0 0 10px #000;
}

.nav-link-custom::before { content: '[ '; opacity: 0; transition: 0.3s; color: var(--imperial-gold); }
.nav-link-custom::after { content: ' ]'; opacity: 0; transition: 0.3s; color: var(--imperial-gold); }
.nav-link-custom:hover::before, .nav-link-custom:hover::after { opacity: 1; }

.nav-button {
    all: unset;
    display: block;
    padding: 15px 30px;
    color: #666;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
    position: relative;
    cursor: pointer;
}

.border-left .nav-button {
    border-left: 1px solid #222;
}

.border-right .nav-button {
    border-right: 1px solid #222;
}

.nav-button:hover {
    color: var(--parchment);
    background-color: var(--blood-god);
    box-shadow: inset 0 0 10px #000;
}

.nav-button::before { content: '[ '; opacity: 0; transition: 0.3s; color: var(--imperial-gold); }
.nav-button::after { content: ' ]'; opacity: 0; transition: 0.3s; color: var(--imperial-gold); }

.nav-button:hover::before,
.nav-button:hover::after {
    opacity: 1;
}