html {
    scrollbar-gutter: stable;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

body {
    font-family: "Atkinson Hyperlegible", serif;
}

[data-tooltip]:hover::after {
    display: block;
    position: absolute;
    top: -35px;
    left: 25px;
    content: attr(data-tooltip);
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: white;
    padding: 0.25em 0.35em;
    box-shadow: 1px -1px 2px 1px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: 1px -1px 2px 1px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 1px -1px 2px 1px rgba(0, 0, 0, 0.06);
    color: rgb(107, 114, 128);
}

/* HTML: <div class="loader"></div> */
.loader {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 10px;
    clip-path: inset(0 3ch 0 0);
    animation: l4 1s steps(4) infinite;
}
.loader:before {
    content: "Loading...";
}
@keyframes l4 {
    to {
        clip-path: inset(0 -1ch 0 0);
    }
}

.custom-gradient {
    --my-gradient-start: rgb(43, 145, 64, 0.1);
    --my-gradient-end: rgb(229, 191, 42, 0.1);
}