html {
    overflow: auto;
}
body {
    width: 100vw;
    height: 100%;
    display: flex;
    max-width: 100vw;
    min-height: 100vh;
    flex-direction: column;
    background-size: 100% auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* background-image: url("http://localhost:3456/videos/clouds.mp4"); */
    /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1003%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(115%2c 120%2c 125%2c 0.01)'%3e%3c/rect%3e%3cpath d='M 0%2c165 C 57.6%2c155.8 172.8%2c106.4 288%2c119 C 403.2%2c131.6 460.8%2c241.4 576%2c228 C 691.2%2c214.6 748.8%2c47 864%2c52 C 979.2%2c57 1036.8%2c243.2 1152%2c253 C 1267.2%2c262.8 1382.4%2c131.4 1440%2c101L1440 560L0 560z' fill='rgba(125%2c 130%2c 135%2c 0.01)'%3e%3c/path%3e%3cpath d='M 0%2c313 C 96%2c360.6 288%2c557.2 480%2c551 C 672%2c544.8 768%2c285.8 960%2c282 C 1152%2c278.2 1344%2c482 1440%2c532L1440 560L0 560z' fill='rgba(110%2c 110%2c 120%2c 0.01)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1003'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");*/
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    position: sticky;
    z-index: 99999;
    top: 0;
}
footer {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: var(--padding-xl);
}
main {
    display: unset;
    padding: var(--padding-xl);
    min-height: 90vh;
    align-content: center;
}

nav {
    display: flex;
    align-items: center;
    gap: var(--gap-3xs);
    z-index: 99999;
}
nav a {
    display: flex;
    gap: var(--gap-3xs);
}
@media (max-width: 768px) {
    nav {
        justify-content: center;
        overflow-x: auto;
        position: fixed;
        width: calc(100vw - 1rem);
        bottom: 0.25rem;
        left: 0.5rem;
        right: 0.5rem;
        padding: 0.25rem;
        background: light-dark(#ffffff22, #00000022);
    }
    nav a span {
        display: none;
    }
    body {
        padding-bottom: 4rem;
    }
    header {
        padding: var(--space-2xs);
    }
    main {
        display: unset;
        padding: var(--padding-lg);
    }
}