@font-face{font-family:inter;font-style:normal;font-weight:400;font-display:swap;src:url(../font/inter_regular.woff2)format('woff2')}@font-face{font-family:inter;font-style:normal;font-weight:700;font-display:swap;src:url(../font/inter_bold.woff2)format('woff2')}html{height:100%;overflow:hidden}body{height:100%;display:flex;flex-direction:column}*{margin:0;padding:0;&, &::before, &::after { box-sizing: border-box; }}html,body{background-color:var(--color-bg);color:var(--color-fg);font-family:inter,sans-serif;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.03em}.layout{display:flex;flex:auto;min-height:0;& #aside_toggler { z-index: 99; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); display: none; border-radius: 0 var(--borderRadius) var(--borderRadius) 0; box-shadow: 0px 0px 10px 5px var(--color-bg_hover); @media (max-width: 650px) { display: block; } } & #aside { width: clamp(220px, 280px, 25%); display: flex; flex-direction: column; background: var(--color-bg_second); overflow: auto; min-height: 0; max-width: 400px; flex-shrink: 0; @media (max-width: 650px) { display: none; &.open { position: absolute; display: block; z-index: 2; max-width: unset; min-width: none; width: 100%; height: 100%; } } } & .main { flex: 1 1 auto; display: flex; flex-direction: column; gap: .75rem; padding: calc(var(--page-padding, 1rem) * 1); overflow: auto; min-height: 0; }}h1,h2,h3,h4,h5,h6,p,a,label,li{color:var(--color-fg)}.btn{display:flex;font-size:1rem;background:var(--color-bg_second);color:var(--color-fg);border:none;padding:.5rem .8rem;border-radius:var(--borderRadius);cursor:pointer;transition:box-shadow .1s,transform .1s,background .2s;&:disabled { cursor:default; opacity:.5; } &:hover:enabled { background:var(--color-bg_hover); } &.primary { font-weight:bold; background-color:var(--color-prime); color:#eee; &:hover { background-color:color-mix(in srgb,var(--color-prime),white 8%); } }}.btn.icon{padding:.5rem;& img { filter: var(--invert); pointer-events: none; width: 16px; height: 16px; }}.row{display:flex;flex-direction:row}