@import url(font.min.css);

:root {
    color-scheme: light;
    --bucket-font-family: 'Inter', sans-serif;
    --bucket-bg-color: #ffffff;
    --bucket-navbar-padding: 8px;
    --bucket-navbar-bg-color: var(--bucket-bg-color);
    --bucket-navbar-start-gap: 6px;
    --bucket-navbar-end-gap: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bucket-font-family: 'Inter', sans-serif;
        --bucket-bg-color: #09090B;
        --bucket-navbar-padding: 8px;
        --bucket-navbar-bg-color: var(--bucket-bg-color);
        --bucket-navbar-start-gap: 6px;
        --bucket-navbar-end-gap: 6px;
    }
}

[data-theme=light] {
    color-scheme: light;
    --bucket-font-family: 'Inter', sans-serif;
    --bucket-bg-color: #ffffff;
    --bucket-navbar-padding: 8px;
    --bucket-navbar-bg-color: var(--bucket-bg-color);
    --bucket-navbar-start-gap: 6px;
    --bucket-navbar-end-gap: 6px;
}

[data-theme=dark] {
    color-scheme: dark;
    --bucket-font-family: 'Inter', sans-serif;
    --bucket-bg-color: #09090B;
    --bucket-navbar-padding: 8px;
    --bucket-navbar-bg-color: var(--bucket-bg-color);
    --bucket-navbar-start-gap: 6px;
    --bucket-navbar-end-gap: 6px;
}

body {
    font-family: var(--bucket-font-family);
    background-color: var(--bucket-bg-color);
    margin: 0;
    padding: 0;
}

div.navbar {
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    padding: var(--bucket-navbar-padding);
    background-color: var(--bucket-navbar-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

div.navbar div.navbar-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    width: 100%;
    height: fit-content;
    gap: var(--bucket-navbar-start-gap);
}

div.navbar div.navbar-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    width: 100%;
    height: fit-content;
    gap: var(--bucket-navbar-end-gap);
}