header[role=banner]{background-color:var(--bg-light);filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));position:sticky;top:0;z-index:50;font-size:1rem;.header-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.375rem; max-width: 80rem; margin: 0 auto; .app-title { font-weight: bold; font-size: 1.25rem; .alpha-statement { font-weight: normal; font-size: 0.75rem; font-style: italic; } } .notification-bell { position: relative; .notification-bell-icon { width: 1.25rem; height: 1.25rem; } .notification-bell-notice { display: block; position: absolute; top: 0; right: 0; width: 0.5rem; height: 0.5rem; border-radius: 999px; background-color: var(--red); } } nav { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } }}.profile-menu{position:relative;display:inline-block;text-align:left;margin-left:.375rem;svg { width: 1.125rem; height: 1.125rem; } .profile-picture { cursor: pointer; list-style: none; .profile-picture-icon { border-radius: 999px; width: 2.5rem; height: 2.5rem; } .profile-picture-icon-placeholder { display: flex; align-items: center; justify-content: center; background-color: var(--primary); border-radius: 999px; width: 2.5rem; height: 2.5rem; svg { width: 1.75rem; height: 1.75rem; } } } .profile-menu-content { position: absolute; display: flex; flex-direction: column; right: 0; gap: 0.25rem; margin-top: 0.5rem; padding: 0.25rem; border-radius: 4px; border-style: solid; border-width: 1px; border-color: var(--bg-dark); background-color: var(--bg-light); width: 12rem; hr { color: var(--bg-dark); } } .profile-menu-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; &:hover { background-color: var(--bg); } }}