@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: #333;
}
a:hover{
    color: #555;
}
header{
    position:fixed;
    top:0;
    left:0;
    z-index:1000
}
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    background: linear-gradient(145deg, #ff9500 0%, #ff7b00 100%);
    position: relative;
}

main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 149, 0, 0.03) 35px, rgba(255, 149, 0, 0.03) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255, 184, 77, 0.03) 35px, rgba(255, 184, 77, 0.03) 70px);
    pointer-events: none;
}

main::after {
    content: "₽";
    position: absolute;
    font-size: 200px;
    color: rgba(255, 149, 0, 0.05);
    top: 10%;
    right: 10%;
    font-weight: bold;
    pointer-events: none;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}
main [data-pagename]{
    height: 100%;
    padding: 3.5rem 1rem 1.5rem;
    position: relative;
    z-index: 1;
}

/* Декоративные монеты на фоне */
main [data-pagename]::before {
    content: "💰";
    position: absolute;
    font-size: 50px;
    opacity: 0.08;
    top: 20%;
    left: 5%;
    animation: rotate 10s linear infinite;
    pointer-events: none;
    z-index: 0;
}

main [data-pagename]::after {
    content: "💵";
    position: absolute;
    font-size: 40px;
    opacity: 0.08;
    bottom: 25%;
    right: 8%;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
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;
}