@font-face {
    font-family: "ALS Sirius Regular";
    src: url("/static/fonts/ALS_Sirius_Regular.otf");
    font-display: swap;
}

@font-face {
    font-family: "ALS Sirius Bold";
    src: url("/static/fonts/ALS_Sirius_Bold.otf");
    font-display: swap;
}

:root {
    --text_color: #333;
    --second_color: #646464;
    --blue: #6491F0;
    --light_blue: #91aeec;
    --medium_purple: #9370DB;
    --bg_navbar: white;
    --font_regular: "ALS Sirius Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font_bold: "ALS Sirius Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --default-time: 0.3s;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: var(--font_regular);
    color: var(--text_color);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.background {
    position: fixed;
    top: 93%;
    left: 33.33%;
    width: 255vh;
    transform: translate(-45%, -50%);
    pointer-events: none;
    z-index: -1;
}

a {
    color: var(--text_color);
    outline-style: none;
    -webkit-tap-highlight-color: transparent;
}

a, a:link, a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: var(--medium_purple);
}

::-webkit-scrollbar {
    overflow-y: scroll;
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-thumb {
    background: var(--medium_purple);
    height: 150px;
    border-radius: 5px;
}

::selection {
    background: var(--medium_purple);
    color: white;
    text-shadow: none;
}

.url {
    outline-style: none;
    color: var(--text_color);
    text-decoration: none;
}

.animate {
    transition: var(--default-time);
}

.animate:hover {
    transition: var(--default-time)
}

.animate::after {
    transition: var(--default-time)
}

.animate::before {
    transition: var(--default-time)
}

.animate:checked {
    transition: var(--default-time)
}

.notification {
    background-color: #FFFACD;
    padding: 1rem;
    border-radius: 5px;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.secolor {
    color: var(--second_color);
}

.opacity {
    opacity: 0.6;
    user-select: none;
}

/* Мобильные оптимизации */
@media (max-width: 768px) {
    .background {
        top: 100%;
        left: 50%;
        width: 200vh;
    }
}

@media (max-width: 480px) {
    .background {
        width: 150vh;
        opacity: 0.7;
    }

    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
}

/* Поддержка темной темы (если пользователь предпочитает) */
@media (prefers-color-scheme: dark) {
    /* Пока оставляем светлую тему, но можно добавить переключение */
}

/* Уменьшение движения для пользователей с vestibular disorders */
@media (prefers-reduced-motion: reduce) {
    .animate {
        transition: none;
    }

    .animate:hover {
        transition: none;
    }

    @keyframes slideDown {
        from, to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes wobble {
        from, to {
            transform: none;
        }
    }
}