:root {
    --full-height: 100vh;
    /* Fallback value */
    --half-height: 50vh;
    /* Fallback value */
}

@supports (height: 100dvh) {
    :root {
        --full-height: 100dvh;
        --half-height: 50dvh;
    }
}

#root {
    min-height: var(--full-height);
}


body {
    margin: 0;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
}

.MuiSnackbarContent-message {
    width: 100%;
}

a {
    text-decoration: none;
    /* remove underlining */
}


h1.bhead {
    font-size: 36px;
    font-weight: 300;
}

h2.bhead {
    font-size: 32px;
    font-weight: 300;
}

h3.bhead {
    font-size: 28px;
    font-weight: 300;
}

/* for tour */
.tour-step-absolute {
    inset: initial !important;
    transform: initial !important;
    position: absolute;
    top: 80px !important;
    right: 20px !important;
}

@media print {
    .songboard-hide-during-print {
        display: none !important;
    }

    .songboard-print-pagebreak {
        page-break-before: always;
    }

    .songboard-print-container {
        overflow: visible !important;
    }

    .songboard-print-color-black {
        color: black !important;
    }
}

@keyframes space-float {
    0% {
        /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
        transform: translatey(0px);
    }

    50% {
        /* box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); */
        transform: translatey(-5px);
    }

    100% {
        /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
        transform: translatey(0px);
    }
}

@keyframes space-float-mini {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-3px);
    }

    100% {
        transform: translatey(0px);
    }
}

/* scroll bar */
/* Apply custom scrollbars globally */
html,
body,
* {
    scrollbar-width: thin;
    /* Firefox: thin scrollbar */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    /* Handle and track colors */
}

/* Webkit Browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 8px;
    /* Width of the scrollbar */
    height: 8px;
    /* Height for horizontal scrollbars */
    background-color: transparent;
    /* Background for the scrollbar track */
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    /* Color of the scrollbar handle */
    border-radius: 8px;
    /* Rounded edges */
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
    /* Darker on hover */
}

*::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.7);
    /* Even darker on click */
}

/* Optional: Hide scrollbar track completely */
*::-webkit-scrollbar-track {
    background: transparent;
    /* Make track transparent */
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}