@font-face{
    font-family:"Lilita One";
    font-style:normal;
    font-weight:400;
    font-display:auto;
    src:url("../fonts/lilitaonerus.ttf") format('truetype');
}

:root{
    --font-jetbarins-mono: JetBrains Mono, "sans-serif";
    --font-lilitaone: Lilita One, "sans-serif";
    --color-danger: #c13b2b;
    --color-success: #60a678;
}

.font-sans-serif {
    font-family: var(--bs-font-sans-serif) !important;
}

html{
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:transparent
}
body, html{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
body{
    background-color: #121212;
    font-family: var(--bs-font-sans-serif);
    scroll-padding-bottom: 50vh;
    color: #ccbeb1;
}

a:link, a:visited{
    text-decoration:none;
    color: #717171;
}
a:hover{
    color: #ddcfc1;
}
header{
    position:fixed;
    top:0;
    left:0;
    z-index:1000
}
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    background: #000;
    background: 
        radial-gradient(2px 2px at 20% 30%, #fff, transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 60% 10%, #fff, transparent),
        radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 90% 80%, #fff, transparent),
        radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 30% 90%, #fff, transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 50% 50%, #fff, transparent),
        radial-gradient(1px 1px at 25% 80%, rgba(255,255,255,0.9), transparent),
        radial-gradient(ellipse at center, rgba(29, 39, 54, 0.8) 0%, rgba(16, 20, 40, 0.9) 40%, rgba(6, 9, 23, 1) 100%);
    background-size: 
        550px 550px, 
        350px 350px, 
        250px 250px, 
        400px 400px, 
        300px 300px,
        200px 200px,
        450px 450px,
        380px 380px,
        280px 280px,
        320px 320px,
        100% 100%;
    animation: starfield 120s linear infinite;
    position: relative;
    overflow: hidden;
}

/* Анимация звёздного поля */
@keyframes starfield {
    0% {
        background-position: 
            0% 0%, 
            0% 0%, 
            0% 0%, 
            0% 0%, 
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%,
            0% 0%;
    }
    100% {
        background-position: 
            -550px -550px, 
            350px -350px, 
            -250px 250px, 
            400px -400px, 
            -300px 300px,
            200px -200px,
            -450px 450px,
            380px -380px,
            -280px 280px,
            320px -320px,
            0% 0%;
    }
}

/* Дополнительный слой с туманностями */
main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 25% 25%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(30, 144, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, rgba(75, 0, 130, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 10% 80%, rgba(148, 0, 211, 0.1) 0%, transparent 45%);
    animation: nebula 80s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes nebula {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: rotate(180deg) scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.3;
    }
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

.stroke-1{
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
}
.stroke-2{
    -webkit-text-stroke-width: 2px;
    text-stroke-width: 2px;
}
.stroke-brown{
    -webkit-text-stroke-color: #3B0F05;
    text-stroke-color: #3B0F05;
}

.text-stroke.light{
    -webkit-text-stroke: 1px #3B0F05;
    text-stroke: 1px #3B0F05;
}
.text-stroke{
    -webkit-text-stroke: 2px #3B0F05;
    text-stroke: 2px #3B0F05;
}

input.danger-placeholder::placeholder{
    color: #e14723 !important;
}


.max-w-screen-sm{
    width: 100%;
    max-width: var(--bs-breakpoint-sm);
}
.max-w-screen-md{
    width: 100%;
    max-width: var(--bs-breakpoint-md);
}
.max-w-screen-lg{
    width: 100%;
    max-width: var(--bs-breakpoint-lg);
}


.fw-100{
    font-weight:100!important
}
.fw-200{
    font-weight:200!important
}
.fw-300{
    font-weight:300!important
}
.fw-400{
    font-weight:400!important
}
.fw-500{
    font-weight:500!important
}
.fw-600{
    font-weight:600!important
}
.fw-700{
    font-weight:700!important
}
.fw-800{
    font-weight:800!important
}
.fw-900{
    font-weight:900!important
}
.fs-8 {
    font-size: calc(0.5rem + 0.2vw) !important;
}

.fs-9 {
    font-size: calc(0.5625rem + 0.2vw) !important;
}

.fs-10 {
    font-size: calc(0.625rem + 0.2vw) !important;
}

.fs-11 {
    font-size: calc(0.6875rem + 0.2vw) !important;
}

.fs-12 {
    font-size: calc(0.75rem + 0.2vw) !important;
}

.fs-13 {
    font-size: calc(0.8125rem + 0.2vw) !important;
}

.fs-14 {
    font-size: calc(0.875rem + 0.2vw) !important;
}

.fs-15 {
    font-size: calc(0.9375rem + 0.2vw) !important;
}

.fs-16 {
    font-size: calc(1rem + 0.2vw) !important;
}

.fs-17 {
    font-size: calc(1.0625rem + 0.2vw) !important;
}

.fs-18 {
    font-size: calc(1.125rem + 0.2vw) !important;
}

.fs-19 {
    font-size: calc(1.1875rem + 0.2vw) !important;
}

.fs-20 {
    font-size: calc(1.25rem + 0.2vw) !important;
}
.fs-21 {
    font-size: calc(1.32rem + 0.2vw) !important;
}
.fs-22 {
    font-size: calc(1.385rem + 0.2vw) !important;
}

.text-xs{
    font-size: .5rem !important;
}
.text-sm{
    font-size: .75rem !important;
}
.text-md{
    font-size: 1rem !important;
}
.text-lg{
    font-size: 1.25rem !important;
}
.text-xl{
    font-size: 1.5rem !important;
}
.text-2xl{
    font-size: 1.75rem !important;
}
.text-3xl{
    font-size: 2rem !important;
}
.text-4xl{
    font-size: 2.25rem !important;
}
.text-5xl{
    font-size: 2.5rem !important;
}
.text-6xl{
    font-size: 2.75rem !important;
}
.text-7xl{
    font-size: 3rem !important;
}

.btn-brown{
    --bs-btn-color: #fff;
    --bs-btn-bg: #62341D;
    --bs-btn-border-color: #62341D;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #884A2B;
    --bs-btn-hover-border-color: #7e4326;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7e4326;
    --bs-btn-active-border-color: #6e3a20;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.btn-cstm-danger{
    --bs-btn-color: #fff;
    --bs-btn-bg: #D73343;
    --bs-btn-border-color: #D73343;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #df3444;
    --bs-btn-hover-border-color: #ee3647;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #D73343;
    --bs-btn-active-border-color: #ba2c39;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.btn-orange{
    --bs-btn-color: #fff;
    --bs-btn-bg: #FF7B00;
    --bs-btn-border-color: #FF7B00;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #FF9531;
    --bs-btn-hover-border-color: #FF9531;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #FF9531;
    --bs-btn-active-border-color: #FF9531;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.btn-custom-success{
    --bs-btn-color: #d0c9b9;
    --bs-btn-bg: #376447;
    --bs-btn-hover-bg: #386f4b;
    --bs-btn-hover-border-color: #386f4b;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-bg: #386f4b;
    --bs-btn-active-border-color: #386f4b;
    --bs-btn-border-radius: 14px;
}
.btn-custom-primary{
    --bs-btn-color: #fff;
    --bs-btn-bg: #3F51B5;
    --bs-btn-border-color: #4659c5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4659c5;
    --bs-btn-hover-border-color: #4659c5;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4659c5;
    --bs-btn-active-border-color: #4659c5;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #253069;
    --bs-btn-disabled-border-color: #253069;
    --bs-btn-border-radius: 14px;
}

.custom-input-field{
    padding: .5rem .75rem;
    border-radius: 14px;
    border: 1px solid #373737;
    background: #1d1f1e;
    color: #fff;
}
.custom-input-field:focus-visible{
    outline: none;
}
.text-custom-danger{
    --bs-text-opacity: 1;
    color: var(--color-danger) !important;
}
.text-custom-success{
    --bs-text-opacity: 1;
    color: var(--color-success) !important;
}
.bg-custom-danger{
    --bs-bg-opacity: 1;
    background-color: var(--color-danger) !important;
}
.bg-custom-success{
    --bs-bg-opacity: 1;
    background-color: var(--color-success) !important;
}