nav { display: flex; align-items: center; position: relative; } nav > .logo { display: inline-block; stroke: #b88df0; min-height: 40px; min-width: 40px; height: 40px; width: 40px; margin-right: 8px; transition: stroke 0.2s; } nav > h1 { font-weight: 500; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } nav > h1 mark { font-size: 1rem; position: relative; top: -3px; } nav > span { flex-grow: 1; } nav #menu { display: none; cursor: pointer; } .link-menu > a { font-size: 14px; font-weight: 600; margin-left: 2rem; text-decoration: none; transition: color 0.1s; } .link-menu > a:hover { color: #b88df0; } @media (max-width: 800px) { .link-menu { transform: scale(0.8) translateX(1rem); opacity: 0; z-index: 100; width: 200px; position: absolute; top: 5rem; right: 2rem; background: #252a38; padding: 1rem 0; border-radius: 5px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(22, 29, 43, 0.6901960784); transition: transform 0.2s, opacity 0.2s; } .link-menu.open { opacity: 1; transform: inherit; } .link-menu a { font-size: 20px; display: block; line-height: 3rem; } nav .logo { stroke: #b88df0; } nav #menu { display: block; min-height: 32px; min-width: 32px; height: 32px; width: 32px; cursor: pointer; transition: 0.5s; } nav #menu.active { transform: rotate(90deg); } } @media (max-width: 400px) { nav h1 { display: none; } }/*# sourceMappingURL=navbar.css.map */