@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

@font-face {
  font-family: "Lucida Console";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  /* Браузер сначала попробует найти шрифт локально */
  src: local("Lucida Console"),
       /* Если не получилось, загрузит woff */
       url("../fonts/lucida-console.woff") format("woff"),
       /* Если браузер не поддерживает ttf, загрузит woff */
       url("../fonts/lucidaconsole.ttf") format("truetype");
}

:root {
  --global-line-height: 1.4em;
  --global-space: 10px;
/*  --bs-font-sans-serif: "Menlo", "Monaco", "lucidaconsole", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif;
  --bs-font-monospace: "Menlo", "Monaco", "lucidaconsole", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif;
  --font-color: #151515;*/
  --invert-font-color: #fff;
  --primary-color: #1a95e0;
  --secondary-color: #727578;
  --error-color: #d20962;
  --progress-bar-background: #727578;
  --progress-bar-fill: #151515;
  --code-bg-color: #e8eff2;
  --code-font-color: var(--font-color);
}

/* main & body */

main {
  min-height: calc(100vh - 150px );
  padding-bottom: 50px;}

body{
  /*background-color: #222;*/
  /*background: radial-gradient(circle, rgba(53,40,62,1) 3%, rgba(3,0,1,1) 100%);*/
  color: currentColor;
  background-position: center center;
  background-attachment: fixed;}

footer{
  position: sticky !important;
  margin: auto !important;
  border-top: 2px solid rgba(var(--bs-body-color-rgb), 0.15);
}

/* media requests */

@media (min-width: 768px) {
  .sm\:hidden {
    display: none !important;}
  .sm\:gap-0 {
    gap: 0 !important;}
}

@media (min-width: 992px) {
  .container, .container-lg, .container-md, .container-sm {
      max-width: 960px;}
  .md\:text-sm{
    font-size: .9rem !important;}
  .md\:hidden {
    display: none !important;}
}

@media (min-width: 1024px) {
  .lg\:grid {
    display: grid !important;}
  .lg\:text-sm {
   font-size: .875rem !important;
    line-height: 1.25rem !important;}
  .lg\:hidden {
    display: none !important;}
}

@media (min-width: 1280px) {
  .xl\:hidden {
    display: none !important;}
  .xl\:text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;}
}

@media (min-width: 1400px) {
  .xxl\:hidden {
    display: none !important;}
  .container {
    max-width: 1400px !important;}
  .lg\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;}
}

@media (max-width: 768px) {
  .sm-maxw\:hidden {
    display: none !important;}
}

@media (max-width: 992px) {
  .md-maxw\:hidden {
    display: none !important;}
  .terminal-timeline::before {display: none !important;}
  .terminal-timeline .terminal-card::before {display: none !important;}
  .terminal-timeline {
    position: relative !important;
    padding-left: 0px !important;}
}

@media (max-width: 1024px) {
  .lg-maxw\:hidden {
    display: none !important;}
}

@media (max-width: 1280px) {
  .xl-maxw\:hidden {
    display: none !important;}
  .notification{
    left: 50% !important;}
}

@media (max-width: 1400px) {
  .xxl-maxw\:hidden {
    display: none !important;}
  }
/* scrollbar */

*::-webkit-scrollbar{
  height: 10px;
  width: 10px;}

*::-webkit-scrollbar-track{
  border-radius: 0px;
  background-color: #27272A;}

*::-webkit-scrollbar-track:hover {
  background-color: #27272A;}

*::-webkit-scrollbar-track:active{
  background-color: #27272A;}

*::-webkit-scrollbar-thumb{
  border-radius: 20px;
  background-color: #71717A;}

*::-webkit-scrollbar-thumb:hover{
  background-color: #71717A;}

*::-webkit-scrollbar-thumb:active{
  background-color: #71717A;}

/* padding & margin */

.mb-12{
  margin-bottom: 3rem;}

.pt-10{
  padding-top: 2.5rem;}

.pt-12{
  padding-top: 3rem;}

.pb-12{
  padding-bottom: 3rem;}

.px-3\.5{
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;}

.py-18{
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;}

.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;}

.pt-24{
  padding-top: 6rem;}

.pb-24{
  padding-bottom: 6rem;}

.exp-down-4em{
  padding-top: 4em;}

.exp-down-3_5em{
  padding-top: 3.5em;}

.exp-down-2em{
  padding-top: 2em;}

.exp-up--2em{
  padding-top: -2em;}

.exp-up--4em{
  padding-top: -4em;}

/* width & height */

.w-full{
  width: 100%;}

.h-full{
  height: 100%;}

.w-1 {
  width: 0.25rem;}
  
.h-1 {
  height: 0.25rem;}

.w-4{
  width: 1rem;}

.h-4{
  height: 1rem;}

.w-4\.5{
  width: 1.125rem;}

.h-4\.5{
  height: 1.125rem;}

.w-5 {
  width: 1.250rem;}

.h-5 {
  height: 1.250rem;}

.w-5\.5{
  width: 1.375rem;}

.h-5\.5{
  height: 1.375rem;}

.w-6{
  width: 1.500rem;}

.h-6{
  height: 1.500rem;}

.w-6\.5{
  width: 1.625rem;}

.h-6\.5{
  height: 1.625rem;}

.w-7{
  width: 1.750rem;}

.h-7{
  height: 1.750rem;}

.w-7\.5{
  width: 1.875rem;}

.h-7\.5{
  height: 1.875rem;}

.w-8{
  width: 2rem;}

.h-8{
  height: 2rem;}

.h-18{
  height: 4.5rem;}

.max-w-xl{
  max-width: 36rem;}

.min-h-screen {
  min-height:var(--100vh)}

/* z-index */

.z-10{
  z-index: 10;}

.z-20{
  z-index: 20;}

.z-50{
  z-index: 50;}

/* display */

.grid{
  display: grid;}

.hidden {
  display: none;}

/* coloumns & rows */

.grid-rows-\[1fr_auto\] {
  grid-template-rows: 1fr auto;}

.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 2fr auto 2fr;}

.grid-flow-col {
  grid-auto-flow: column;}

/* position */

.sticky-nav{
  position: sticky;
  top: 5.5rem;}

.sticky-top{
  position: sticky;
  top: 0.5em;}

.fixed{
  position: fixed;}

.relative{
  position: relative;}

.absolute{
  position: absolute;}

/* gap */

.gap-3\.5 {
  gap: .875rem;}

/* colors */

.current-color{
  color: currentColor;}

.primary-color{
  color: var(--primary-color);}

.current-color-inv{
  color: rgba(var(--bs-secondary-bg-rgb), 1);}

.bg-current-color-inv{
  background-color: rgba(var(--bs-body-color-rgb), 1);}

.bg-purple-static{
  background-color: #9853FF;
}

.bg-gray-static{
  background-color: #888c90;}

.bg-purple{
  background-color: #9853FF;
}

.bg-purple:hover,
.bg-purple:focus{
  background-color: #a569ff;
}

.bg-purple:active{
  background-color: #864ae0;}

.bg-gray{
  background-color: #888c90;}

.bg-gray:hover,
.bg-gray:focus{
  background-color: #9ea3a8;}

.purple{
	color: #9853FF !important;
  /*color: #9560cc !important;*/}

.fill-white{
  color:white;}

.text-bg-pink{
  background: linear-gradient(360deg, rgb( 255, 163, 237 ) 15%, rgb(255, 118, 228) 85%);
  color: white;}

.bg-pink{
  color: #fff !important;
  background-color: RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1)) !important;}

/* font */

.font-pixelify_sans{
  font-family: 'Pixelify Sans', sans-serif;}

.font-inter{
  font-family: 'Inter', sans-serif;}

.font-manrope {
  font-family: 'Manrope', sans-serif;}

.font-lucida{
  font-family: 'Lucida Console', sans-serif;}

.font-extrabold{
  font-weight: 800;}

.font-bold{
  font-weight: 700;}

.font-semibold{
  font-weight: 600;}

.font-medium{
  font-weight: 500;}

.font-regular{
  font-weight: 400;}

.font-light{
  font-weight: 300;}

.font-extralight{
  font-weight: 200;}

/* align */
.text_center{
	text-align: center !important;
}
.text_right{
	text-align: right !important;
}
.text_left{
	text-align: left !important;
}

/* borders */

.rounded-full {
  border-radius: 9999px;}

.rounded-1rem {
  border-radius: 1rem !important;}

/* gallery carousel */

[data-bs-theme=dark] .carousel .carousel-control-next-icon, [data-bs-theme=dark] .carousel .carousel-control-prev-icon, [data-bs-theme=dark].carousel .carousel-control-next-icon, [data-bs-theme=dark].carousel .carousel-control-prev-icon {
  filter: invert(0) grayscale(100);}

/* svg & pictures */

.icon {
  position: relative;
  left: -.75rem;
  display: inline-block;
  padding: .375rem .75rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: .25rem 0 0 .25rem;}

.icon-svg{
  display: inline-flex;
  text-decoration: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align:middle;}

.icon-svg:hover{
  background-color: rgba(var(--bs-body-color-rgb), 0.25);
}

.button-border{
  display: inline-flex;
  text-decoration: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align:middle;}

.button-border:hover{
  background-color: rgba(var(--bs-body-color-rgb), 0.25);
  box-shadow: inset 0 0 0 2px rgba(var(--bs-body-color-rgb), 1);
  transition: 0.2s;
}

.main-icon-svg{
  display: inline-flex;
  text-decoration: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align:middle;
  fill: currentColor;}

/* menu */

.glass{
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  border-radius: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);*/}

.navigate{
  transition: 0.5s;}

.scrolled{
  /*background-color: rgba(var(--bs-tertiary-bg-rgb), 0.5);*/
  background-color: rgba(var(--bs-secondary-bg-rgb), 0.7);
  border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.15);
  transition: all 0.001s;
  }

.nav-tabs{
  border: 0;
  border-width: 0;}

.nav-item-hover{
  color: currentColor;
  text-decoration: inherit;}

.nav-item-hover:hover,
.nav-item-hover:focus,
.nav-item-hover:active{
  border-radius: 9999px;
  background-color: var(--bs-border-color);
  border-color: var(--bs-border-color);}

.dropdown-menu{
  border-radius: 0px !important;
  padding: 0 var(--bs-dropdown-padding-x) !important;}

.dropdown-item-static {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
}

/* buttons */

.avatar_btn{
  border-radius: 9999px;
}

.square-btn{
  border: 2px solid black;
  padding: 0.5rem;

  padding-right: .7rem !important;
  padding-left: .7rem !important;}

.square-btn:hover,
.square-btn:focus{
  border: 2px solid black;}

.square-btn:active{
  border: 2px solid rgba(var(--bs-body-color-rgb), 1);}

.square-btn-discord{
  border: 2px solid black;
  padding: 0.5rem;
  font-size: 1.2rem;
  padding-right: .7rem !important;
  padding-left: .3rem !important;
  background-color: #7289da;
}

.square-btn-discord:hover,
.square-btn-discord:focus{
  border: 2px solid black;
  background-color: #5e78d5;

}

.square-btn-discord:active{
  border: 2px solid rgba(var(--bs-body-color-rgb), 1);
  background-color: #3556ca;
}

.btn-rounded{
  border-color: transparent;
  border-radius: 10px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1.5rem;
  padding-left: 1.5rem;}

.purple-btn{
  background-color: #A17EC6;
  outline-color: RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1));}

.purple-btn:hover,
.purple-btn:focus,
.purple-btn:active{
  outline-color: #8B5DBC;
  background-color: #8B5DBC;
  color: white;}

.gray-btn{}

.gray-btn:hover,
.gray-btn:focus,
.gray-btn:active{
  background-color: #7B7B89;
  color: white;}

.btn-discord{
  background-color: #4752c4;
  color: white;
  text-decoration: none;}

.btn-discord:hover,
.btn-discord:focus,
.btn-discord:active{
  background-color: #7C96EA;
  border-radius: 9999px;
  border-color: #453c4a;}

.tg{
  background-color: #2AABEE !important;
  color: white !important;}

.tg:hover,
.tg:active,
.tg:focus{
  background-color: #229ED9 !important;
  color: white !important;}

.terminal-btn {
    border-style: solid;
    border-width: 1px;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    padding: 0.65em 2em;
    font-size: 1em;
    font-family: inherit;
    user-select: none;
    position: relative;
    z-index: 1;
}

.terminal-btn:active {
    box-shadow: none;
}

.terminal-btn.terminal-btn-ghost {
    border-color: var(--font-color);
    color: var(--font-color);
    background-color: transparent;
}

.terminal-btn.terminal-btn-ghost:focus,
.terminal-btn.terminal-btn-ghost:hover {
    border-color: var(--tertiary-color);
    color: var(--tertiary-color);
    z-index: 2;
}

.terminal-btn.btn-ghost:hover {
    background-color: transparent;
}

.terminal-btn-block {
    width: 100%;
    display: flex;
}

.terminal-btn-default {
    background-color: var(--font-color);
    border-color: var(--invert-font-color);
    color: var(--invert-font-color);
}

.terminal-btn-default:hover,
.terminal-btn-default:focus:not(.terminal-btn-ghost) {
    background-color: var(--secondary-color);
    color: var(--invert-font-color);
}

.terminal-btn-default.terminal-btn-ghost:focus,
.terminal-btn-default.terminal-btn-ghost:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    z-index: 2;
}

.terminal-btn-error {
    color: var(--invert-font-color);
    background-color: var(--error-color);
    border: 1px solid var(--error-color);
}

.terminal-btn-error:hover,
.terminal-btn-error:focus:not(.terminal-btn-ghost) {
    background-color: var(--error-color);
    border-color: var(--error-color);
}

.terminal-btn-error.terminal-btn-ghost {
    border-color: var(--error-color);
    color: var(--error-color);
}

.terminal-btn-error.terminal-btn-ghost:focus,
.terminal-btn-error.terminal-btn-ghost:hover {
    border-color: var(--error-color);
    color: var(--error-color);
    z-index: 2;
}

.terminal-btn-primary {
    color: var(--invert-font-color);
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.terminal-btn-primary:hover,
.terminal-btn-primary:focus:not(.terminal-btn-ghost) {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.terminal-btn-primary.terminal-btn-ghost {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.terminal-btn-primary.terminal-btn-ghost:focus,
.terminal-btn-primary.terminal-btn-ghost:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    z-index: 2;
}

.terminal-btn-small {
    padding: 0.5em 1.3em !important;
    font-size: 0.9em !important;
}

.terminal-btn-group {
    overflow: auto;
}

.terminal-btn-group .terminal-btn {
    float: left;
}

.terminal-btn-group .terminal-btn-ghost:not(:first-child) {
    margin-left: -1px;
}

/* items position */

.items-center{
  align-items: center;}

.place-items-center {
  place-items: center;}

/* modal */

.modal-content {
  border-radius: 0rem !important;
  border: 2px solid rgba(var(--bs-body-color-rgb), 1) !important;}

/* animation */

.smooth-animation {
  opacity: 0;
  /*transform: translateY(20px);*/
  transition: opacity 0.75s ease-out, transform 0.75s ease-out;}

.smooth-animation.visible {
  opacity: 1;
  transform: translateY(0);}

.notification {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: rgba(var(--bs-secondary-bg-rgb), 0.7);
    color: currentColor;
    text-align: center;
    vertical-align:middle
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    bottom: 10px;
    font-size: 1.4rem;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s, visibility 0.5s;
    box-shadow: inset 0 0 0 2px rgba(var(--bs-body-color-rgb), 1);
    left: 90%;
}

.notification.show {
    visibility: visible;
    opacity: 1;
    bottom: 30px;}

.notification.hide {
    visibility: hidden;
    opacity: 0;
    bottom: 10px;}

.transition-0-4{
  transition: 0.4s;}

/* other */

.inset-0{
  inset: 0;}

.opacity-50{
  opacity: .5;}

.text-decoration-none{
  text-decoration: none;}

.list-decoration {
  list-style-type: none;
  /* Убираем маркеры */
}

.top-30 {
  top: 30% !important;}

/* DOCS */

#_1, #_2, #_3, #_4, #_5, #_5-1, #_5-2 {
  scroll-margin-block-start: 4rem; 
}

.nav_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav_list li,
li>ul>li {
    position: relative;
    display: block;
    padding-left: calc(var(--global-space) * 2);
}

a {
    color: inherit;
    text-decoration: inherit;
}

.page_link.active{
  background: rgba(var(--bs-body-color-rgb), 1);
  color: rgba(var(--bs-secondary-bg-rgb), 1);
}

.page_link.active::before{
  content: "> ";
}

.terminal-prompt {
    white-space: nowrap;
}

.terminal-prompt::before {
    content: "> ";
}

.terminal-prompt::after {
    content: "";
    display: inline-block;
    position: relative;
    height: 1em;
    margin-left: 0.2em;
    width: 4px;
    bottom: -2px;
    animation: 1200ms ease 0s infinite normal none running cursor;
    background: var(--primary-color);
    border-radius: 0px;
    z-index: -1;
}

.terminal-alert {
    color: var(--primary-color);
    padding: 1em;
    border: 1px solid var(--primary-color);
    margin-bottom: var(--global-space);
}

.terminal-alert-error {
    color: var(--error-color);
    border-color: var(--error-color);
}

.terminal-alert-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

@keyframes cursor {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes cursor {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

code {
    font-weight: inherit;
    background-color: var(--code-bg-color);
    font-family: var(--mono-font-stack);
}

code::after,
code::before {
    content: "`";
    display: inline;
}

pre code::after,
pre code::before {
    content: "";
}

pre {
    display: block;
    word-break: break-all;
    word-wrap: break-word;
    color: var(--secondary-color);
    background-color: var(--block-background-color);
    border: 1px solid var(--secondary-color);
    padding: var(--global-space);
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
}

pre code {
    /*overflow-x: scroll;*/
    padding: 0;
    margin: 0;
    display: inline-block;
    min-width: 100%;
    font-family: var(--mono-font-stack);
    /*background-color: var(--block-background-color);*/
}

/* timeline*/

.terminal-card {
    border: 1px solid var(--secondary-color);
}

.terminal-card>header {
    color: var(--invert-font-color);
    text-align: center;
    /*background-color: var(--secondary-color)*/;
    padding: 0.5em 0;
}

.terminal-card>div:first-of-type {
    padding: var(--global-space);
}

.terminal-timeline {
    position: relative;
    padding-left: 70px;
}

.terminal-timeline::before {
    content: ' ';
    background: var(--secondary-color);
    display: inline-block;
    position: absolute;
    left: 35px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

.terminal-timeline .terminal-card {
    margin-bottom: 25px;
}

.terminal-timeline .terminal-card::before {
    content: ' ';
    background: var(--invert-font-color);
    border: 2px solid var(--secondary-color);
    display: inline-block;
    position: absolute;
    margin-top: 25px;
    left: 28px;
    width: 15px;
    height: 15px;
    z-index: 400;
}

hr {
    position: relative;
    overflow: hidden;
    margin: calc(var(--global-space)* 4) 0;
    border: 0;
    border-bottom: 1px dashed var(--secondary-color);
}

.link {
    cursor: pointer;
    color: var(--primary-color);
    text-decoration: none;
}

.link:hover {
    background-color: var(--primary-color);
    color: var(--invert-font-color);
}

figure {
    margin: 0;
}

figure>figcaption {
    color: var(--secondary-color);
    /*text-align: center;*/
}

img {
    max-width: 100%;
}

.offcanvas.offcanvas-end {

    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%), 0.02s;
}
.offcanvas {
    position: fixed;
    top: 10% !important;
    bottom: 10% !important;
    left: 10%;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 85%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
}

.square-dropdown{}