:root {
    font-family: "Manrope", "Segoe UI", sans-serif;
    font-size: 16px;
    --red: #c31f19;
    --border: rgba(95, 19, 16, 0.24);
    --btn-transition: background-color 200ms ease, transform 200ms ease;
    --btn-dark-bg: rgba(195, 31, 25, 0.1);
    --btn-light-bg: rgba(255, 255, 255, 0.09);
    --btn-radius: 0.5em;
    --btn-padding: 0.75rem;
    --top-h: 4rem;
}

* {
    min-height: 0;
    min-width: 0;
}

html,
body,
#svelte {
    height: 100%;
}

html {
    color: #0f172a;
}

body {
    margin: 0;
    background: radial-gradient(circle at 10% -10%, #fff0f0 0%, #fff7f7 45%, #ffffff 100%);
}

#loading {
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: enter 350ms ease;
    animation-fill-mode: forwards;
}

@keyframes enter {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#loading-icon {
    width: min(12rem, 48vw);
    height: min(12rem, 48vh);
    background-image: url(/icons/512.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 2.75rem;
}

#progress-line,
#progress-line:before {
    height: 3px;
    width: min(80vh, 15rem);
    margin: 0;
}

#progress-line {
    background-color: #f4d7d6;
    display: flex;
}

#progress-line:before {
    background-color: var(--red);
    content: "";
    animation: running-progress 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes running-progress {
    0% {
        margin-left: 0;
        margin-right: 100%;
    }
    50% {
        margin-left: 25%;
        margin-right: 0;
    }
    100% {
        margin-left: 100%;
        margin-right: 0;
    }
}

button {
    appearance: none;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    background-color: transparent;
    font: inherit;
}

.btn-dark,
.btn-light {
    user-select: none;
    cursor: pointer;
    transition: var(--btn-transition);
}

.btn-dark {
    --ripple-color: rgba(195, 31, 25, 0.24);
}

.btn-light {
    --ripple-color: rgba(255, 255, 255, 0.25);
}

.btn-dark:hover,
.btn-dark.hover {
    background-color: var(--btn-dark-bg);
}

.btn-light:hover,
.btn-light.hover {
    background-color: var(--btn-light-bg);
}

.btn-primary {
    background-color: var(--red);
    color: #fff !important;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    transition: var(--btn-transition);
}

.btn-primary:hover {
    transform: translateY(-1px);
    background-color: #b22525;
}

.na {
    color: inherit;
    text-decoration: none;
}

.tooltip {
    position: fixed;
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    pointer-events: none;
    transition: opacity 200ms ease;
    opacity: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    z-index: 999999999;
    border-radius: 0.25rem;
    max-width: calc(100vw - 32px);
}

.tooltip.visible {
    opacity: 1;
}

.thin-scroll {
    scrollbar-width: thin;
}

.thin-scroll::-webkit-scrollbar {
    width: 6px;
}

.thin-scroll::-webkit-scrollbar-track {
    background: #f1dfdf;
}

.thin-scroll::-webkit-scrollbar-thumb {
    background: #c89595;
}

.thin-scroll::-webkit-scrollbar-thumb:hover {
    background: #b56f6f;
}

.elev2 {
    box-shadow: 0 3px 1px -2px rgba(9, 25, 46, 0.2), 0 2px 2px 0 rgba(9, 25, 46, 0.12), 0 1px 5px 0 rgba(9, 25, 46, 0.1);
}

.elev3 {
    box-shadow: 0 3px 3px -2px rgba(9, 25, 46, 0.2), 0 3px 4px 0 rgba(9, 25, 46, 0.12), 0 1px 8px 0 rgba(9, 25, 46, 0.1);
}

.elev4 {
    box-shadow: 0 2px 4px -1px rgba(9, 25, 46, 0.2), 0 4px 5px 0 rgba(9, 25, 46, 0.12), 0 1px 10px 0 rgba(9, 25, 46, 0.1);
}

.elev6 {
    box-shadow: 0 3px 5px -1px rgba(9, 25, 46, 0.2), 0 6px 10px 0 rgba(9, 25, 46, 0.12), 0 1px 18px 0 rgba(9, 25, 46, 0.1);
}

.elev8 {
    box-shadow: 0 5px 5px -3px rgba(9, 25, 46, 0.2), 0 8px 10px 1px rgba(9, 25, 46, 0.12), 0 3px 14px 2px rgba(9, 25, 46, 0.1);
}

.elev16 {
    box-shadow: 0 8px 10px -5px rgba(9, 25, 46, 0.2), 0 16px 24px 2px rgba(9, 25, 46, 0.12), 0 6px 30px 5px rgba(9, 25, 46, 0.1);
}

@media not all and (max-width: 800px) {
    .only-narrow {
        display: none !important;
    }
}

@media (max-width: 800px) {
    .only-wide {
        display: none !important;
    }
}