header{background-color:rgba(var(--secondary-rgb),.4);backdrop-filter:blur(2px);z-index:2;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;height:48px;display:grid;position:absolute;top:0;left:0}header:hover,header.touched{background-color:var(--secondary)}header.hide{transform:translateY(-100%)}header.accessibility{animation:.3s ease-in-out smoothMove;position:fixed}@keyframes smoothMove{0%{transform:translateY(-100%)}to{transform:translateY(0)}}header .logo a{align-items:center;gap:1vh;width:fit-content;margin-left:2vh;display:flex}header .logo a img{border-radius:16px;width:32px;height:32px}header .logo a:hover img,header .logo a.touched img{transform:rotate(-16deg)}header .logo a p{font-size:1.3em;font-weight:700}header .logo a:hover p,header .logo a.touched p{color:var(--accent);text-shadow:0 0 8px var(--text)}header .links{gap:4vh;width:auto;display:flex}header .links a{text-align:center;width:fit-content;text-shadow:0 0 8px var(--text);padding:.5vh 1vh;font-weight:700}header .links a:hover,header .links a.touched,header .links a.active{color:var(--accent);text-shadow:0 0 12px var(--accent)}header .theme{cursor:url(/src/svgs/pointer.svg),pointer;justify-self:flex-end;margin-right:2vh}header .theme .sun{opacity:1}header .theme:hover .sun,header .theme.touched .sun,header .theme .sun-fill{opacity:0}header .theme:hover .sun-fill,header .theme.touched .sun-fill{opacity:1}header .theme .moon,header .theme .moon-fill{opacity:0}.changed-theme header .theme .moon{opacity:1}.changed-theme header .theme:hover .moon,.changed-theme header .theme.touched .moon,.changed-theme header .theme .moon-fill{opacity:0}.changed-theme header .theme:hover .moon-fill,.changed-theme header .theme.touched .moon-fill{opacity:1}.changed-theme header .theme .sun,header .theme .sun-fill,.changed-theme header .theme:hover .sun-fill,.changed-theme header .theme.touched .sun-fill{opacity:0}@media screen and (width<=450px){header{grid-template-rows:repeat(2,auto);grid-template-columns:auto 1fr;gap:2vh;height:auto;padding-bottom:2vh}header .logo{grid-area:1/1/auto/span 2;justify-self:center;margin-top:2vh}header .links{grid-area:2/1;gap:2vh;margin-left:2vh}header .theme{grid-area:2/2}}
