@import "scroll.css";

@font-face {
    font-family: "Cinzel";
    src: url("/fonts/Cinzel-VariableFont_wght.ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Orbitron";
    src: url("/fonts/Orbitron-VariableFont_wght.ttf");
}

.font-orbitron {
    font-family: "Orbitron";
}

html, body {
  height: 100%;
}

body {
    font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    font-size: 1.05rem;
}

.box-shadow {
    box-shadow: var(--bs-box-shadow);
}

body {
    background-image: url(/images/christina-deravedisian-unsplash.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
[data-bs-theme="dark"] body {
    background-image: url(/images/andrew-kliatskyi.jpg);
}
.main-container {
    background-color: var(--cq-heavy-glass-surface);
    padding-top: .75rem;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow);
    backdrop-filter: var(--cq-blur-filter);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.navbar, footer {
    background-color: var(--cq-heavy-glass-surface);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    backdrop-filter: var(--cq-blur-filter);
}

.field-validation-error, .validation-summary-errors, .validation-message {
    color: var(--bs-danger-text-emphasis);
}

.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request .htmx-indicator-reverse {
    display: none;
}

#identyquant-logo {
    font-family: Cinzel;
    font-weight: 500;
    font-size: 1.5rem;
    &.big-logo {
        font-size: 2.3rem;
    }
}

#microsoft-icon {
    width: 1.33rem;
}

h1, h2 {
    font-family: Orbitron;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--bs-primary-text-emphasis);
}

[blazicon] {
    height: 1.1em;
    width: 1.1em;
}

.no-link-style {
    color: var(--bs-body-color);
    text-decoration: none;
}

.flex-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.33rem;
}

.avatar {
    border-radius: 50%;
    object-fit: cover;
}
.avatar-lg {
    width: 10rem;
    height: 10rem;
}
.avatar-sm {
    width: 2rem;
    height: 2rem;
}
.icon-selector {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    overflow-y: auto;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
    border: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-inset);
    align-items: stretch;
    justify-content: center;
    & > label {
        line-height: 2em;
        padding: .5rem;
        border-radius: var(--bs-border-radius);
        border: .2rem solid var(--bs-primary-border-subtle);
        & > svg {
            height: 2em;
            width: 2em;
        }
        &:has(input:checked) {
            background-color: var(--bs-primary);
            color: var(--bs-white);
            border-color: var(--bs-primary);
        }
    }
}