.navbar{display:flex;justify-content:space-between;align-items:center;background-color:#000;color:#fff;width:100%;padding:1rem 2rem;position:relative}.login-btn{display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:50%;transition:background-color .3s;margin-bottom:.1rem}.login-btn:hover{background-color:#ffffff1a}.user-name{font-size:.9rem;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.gap-3{gap:1rem}.hr-navbar{border:2px solid #ffffff;position:relative;overflow:hidden;opacity:.8}.hr-navbar:before{content:"";position:absolute;top:50%;left:-100%;width:200%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.1) 55%,transparent 100%);transform:translateY(-50%);animation:shineEffect 3s ease-in-out}@keyframes shineEffect{0%{left:-100%;opacity:0}20%{opacity:1}60%{opacity:.5}to{left:100%;opacity:0}}.hr-thin{border-width:1px;height:1px;margin:auto 0}.hr-medium{border-width:1px;height:5px;margin:auto 0}.user-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:150px}.typing-text{display:block;width:-moz-fit-content;width:fit-content;margin:0 auto;border-right:2px solid;white-space:nowrap;overflow:hidden;animation:typing 3s steps(30),cursor .5s step-end 6,removeCursor .1s 4s forwards}@keyframes typing{0%{width:0}to{width:100%}}@keyframes cursor{50%{border-color:transparent}}@keyframes removeCursor{to{border-right-color:transparent}}