.AuthLinks{display:flex;gap:3rem;margin-bottom:.5rem;.LogInLink{margin-left:3rem}.NotLogInLink{display:flex;justify-content:center;align-items:center;gap:2.5rem}.AuthLink{color:#fff;font-weight:400;cursor:pointer;transition:all .3s;opacity:.8;&:hover{transform:scale(1.05)}}}.Logo{display:flex;color:#fff;text-align:center;justify-content:center;align-items:center;.LogoImage{width:8rem}}.Header{width:100%;height:4rem;padding:0 3vw;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;z-index:999;transition:all .5s;&[data-state=active]{background-image:linear-gradient(180deg,rgba(0,0,0,.925) 50%,rgba(0,0,0,.925) 0,transparent);transform:none;top:0}&[data-state=notActive]{opacity:0;transform:translateY(-50%)}.leftHandSide{gap:2rem}.leftHandSide,.rightHandSide{display:flex;justify-content:center;align-items:center}.rightHandSide{gap:1rem}@media (max-width:500px){display:none}}.SocialLinks{display:flex;justify-content:end;align-items:start;.Container{display:flex;justify-content:center;align-items:center;gap:2rem;padding:2rem;.Horizontal-line{border-top:2px solid #606060;width:8rem;animation:stretch 1.5s ease-in-out both}.i{animation:slide-in 1s ease-in-out 1s both}.f{animation:slide-in 1s ease-in-out 1.5s both}.x{animation:slide-in 1s ease-in-out 2s both}}}.Nav{display:flex;flex-direction:column;justify-content:center;align-items:start;font-size:small;gap:1.5rem;font-family:var(--secondary-font);padding:2px;a{text-decoration:none;text-transform:uppercase;display:flex;justify-content:center;align-items:center;gap:1rem;span:nth-of-type(2){color:var(--primary-color);opacity:0;transform:translateX(-50%);transition:all .5s .1s;&[data-state=hovered]{opacity:1;color:#fff;transform:none}}}}