:root {
    --font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --size: max(1em, 1dvw, 1dvh, 16px);
    font-size: var(--size);
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #090701;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

.mapboxgl-control-container {
    display: none;
}

.mapboxgl-canvas-container.pointer,
.mapboxgl-canvas.pointer,
.mapboxgl-canvas-container .mapboxgl-canvas.pointer {
    cursor: pointer !important;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-family);
    font-display: swap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-variant-numeric: tabular-nums;
}

html,
body {
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: 400;
    color: #ffffff;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#navbar {
    width: 100%;
    height: calc(var(--size) * 3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
    background-color: #00060a70;
    backdrop-filter: blur(calc(var(--size) * 0.25));
    padding: 0 calc(var(--size) * 0.5);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    #navbar-left {
        height: 70%;
        width: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    #navbar-right {
        height: 100%;
        width: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: calc(var(--size) * 0.75);
    }
}

#map-contanier {
    width: 100%;
    height: 100%;
}

#pages-contanier {
    width: min(calc(100dvw - calc(var(--size) * 1)), calc(var(--size) * 28));
    height: min(80dvh, calc(var(--size) * 30));
    position: fixed;
    top: calc(var(--size) * 4);
    left: calc(var(--size) * 0.5);
    z-index: 8;
    background-color: #000000cc;
    backdrop-filter: blur(calc(var(--size) * 0.25));
    border-top: calc(var(--size) * 0.25) solid #0156FC;
    border-radius: calc(var(--size) * 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#pages-contanier>.header {
    width: 100%;
    height: calc(var(--size) * 3);
    background-color: #000000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--size) * 0.5);

    .header-icon {
        height: 50%;
        width: auto;
        aspect-ratio: 1;
        cursor: pointer;
    }
}

#pages-contanier>.pages {
    width: 100%;
    height: calc(100% - calc(var(--size) * 3));
    overflow-y: auto;
}

#pages-contanier.pages-hide {
    height: calc(var(--size) * 3);
}

#pages-contanier.pages-show {
    height: min(80dvh, calc(var(--size) * 30));
}

h1 {
    font-size: var(--size);
    font-weight: 500;
    width: fit-content;
    height: fit-content;
}

span {
    width: fit-content;
    height: fit-content;
    font-size: calc(var(--size) * 0.8);
}

.cursor-toast {
    position: fixed;
    transform: translate(-50%, -100%) scale(0.9);
    background: #222222;
    color: #ffffff;
    padding: calc(var(--size) * 0.5) calc(var(--size) * 0.8);
    border-radius: calc(var(--size) * 0.5);
    font-size: calc(var(--size) * 0.8);
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    max-width: min(fit-content, 40dvw, calc(var(--size) * 15));
}

.info-icon {
    cursor: help;
    font-size: calc(var(--size) * 0.75);
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    margin: 0;
    aspect-ratio: 1 / 1;
    line-height: 1;
    transform: translateX(-0.05em);

    &::before {
        content: "";
        position: absolute;
    }
}

.pointer {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.zoomin {
    cursor: zoom-in;
}

.zoomout {
    cursor: zoom-out;
}

.center {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    place-items: center;
    place-content: center;
}

img {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}