@import "bulma.min.css";

html,
body,
#root {
    /* margin: 0; */
    min-height: 100%;
    /* overflow: hidden; */
    /* touch-action: none; */
    /* scroll-behavior: none; */
    font-family: 'Fira Sans', sans-serif;

}

html {
    /* background: rgb(25, 39, 39); */
    /* overflow-y: scroll; */
    /* scrollbar-width: none; */
}

html::-webkit-scrollbar {
    display: none;
}


.glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15);

    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        max-height 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.leaflet-control-zoom {
    margin-top: 20px !important;
    position: fixed !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;

    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 24px !important;
    margin: 2px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

.leaflet-bar {
    border: 0px !important;
}

.leaflet-container {
    background: #15362e;
    outline: 0;
}

/* Når Bulma er i dark mode */
@media (prefers-color-scheme: dark) {
    .glass {
        background: rgba(30, 30, 35, 0.35);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.4);
    }
}

.glass-small {
    border-radius: 16px;
}

.glass-heavy {
    background: rgba(255, 255, 255, .25);
}

.glass-floating {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .25);
}