.nav-item {
    margin-bottom:.25rem;
    margin-left:10px;
    margin-right:10px
}

.nav-item .active {
    background-color: #0b0b0b;
    color:#5680e8;
}

.nav-link {
    align-items:center;
    border-radius:21px;
    color:#fff;
    display:flex;
    gap:10px;
    justify-content:start;
    margin-bottom:.7rem;
    padding:.5rem 1rem;
    text-decoration:none;
    transition:0.1s;
}

.nav-link:hover {
    background-color: #0b0b0b;
    color: #55a1ff;
    text-decoration: none;
}

.nav-link:active {
    background-color: #131313;
}

.top-bar {
    box-sizing: content-box;
    background:#020202;
    border-bottom:1px solid #2424248c;
    display:flex;
    height:58px;
    justify-content:space-between;
    padding:.2rem .5rem;
    position:sticky;
    top:0;
    backdrop-filter: blur(4px);
    z-index:9
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-bar-link {
    color: #eee!important;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.top-bar-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(61, 116, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.top-bar-link:hover::before {
    left: 100%;
}

.top-bar-link:hover {
    color: var(--color-accent);
    background: rgba(61, 116, 255, 0.3);
    text-decoration: none!important;
}

.active-top-bar {
    color: #fff!important;
    background: rgba(60, 133, 234, 0.2);
}

.toggle-button {
    background-color:#03030366;
    border:1px solid #131313;
    border-radius:4px;
    color:#fff;
    cursor:pointer;
    padding:8px 10px 6px
}

.toggle-button:hover {
    background-color:#131313
}

.search-container {
    position: relative;
}

.search-input {
    background-color:#10101042;
    border:1px solid #131313;
    border-radius:21px;
    color:#eee;
    outline:none;
    padding:.5rem 1rem .5rem 2.2rem;
    width: 220px;
    transition: padding-left .3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(61, 116, 255, 0.3);
    padding-left: 1rem;
}

.search-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    width: 1.1em;
    height: 1.1em;
    transform: translateY(-50%);
    color: #888;
    transition: opacity .3s ease, transform .3s ease;
}

.search-input:focus ~ .search-icon {
    opacity: 0;
    transform: translateY(-50%) translateX(-8px) scale(.6);
    pointer-events: none;
}

@media (max-width: 768px) {
    .search-container {
        margin: 0;
    }
}

.dropdown {
    background-color:#070707;
    border:1px solid #2424248c;
    border-radius:5px;
    display:none;
    margin-top:7px;
    max-height:200px;
    overflow-y:auto;
    position:absolute;
    width:100%;
    z-index:99
}

.dropdown-item {
    color:#eee;
    cursor:pointer;
    padding:8px
}

.dropdown-item:hover, .dropdown-item.selected {
    background-color:#03030370
}

.auth-link {
    font-size:15px;
    padding:10px 22px
}

#user-profile {
    align-items:center;
    display:flex
}

#user-profile img {
    border-radius:20%;
    height:50px;
    width:50px
}

#user-profile a {
    align-items:center;
    display:flex;
    text-decoration: none!important;
}

#user-username {
    color:#fff;
    font-size:21px;
    padding-left:25px;
    padding-right:15px;
    text-shadow: 0 0 22px #fff;
    transition: 0.1s;
}

#user-username:hover {
    color:#eee;
    text-shadow: 0 0 17px #fff;
}

#user-username:active {
    text-shadow: 0 0 12px #fff;
}