@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 700;
    src: url(/fonts/Inter-BoldItalic.eot);
    src: local("Inter Bold Italic"), local("Inter-BoldItalic"), url(/fonts/Inter-BoldItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-BoldItalic.woff2) format("woff2"), url(/fonts/Inter-BoldItalic.woff) format("woff"), url(/fonts/Inter-BoldItalic.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 500;
    src: url(/fonts/Inter-MediumItalic.eot);
    src: local("Inter Medium Italic"), local("Inter-MediumItalic"), url(/fonts/Inter-MediumItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-MediumItalic.woff2) format("woff2"), url(/fonts/Inter-MediumItalic.woff) format("woff"), url(/fonts/Inter-MediumItalic.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100;
    src: url(/fonts/Inter-ThinItalicBETA.eot);
    src: local("Inter Thin Italic BETA"), local("Inter-ThinItalicBETA"), url(/fonts/Inter-ThinItalicBETA.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-ThinItalicBETA.woff2) format("woff2"), url(/fonts/Inter-ThinItalicBETA.woff) format("woff"), url(/fonts/Inter-ThinItalicBETA.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/Inter-Regular.eot);
    src: local("Inter Regular"), local("Inter-Regular"), url(/fonts/Inter-Regular.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-Regular.woff2) format("woff2"), url(/fonts/Inter-Regular.woff) format("woff"), url(/fonts/Inter-Regular.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/Inter-Black.eot);
    src: local("Inter Black"), local("Inter-Black"), url(/fonts/Inter-Black.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-Black.woff2) format("woff2"), url(/fonts/Inter-Black.woff) format("woff"), url(/fonts/Inter-Black.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 900;
    src: url(/fonts/Inter-BlackItalic.eot);
    src: local("Inter Black Italic"), local("Inter-BlackItalic"), url(/fonts/Inter-BlackItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-BlackItalic.woff2) format("woff2"), url(/fonts/Inter-BlackItalic.woff) format("woff"), url(/fonts/Inter-BlackItalic.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/Inter-LightBETA.eot);
    src: local("Inter Light BETA"), local("Inter-LightBETA"), url(/fonts/Inter-LightBETA.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-LightBETA.woff2) format("woff2"), url(/fonts/Inter-LightBETA.woff) format("woff"), url(/fonts/Inter-LightBETA.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/Inter-SemiBold.eot);
    src: local("Inter Semi Bold"), local("Inter-SemiBold"), url(/fonts/Inter-SemiBold.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-SemiBold.woff2) format("woff2"), url(/fonts/Inter-SemiBold.woff) format("woff"), url(/fonts/Inter-SemiBold.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 800;
    src: url(/fonts/Inter-ExtraBoldItalic.eot);
    src: local("Inter Extra Bold Italic"), local("Inter-ExtraBoldItalic"), url(/fonts/Inter-ExtraBoldItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-ExtraBoldItalic.woff2) format("woff2"), url(/fonts/Inter-ExtraBoldItalic.woff) format("woff"), url(/fonts/Inter-ExtraBoldItalic.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/Inter-Bold.eot);
    src: local("Inter Bold"), local("Inter-Bold"), url(/fonts/Inter-Bold.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-Bold.woff2) format("woff2"), url(/fonts/Inter-Bold.woff) format("woff"), url(/fonts/Inter-Bold.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 200;
    src: url(/fonts/Inter-ExtraLightItalicBETA.eot);
    src: local("Inter Extra Light Italic BETA"), local("Inter-ExtraLightItalicBETA"), url(/fonts/Inter-ExtraLightItalicBETA.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-ExtraLightItalicBETA.woff2) format("woff2"), url(/fonts/Inter-ExtraLightItalicBETA.woff) format("woff"), url(/fonts/Inter-ExtraLightItalicBETA.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 200;
    src: url(/fonts/Inter-ExtraLightBETA.eot);
    src: local("Inter Extra Light BETA"), local("Inter-ExtraLightBETA"), url(/fonts/Inter-ExtraLightBETA.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-ExtraLightBETA.woff2) format("woff2"), url(/fonts/Inter-ExtraLightBETA.woff) format("woff"), url(/fonts/Inter-ExtraLightBETA.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 800;
    src: url(/fonts/Inter-ExtraBold.eot);
    src: local("Inter Extra Bold"), local("Inter-ExtraBold"), url(/fonts/Inter-ExtraBold.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-ExtraBold.woff2) format("woff2"), url(/fonts/Inter-ExtraBold.woff) format("woff"), url(/fonts/Inter-ExtraBold.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100;
    src: url(/fonts/Inter-ThinBETA.eot);
    src: local("Inter Thin BETA"), local("Inter-ThinBETA"), url(/fonts/Inter-ThinBETA.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-ThinBETA.woff2) format("woff2"), url(/fonts/Inter-ThinBETA.woff) format("woff"), url(/fonts/Inter-ThinBETA.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 300;
    src: url(/fonts/Inter-LightItalicBETA.eot);
    src: local("Inter Light Italic BETA"), local("Inter-LightItalicBETA"), url(/fonts/Inter-LightItalicBETA.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-LightItalicBETA.woff2) format("woff2"), url(/fonts/Inter-LightItalicBETA.woff) format("woff"), url(/fonts/Inter-LightItalicBETA.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 400;
    src: url(/fonts/Inter-Italic.eot);
    src: local("Inter Italic"), local("Inter-Italic"), url(/fonts/Inter-Italic.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-Italic.woff2) format("woff2"), url(/fonts/Inter-Italic.woff) format("woff"), url(/fonts/Inter-Italic.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 600;
    src: url(/fonts/Inter-SemiBoldItalic.eot);
    src: local("Inter Semi Bold Italic"), local("Inter-SemiBoldItalic"), url(/fonts/Inter-SemiBoldItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-SemiBoldItalic.woff2) format("woff2"), url(/fonts/Inter-SemiBoldItalic.woff) format("woff"), url(/fonts/Inter-SemiBoldItalic.ttf) format("truetype")
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/Inter-Medium.eot);
    src: local("Inter Medium"), local("Inter-Medium"), url(/fonts/Inter-Medium.eot?#iefix) format("embedded-opentype"), url(/fonts/Inter-Medium.woff2) format("woff2"), url(/fonts/Inter-Medium.woff) format("woff"), url(/fonts/Inter-Medium.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/AtypDisplay-Regular.eot);
    src: local("Atyp Display"), local("AtypDisplay-Regular"), url(/fonts/AtypDisplay-Regular.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-Regular.woff2) format("woff2"), url(/fonts/AtypDisplay-Regular.woff) format("woff"), url(/fonts/AtypDisplay-Regular.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: italic;
    font-weight: 100;
    src: url(/fonts/AtypDisplay-ThinItalic.eot);
    src: local("Atyp Display Thin Italic"), local("AtypDisplay-ThinItalic"), url(/fonts/AtypDisplay-ThinItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-ThinItalic.woff2) format("woff2"), url(/fonts/AtypDisplay-ThinItalic.woff) format("woff"), url(/fonts/AtypDisplay-ThinItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/AtypDisplay-Semibold.eot);
    src: local("Atyp Display Semibold"), local("AtypDisplay-Semibold"), url(/fonts/AtypDisplay-Semibold.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-Semibold.woff2) format("woff2"), url(/fonts/AtypDisplay-Semibold.woff) format("woff"), url(/fonts/AtypDisplay-Semibold.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: italic;
    font-weight: 700;
    src: url(/fonts/AtypDisplay-BoldItalic.eot);
    src: local("Atyp Display Bold Italic"), local("AtypDisplay-BoldItalic"), url(/fonts/AtypDisplay-BoldItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-BoldItalic.woff2) format("woff2"), url(/fonts/AtypDisplay-BoldItalic.woff) format("woff"), url(/fonts/AtypDisplay-BoldItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: normal;
    font-weight: 100;
    src: url(/fonts/AtypDisplay-Thin.eot);
    src: local("Atyp Display Thin"), local("AtypDisplay-Thin"), url(/fonts/AtypDisplay-Thin.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-Thin.woff2) format("woff2"), url(/fonts/AtypDisplay-Thin.woff) format("woff"), url(/fonts/AtypDisplay-Thin.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: italic;
    font-weight: 700;
    src: url(/fonts/AtypText-BoldItalic.eot);
    src: local("Atyp Text Bold Italic"), local("AtypText-BoldItalic"), url(/fonts/AtypText-BoldItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-BoldItalic.woff2) format("woff2"), url(/fonts/AtypText-BoldItalic.woff) format("woff"), url(/fonts/AtypText-BoldItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: italic;
    font-weight: 400;
    src: url(/fonts/AtypDisplay-Italic.eot);
    src: local("Atyp Display Italic"), local("AtypDisplay-Italic"), url(/fonts/AtypDisplay-Italic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-Italic.woff2) format("woff2"), url(/fonts/AtypDisplay-Italic.woff) format("woff"), url(/fonts/AtypDisplay-Italic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: italic;
    font-weight: 600;
    src: url(/fonts/AtypDisplay-SemiboldItalic.eot);
    src: local("Atyp Display Semibold Italic"), local("AtypDisplay-SemiboldItalic"), url(/fonts/AtypDisplay-SemiboldItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-SemiboldItalic.woff2) format("woff2"), url(/fonts/AtypDisplay-SemiboldItalic.woff) format("woff"), url(/fonts/AtypDisplay-SemiboldItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/AtypDisplay-Light.eot);
    src: local("Atyp Display Light"), local("AtypDisplay-Light"), url(/fonts/AtypDisplay-Light.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-Light.woff2) format("woff2"), url(/fonts/AtypDisplay-Light.woff) format("woff"), url(/fonts/AtypDisplay-Light.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/AtypDisplay-Medium.eot);
    src: local("Atyp Display Medium"), local("AtypDisplay-Medium"), url(/fonts/AtypDisplay-Medium.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-Medium.woff2) format("woff2"), url(/fonts/AtypDisplay-Medium.woff) format("woff"), url(/fonts/AtypDisplay-Medium.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: italic;
    font-weight: 300;
    src: url(/fonts/AtypDisplay-LightItalic.eot);
    src: local("Atyp Display Light Italic"), local("AtypDisplay-LightItalic"), url(/fonts/AtypDisplay-LightItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-LightItalic.woff2) format("woff2"), url(/fonts/AtypDisplay-LightItalic.woff) format("woff"), url(/fonts/AtypDisplay-LightItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/AtypText-Bold.eot);
    src: local("Atyp Text Bold"), local("AtypText-Bold"), url(/fonts/AtypText-Bold.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-Bold.woff2) format("woff2"), url(/fonts/AtypText-Bold.woff) format("woff"), url(/fonts/AtypText-Bold.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/AtypDisplay-Bold.eot);
    src: local("Atyp Display Bold"), local("AtypDisplay-Bold"), url(/fonts/AtypDisplay-Bold.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-Bold.woff2) format("woff2"), url(/fonts/AtypDisplay-Bold.woff) format("woff"), url(/fonts/AtypDisplay-Bold.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Display;
    font-style: italic;
    font-weight: 500;
    src: url(/fonts/AtypDisplay-MediumItalic.eot);
    src: local("Atyp Display Medium Italic"), local("AtypDisplay-MediumItalic"), url(/fonts/AtypDisplay-MediumItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypDisplay-MediumItalic.woff2) format("woff2"), url(/fonts/AtypDisplay-MediumItalic.woff) format("woff"), url(/fonts/AtypDisplay-MediumItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: normal;
    font-weight: 100;
    src: url(/fonts/AtypText-Thin.eot);
    src: local("Atyp Text Thin"), local("AtypText-Thin"), url(/fonts/AtypText-Thin.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-Thin.woff2) format("woff2"), url(/fonts/AtypText-Thin.woff) format("woff"), url(/fonts/AtypText-Thin.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Variable;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/AtypRegularVariable.eot);
    src: local("Atyp Variable"), local("AtypRegularVariable"), url(/fonts/AtypRegularVariable.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypRegularVariable.woff2) format("woff2"), url(/fonts/AtypRegularVariable.woff) format("woff"), url(/fonts/AtypRegularVariable.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: italic;
    font-weight: 400;
    src: url(/fonts/AtypText-Italic.eot);
    src: local("Atyp Text Italic"), local("AtypText-Italic"), url(/fonts/AtypText-Italic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-Italic.woff2) format("woff2"), url(/fonts/AtypText-Italic.woff) format("woff"), url(/fonts/AtypText-Italic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/AtypText-Semibold.eot);
    src: local("Atyp Text Semibold"), local("AtypText-Semibold"), url(/fonts/AtypText-Semibold.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-Semibold.woff2) format("woff2"), url(/fonts/AtypText-Semibold.woff) format("woff"), url(/fonts/AtypText-Semibold.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: italic;
    font-weight: 600;
    src: url(/fonts/AtypText-SemiboldItalic.eot);
    src: local("Atyp Text Semibold Italic"), local("AtypText-SemiboldItalic"), url(/fonts/AtypText-SemiboldItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-SemiboldItalic.woff2) format("woff2"), url(/fonts/AtypText-SemiboldItalic.woff) format("woff"), url(/fonts/AtypText-SemiboldItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/AtypText-Regular.eot);
    src: local("Atyp Text"), local("AtypText-Regular"), url(/fonts/AtypText-Regular.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-Regular.woff2) format("woff2"), url(/fonts/AtypText-Regular.woff) format("woff"), url(/fonts/AtypText-Regular.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: italic;
    font-weight: 500;
    src: url(/fonts/AtypText-MediumItalic.eot);
    src: local("Atyp Text Medium Italic"), local("AtypText-MediumItalic"), url(/fonts/AtypText-MediumItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-MediumItalic.woff2) format("woff2"), url(/fonts/AtypText-MediumItalic.woff) format("woff"), url(/fonts/AtypText-MediumItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/AtypText-Medium.eot);
    src: local("Atyp Text Medium"), local("AtypText-Medium"), url(/fonts/AtypText-Medium.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-Medium.woff2) format("woff2"), url(/fonts/AtypText-Medium.woff) format("woff"), url(/fonts/AtypText-Medium.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/AtypText-Light.eot);
    src: local("Atyp Text Light"), local("AtypText-Light"), url(/fonts/AtypText-Light.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-Light.woff2) format("woff2"), url(/fonts/AtypText-Light.woff) format("woff"), url(/fonts/AtypText-Light.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: italic;
    font-weight: 300;
    src: url(/fonts/AtypText-LightItalic.eot);
    src: local("Atyp Text Light Italic"), local("AtypText-LightItalic"), url(/fonts/AtypText-LightItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-LightItalic.woff2) format("woff2"), url(/fonts/AtypText-LightItalic.woff) format("woff"), url(/fonts/AtypText-LightItalic.ttf) format("truetype")
}

@font-face {
    font-family: Atyp Text;
    font-style: italic;
    font-weight: 100;
    src: url(/fonts/AtypText-ThinItalic.eot);
    src: local("Atyp Text Thin Italic"), local("AtypText-ThinItalic"), url(/fonts/AtypText-ThinItalic.eot?#iefix) format("embedded-opentype"), url(/fonts/AtypText-ThinItalic.woff2) format("woff2"), url(/fonts/AtypText-ThinItalic.woff) format("woff"), url(/fonts/AtypText-ThinItalic.ttf) format("truetype")
}

:root {
    /* Fonts */
    --fontfamily-primary: "Atyp Display";
    --fontfamily-second: "Inter";
    /* Background */
    --bg-page-primary: #020114;
    --bg-page-second: #050015;
    --bg-page-tertiary: #080413;
    --header-bg: #181928;
    --header-border: #30303e;
    --bg-section-dark: #181928;
    --bg-section-gray: #3a3c4b;
    --box-shadow: 0 0 4px 0 rgba(14, 15, 31, .12), 0 4px 24px 0 rgba(14, 15, 31, .6);
    --bg-primary: #7540ef;
    --bg-primary-dark: #000;
    --bg-secondary-item: #171928;
    --border-white-bg: #fff;
    --bg-primary-white: #fff;
    /* Text color */
    --text-color-white-first: #ffffff;
    --text-color-white: #fff;
    --text-color-gray: #57547B;
    --text-color-gray-light: #d3d2d6;
    --text-color-gray-two: #696573;
    --text-color-gray-dark: #FFFFFF30;
    --text-color-success: #78ef3a;
    --text-color-green-light: rgb(153, 234, 112);
    --text-color-green-dark: #449A19;
    --text-color-process: #fba705;
    --text-color-error: #ff2b5e;
    --text-color-blue: #2e95fe;
    --text-color-black: #000;
    --text-color-pink: #FB45FF;
    --text-color-purple: #7540ef;
    --text-color-light-purple: #8553f9;
    /* Background other */
    --bg-color-lime: #78E341;
    --bg-color-success: #99EA70;
    --bg-color-success-dark: #1f4642;
    --bg-color-process: #fba705;
    --bg-color-error: #FF2323;
    --bg-color-error-dark: #522136;
    --bg-color-error-blur: rgb(255 58 58 / 20%);
    --bg-color-blue: #2e95fe;
    --bg-color-success-opacity: rgb(93 199 40 / 25%);
    --bg-color-process-opacity: rgba(251, 167, 5, .25);
    --bg-color-error-opacity: rgba(255, 43, 94, .25);
    --bg-color-blue-opacity: rgba(46, 149, 254, .25);
    --bg-color-cobalt-light: #1E193B;
    --bg-color-cobalt-dark: #0F0A26;
    /* Input */
    --input-primary-bg: #050016;
    --input-primary-color: #fff;
    --input-primary-border: #231E3F;
    --input-primary-bg-hover: #242533;
    --input-primary-color-hover: #fff;
    --input-primary-border-hover: #fff;
    /* Buttons */
    /* Purple def */
    --btn-primary-bg: #7640F0;
    --btn-primary-border: #7640F0;
    --btn-primary-bg-hover: #5e33bf;
    --btn-primary-border-hover: #5e33bf;
    /* Purple light */
    --btn-primary-light-bg: #8761F4;
    --btn-primary-light-border: #8761F4;
    --btn-primary-light-bg-hover: #5e33bf;
    --btn-primary-light-border-hover: #5e33bf;
    /* Purple dark */
    --btn-primary-dark-bg: #7540f0;
    --btn-primary-dark-border: #7540f0;
    /* Dark */
    --btn-dark-bg: #0e0f1f;
    --btn-dark-border: #0e0f1f;
    --btn-dark-bg-hover: #212231;
    --btn-dark-border-hover: #fff;
    /* Gray */
    --btn-gray-bg: #130F2B;
    --btn-gray-border: #130F2B;
    --btn-gray-bg-hover: #181337;
    --btn-gray-border-hover: #181337;
    /* Red */
    --btn-red-bg: #FF2323;
    --btn-red-border: #FF2323;
    /* Gray light */
    --btn-gray-light-bg: #191439;
    --btn-gray-light-border: #191439;
    --btn-gray-light-bg-hover: #1b1541;
    --btn-gray-light-border-hover: #1b1541;
    /* Gray dark */
    --btn-gray-dark-border: #130F2B;
    --btn-gray-dark-bg: #130F2B;
    /* Cobalt */
    --btn-cobalt-dark-bg: #0F0A26;
    /* Button text color */
    --btn-color-white: #fff;
    --btn-color-border-white: #fff;
    --btn-color-primary: #7540ef;
    --btn-color-primary-light: #a077ff;
    /* Category */
    --category-primary-bg: #181928;
    --category-primary-color: #BFB3E5;
    --category-primary-border: #181928;
    --category-primary-btn-bg-active: #FFF;
    --category-primary-btn-border-active: #30303e;
    --category-primary-btn-color-active: #000;
    --category-secondary-bg: #0e0f1f;
    --category-secondary-color: #a0a0b5;
    --category-secondary-border: #3a3b48;
    --category-secondary-btn-bg-active: #30303e;
    --category-secondary-btn-border-active: #30303e;
    --category-secondary-btn-color-active: #fff;
    --appmenu-nav-slide-bg: hsla(0, 0%, 70%, .15);
    --main-color-flip: #0098EA;
}

*,
:after,
:before {
    box-sizing: border-box
}

section {
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 17px 15px;
}

section.section--nobackground {
    background: transparent
}

section.section--nopadding {
    padding: 0
}

section.section--inpage {
    position: relative;
}

section.section--inpage:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 1px;
    background: linear-gradient(180deg, #252040 0%, rgb(17 15 37 / 30%) 150%);
    border-radius: 20px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--text-color-white-first);
    font-family: var(--fontfamily-primary);
    font-weight: 500;
    margin: 0;
    padding: 0
}

h1 {
    font-size: 1.675rem;
}

h2 {
    font-size: 1.425rem;
}

h3 {
    font-size: 1.225rem;
}

h4 {
    font-size: 1.025rem
}

b {
    color: var(--text-color-light-purple);
    font-weight: 500
}

span {
    color: var(--text-color-white)
}

p,
span {
    padding: 0;
    margin: 0;
    font-size: 0.925rem;
    font-weight: 400;
}

p {
    color: var(--text-color-gray-light);
    line-height: 1.125rem;
    font-weight: 300;
}

strong {
    color: var(--text-color-white);
    line-height: 1.075rem;
    font-weight: 500;
}

q {
    position: relative;
    background: #0d0b1d;
    color: #ffffffba;
    line-height: 1.075rem;
    padding: 15px 15px;
    border-radius: 12px;
    font-size: 0.775rem;
    font-weight: 200;
}

q:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 70%;
    width: 1px;
    background: var(--bg-primary);
}

q:after {
    content: "";
    display: none;
}

ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    color: var(--text-color-gray-light);
    line-height: 1.075rem;
    font-weight: 300;
    padding: 0px;
    margin: 0;
}

ul.ul--number {
    gap: 16px;
    margin: 0;
    padding: 0
}

.ul--number li {
    counter-increment: numbers;
    padding-left: 30px;
    position: relative
}

.ul--number li:before {
    content: counter(numbers);
    font-family: var(--fontfamily-primary);
    color: var(--text-color-white);
    font-size: 24px;
    font-weight: 500;
    left: 0;
    position: absolute;
    top: 0;
    background: none;
    width: -moz-max-content;
    width: max-content;
    height: -moz-max-content;
    height: max-content;
}

li {
    position: relative;
    padding-left: 15px;
}

li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    background: var(--bg-primary);
    width: 5px;
    height: 5px;
    border-radius: 100%;
}

html {
    background: #0e101f;
    font-family: Inter;
    font-size: 15px
}

body,
html {
    margin: 0;
    padding: 0
}

body {
    background: var(--bg-page-primary);
    color: var(--text-color-white);
    font-size: 14px;
    font-weight: 400;
    overscroll-behavior: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
    touch-action: none;
    scrollbar-width: none;
    position: relative;
}

body:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--tg-safe-area-inset-top, 0px));
    width: 100%;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    z-index: 9999;
}

#app {
    position: relative;
    align-content: space-between;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    overscroll-behavior-y: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
    touch-action: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    background: var(--bg-page-primary);
}

.wrapper {
    position: relative;
    flex: 1 1 0%;
    overflow: auto;
    overscroll-behavior: none;
    scrollbar-width: none;
    /* position: relative; */
    padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
    padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 100px) !important;
    background: var(--bg-page-primary)
}

.wrapper__main {
    background: linear-gradient(180deg, #050016 80%, #000000 100%);
    flex: 1 1 0%;
    overflow: auto;
    overscroll-behavior: none;
    position: relative;
    scrollbar-width: none;
    padding: 20px 20px 20px;
    padding-top: calc(var(--tg-safe-area-inset-top, 10px) + var(--tg-content-safe-area-inset-top, 10px) + 5px);
    padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 100px) !important;
}

.wrapper__main:before {
    content: '';
    position: fixed;
    background-image: url(/img/main_menu-background.png);
    width: 100%;
    height: 250px;
    mix-blend-mode: overlay;
    background-repeat: no-repeat;
    left: 0;
    top: 0px;
    z-index: 0;
    opacity: 1;
}

.wrapper__page {
    background: linear-gradient(180deg, #000001, #0C071D 18%);
    height: 100%;
    overscroll-behavior: none;
    position: relative;
    scrollbar-width: none;
    touch-action: none;
    padding: 0px;
}

.wrapper__game {
    position: relative;
    background: linear-gradient(180deg, #000001, #0C071D 18%);
    flex: 1 1 0%;
    overflow: auto;
    overscroll-behavior: none;
    position: relative;
    scrollbar-width: none;
    padding: 0px 5px 0px;
    padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 15px);
    padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 100px) !important;
}

.wrapper__game:before {
    content: '';
    position: fixed;
    background-image: url(/img/main_menu-background.png);
    width: 100%;
    height: 240px;
    mix-blend-mode: overlay;
    background-repeat: no-repeat;
    left: 50px;
    bottom: 7%;
    z-index: 0;
    opacity: 0.8;
}

img {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

input,
textarea {
    margin: 0;
    outline: none;
    padding: 0;
    transition: all .2s ease 0s
}

input::-moz-placeholder {
    color: var(--text-color-gray)
}

input::placeholder {
    color: var(--text-color-gray)
}

.b-opacity-enter-active,
.b-opacity-leave-active {
    transition: opacity .2s ease
}

.b-opacity-enter-from,
.b-opacity-leave-to {
    opacity: 0
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.gradient-loader {
    position: relative
}

.gradient-loader:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: inherit;
    flex-shrink: 0;
    height: calc(100% + 2px);
    width: calc(100% + 2px);
    z-index: 11;
    background: linear-gradient(105deg, #130F2B 25%, #0B071D 50%, #130F2B 75%);
    background-size: 200% 100%;
    animation: slide-colors 1.5s infinite linear;
    will-change: background-position;
}

@keyframes color-shift {
    0% {
        background: var(--bg-section-dark);
    }
    100% {
        background: var(--bg-section-gray);
    }
}

@keyframes slide-colors {
    0% {
        background-position-x: 0%;
    }
    100% {
        background-position-x: 200%;
    }
}

#gigaAdFrame {
    padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 0px) !important;
}

iframe {
    padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 0px) !important;
}

#adsContainer svg,
#adsContainer button {
    top: calc(var(--tg-safe-area-inset-top, 10px) + var(--tg-content-safe-area-inset-top, 10px) + 20px) !important;
}

.ra-ti-header-wrapper {
    padding-top: calc(var(--tg-safe-area-inset-top, 5px) + var(--tg-content-safe-area-inset-top, 5px) + 0px) !important;
    transform: translateY(30px) !important;
}

.vast_player__vpaid-frame {
    padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 0px) !important;
}