.navbar {
    width: 100%;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 40px;

    background-color: #111111;

    position: sticky;
    top: 0;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);

    z-index: 1000;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-circle {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background-color: #4f46e5;
}

.logo-text {
    font-size: 28px;
    font-weight: bold;

    background: linear-gradient(
        90deg,
        #ff4d4d,
        #ff9900,
        #ffd700,
        #00c853,
        #00b0ff,
        #aa00ff
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

    

.logo-icon {
    font-size: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.creator-wrapper {

    flex: 1;

    max-width: 320px;

    overflow: hidden;

    margin-left: 20px;
}


.creator-text {

    display: inline-block;

    white-space: nowrap;

    min-width: max-content;

    font-size: 15px;

    font-weight: 700;

    background: linear-gradient(
        90deg,
        #00c3ff,
        #6a5cff,
        #ff4d8d,
        #ffb800,
        #00ff99
    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: creatorRun 12s linear infinite;
}

@keyframes creatorRun {

    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}