* {
    font-family: 'Roboto Flex', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif !important;
    line-height: 1.5;
    font-optical-sizing: auto;
    font-variation-settings: 'SLNT' 0,
    'GRAD' 0,
    'XOPQ' 96,
    'XTRA' 468,
    'YOPQ' 79,
    'YTAS' 750,
    'YTDE' -203,
    'YTFI' 738,
    'YTLC' 514,
    'YTUC' 712;

    --white: #ffffff;
    --lightest: #f8f7f7;
    --lighter: #e8e7e7;
    --light: #d5d5d5;
    --medlight: #c4c4c5;
    --lightgray: #b4b4b4;
    --medgray: #909091;
    --gray: #808081;
    --darkgray: #5d5d5c;
    --darkestgray: #454546;
    --dark: #353434;
    --semidark: #292929;
    --maindark: #212020;
    --darker: #1c1d1d;
    --darkest: #0d0d0c;
    --black: #000000;

    --blue: #0783e3;
    --light-blue: #49b1ff;
    --lightest-blue: #e7f5ff;

    --red: #ff3e61;
    --light-red: #ff7265;
    --lightest-red: #fff2f3;

    --green: #60b41d;
    --bright-green: #73e421;
    --lightest-green: #f4ffe6;

    --yellow: #fbc72c;
    --orange: #ff9826;
    --light-orange: #fde08f;
    --violet: #e2376f;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);

    --font-xxxs: 8px;
    --font-xxs: 10px;
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-xxl: 24px;
    --font-xxxl: 32px;

    --line-xxs: 16px;
    --line-xs: 18px;
    --line-sm: 20px;
    --line-md: 24px;
    --line-lg: 28px;
    --line-xl: 32px;
    --line-xxl: 36px;

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    --size-xxxs: 12px;
    --size-xxs: 14px;
    --size-xs: 16px;
    --size-sm: 24px;
    --size-md: 32px;
    --size-lg: 40px;
    --size-xl: 48px;
    --size-xxl: 64px;
    --size-xxxl: 96px;

    --faster: 75ms;
    --fast: 150ms;
    --slow: 250ms;

    --pagefind-ui-background: var(--semidark);
    --pagefind-ui-border: var(--gray);
    --pagefind-ui-border-width: 1px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(128, 128, 128, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

body {
    color: var(--medlight);
    background: var(--dark);
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--white);
    margin: 2em 0 1em 0;
}

h1 {
    font-size: var(--font-xxxl);
    text-align: center;
    font-weight: 700;
}

h2 {
    font-weight: 500;
}
h3 {
    font-weight: 600;
}


p {
    margin: 0.5em 0;
}

a {
    color: var(--light-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

main {
    max-width: 960px;
    margin: 0 auto;
    flex: 1;
}

@media (max-width: 1023px) {
    main {
        margin: 0 var(--space-md);
    }
}

header {
    background: var(--dark);
    @supports (backdrop-filter: blur(32px)) {
        background: none;
        backdrop-filter: blur(32px) brightness(0.7);
    }

    position: sticky;
    top: 0;
    padding: 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
    height: 48px;
    overflow: hidden;
}

header .logo {
    position: absolute;
    top: 20px;
    display: flex;
    gap: var(--space-xs);
}

header .logolink {
    height: 20px;
}

header .hamburger {
    text-align: center;
    line-height: 28px;
    display: inline-block;
    width: 24px;
    font-size: 28px;
    color: var(--white);
    text-decoration: none;
}

header .hamburger:hover {
    color: var(--blue)l
}

header img {
    height: 20px;
    width: auto;
}

header h1 {
    margin: 0 150px;
    color: var(--white);
}

nav {
    left: -330px;
    transition: left 0.3s ease-in-out;
    width: 330px;
    position: fixed;
    top: 64px;
    bottom: 0;
    background: #fff;
    backdrop-filter: blur(8px);
    overflow: auto;
    z-index: 1;

    @supports (backdrop-filter: blur(32px)) {
        background: rgb(255 255 255 / 66%);
        backdrop-filter: blur(32px) brightness(3);
    }
}

body.nav nav {
    left: 0;
    box-shadow: 8px 0 16px rgba(0, 0, 0, 0.2);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    padding-top: 8px;
    padding-left: 8px;
}

nav a {
    color: var(--blue);
    font-weight: 500;
    font-stretch: condensed;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 2px 0 2px 16px;
}

nav a.active {
    color: var(--white);
    background-color: var(--dark);
    border-radius: var(--radius-xl);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

footer {
    text-align: center;
    padding: 8px;
    font-size: 12px;
    background: rgba(0, 0, 0, .2);
    font-weight: 800;
    letter-spacing: 1px;
}

img {
    vertical-align: middle;
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

li img.center {
    margin: 8px auto;
}

code,
img.inline {
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid #808080;
    padding: 2px;
}

 code {
     display: inline-block;
 }

article.main {
    column-count: 2;
    column-gap: var(--space-md);
    margin: var(--space-md) auto;
}

@media (max-width: 767px) {
    article.main {
        column-count: 1;
    }
}

section {
    padding: var(--space-md);
    background: rgba(0,0,0,.4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    break-inside: avoid;
}

section:not(:has(li)) {
    display: none;
}

section h2 {
    background: none;
    border-left: none;
    padding: 0 0 0.5em 0;
    margin: 0;
    font-size: var(--font-md);
    font-weight: 400;
}

section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

section li {
    padding: var(--space-xs) var(--space-md);
}

section a {
    font-stretch: condensed;
}

#search {

    width: 100%;
}

.pagefind-ui {
    position: relative;
}

.pagefind-ui__drawer {
    width: 100% !important;
    position: absolute !important;
    backdrop-filter: blur(16px)  !important;
    background: rgb(65 65 65 / 66%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2) !important;
    max-height: 50dvh !important;
    overflow: auto !important;
    padding: 10px !important;
    border-radius: 8px !important;
}

.center {
    text-align: center;
    margin: 0 auto;
    display: block;
}

.info, .tip {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 8px;
}

.info {
    background: #549ef124;
}

.info:before {
    content: "ℹ️";
    font-size: 32px;
    text-shadow: 0 0 64px #549ef1;
}

.tip {
    background: #ffda641f;
}

.tip:before {
    content: "💡";
    font-size: 32px;
    text-shadow: 0 0 64px #ffda64;
}