div.menu{position:absolute;background-color:var(--background-fade);box-shadow:0 0 1rem var(--background);border-radius:8px;z-index:100;opacity:0;width:auto;transition:.25s ease opacity;overflow:hidden}.nav-menu{display:flex;flex-direction:column}.menu.active{opacity:1;transition:.25s ease opacity}.avatar{width:42px;height:42px;border-radius:50%;margin:0;display:block;overflow:hidden}.avatar span{font-size:28px;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:var(--primary)}.avatar img{object-fit:cover;width:100%}@media screen and (min-width: 768px){.avatar{width:56px;height:56px}}header{position:absolute;display:flex;flex-direction:row;align-items:center;background-color:var(--color-background);width:100%;height:64px;top:0;padding:0 2rem;gap:24px}header h1{color:#f0f0f0;font-size:2rem;font-weight:200;margin-left:1rem;margin:0}header a:has(h1){display:none}@media screen and (min-width: 768px){header{width:88px;height:100vh;flex-direction:column;padding:2rem 0}header h1{writing-mode:vertical-rl;text-orientation:mixed}header a:has(h1){display:block}}@media screen and (max-width: 350px){header div.spacer{display:none}}.spacer{flex-grow:1}