#root-layout{--_bg-color: var(--mono-white);--_color: var(--mono-white-on);--_padding: var(--size-6);display:grid;row-gap:var(--size-10);color:var(--_color);padding-bottom:var(--size-10);>nav{--_top: var(--size-1);display:flex;position:fixed;top:var(--_top);left:var(--_top);right:var(--_top);column-gap:var(--size-5);align-items:center;z-index:var(--zindex-drawer);backdrop-filter:blur(4px);border-radius:var(--rounded);background-color:rgb(from var(--_bg-color) r g b / .7);padding:var(--size--1);width:calc(100% - var(--_padding) * 2);margin-inline:auto;>a{flex-shrink:0;>img{max-height:var(--size-7)}}>ul{display:flex;column-gap:var(--size-3);flex-grow:1;justify-content:flex-end;align-items:center;>li{font-size:var(--size-0);font-family:var(--font-semimono);padding-right:var(--size-3);&:has(a.active),&:has(a:hover){text-decoration:underline;text-underline-offset:5px;color:var(--_color);&:has(a.active){font-weight:var(--font-weight-semi-bold)}}}}}>main{display:grid}>footer{display:flex;column-gap:var(--size-3);align-items:center;justify-content:center;>img{height:var(--size-5)}}}@media(width<768px){#root-layout{>nav{>ul{li:last-child{display:none}}}>footer{flex-direction:column-reverse;row-gap:var(--size-1);>img{height:var(--size-12)}}}}