.navbar{background-color:var(--bg-primary);overflow:scroll;position:fixed;transition:width .6s ease}.navbar-nav{align-items:center;display:flex;flex-direction:column;height:100%;list-style:none;margin:0;padding:0}.nav-item{width:100%}.nav-item:last-child{margin-top:auto}.nav-link{align-items:center;color:var(--text-primary);display:flex;filter:grayscale(100%) opacity(.7);height:5rem;text-decoration:none;transition:.3s}.nav-link:hover{background:var(--primary-300);color:var(--primary-900);filter:grayscale(0) opacity(1)}.link-text{color:var(--primary-900);display:none;margin-left:1rem}.nav-link svg{margin:0 1.5rem;min-width:2rem;width:2rem}.fa-primary{color:var(--primary-500)}.fa-secondary{color:var(--scnd-700)}.fa-primary,.fa-secondary{transition:.3s}.logo{background:var(--primary-300);color:var(--primary-900);font-size:1.5rem;font-weight:700;letter-spacing:.3ch;margin-bottom:1rem;text-align:center;text-transform:uppercase;width:100%}.logo,.logo svg{box-sizing:border-box}.logo svg{height:60px;margin:0 auto;width:60px}.logo a:hover{background:var(--scnd-500);color:var(--primary-950)}@media only screen and (max-width:639px){.navbar{bottom:0;height:5rem;width:100vw}.logo{display:none}.navbar-nav{flex-direction:row}.nav-link{justify-content:center}main{margin:0}}@media only screen and (min-width:640px){.navbar{height:100vh;top:0;width:5rem}.navbar:hover{width:16rem}.navbar:hover .link-text{display:inline;white-space:nowrap}}