@font-face {
  font-family: "Rubik";
  src: url("./Rubik.ttf") format("truetype");
}

@font-face {
  font-family: "Fira Code";
  src: url("./FiraCode.ttf") format("truetype");
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
  --font-family: 'Rubik', sans-serif, 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;

  --black-rgb: 0, 0, 0;
  --black-hover-rgb: 10, 10, 10;
  --black-pressed-rgb: 0, 0, 0;
  --black-text-rgb: 255, 255, 255;
  --black-transparent-button-rgb: 0, 0, 0;

  --blue-rgb: 72, 92, 176;
  --blue-hover-rgb: 82, 102, 186;
  --blue-pressed-rgb: 62, 82, 166;
  --blue-text-rgb: 255, 255, 255;
  --blue-transparent-button-rgb: 72, 92, 176;

  --yellow-rgb: 243, 215, 75;
  --yellow-hover-rgb: 253, 225, 85;
  --yellow-pressed-rgb: 233, 205, 65;
  --yellow-text-rgb: 0, 0, 0;
  --yellow-transparent-button-rgb: 143, 115, 0;

  --red-rgb: 179, 39, 26;
  --red-hover-rgb: 189, 49, 36;
  --red-pressed-rgb: 169, 29, 16;
  --red-text-rgb: 255, 255, 255;
  --red-transparent-button-rgb: 179, 39, 26;

  --primary-rgb: 72, 92, 176;
  --primary-hover-rgb: 82, 102, 186;
  --primary-pressed-rgb: 62, 82, 166;
  --primary-text-rgb: 255, 255, 255;
  --primary-transparent-button-rgb: 72, 92, 176;

  --bg-rgb: 255, 255, 255;
  --text-rgb: 0, 0, 0;
  --muted-rgb: 68, 68, 68;
  --border-rgb: 221, 221, 221;
  --hover-rgb: 238, 238, 238;
  --pressed-rgb: 221, 221, 221;

  --code-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  --way-base-size: 350%;
  --way-base-degree: 0deg;
  --mouse-x-percentage: 50%;
  --mouse-y-percentage: 50%;
  --scroll-y-percentage: 50%;
  --scroll-y-degree: 0deg;

  --transition-duration: 0;

  --content-max-width: 1024px;
}

@media only screen and (max-width: 1100px) {
  :root {
    --content-max-width: 950px;
  }
}

@media only screen and (max-width: 1024px) {
  :root {
    --content-max-width: 900px;
  }
}

html.mobile {
  --way-base-size: 700%;
}

html.dark {
  --bg-rgb: 0, 0, 0;
  --text-rgb: 255, 255, 255;
  --muted-rgb: 153, 153, 153;
  --border-rgb: 34, 34, 34;
  --hover-rgb: 24, 24, 24;
  --pressed-rgb: 31, 31, 31;

  --code-shadow: 0 0 0 1px #333;
}

html.transitions {
  --transition-duration: 125ms;
}

html.dark img:not(.no-dark-shadow), html.dark svg:not(.no-dark-shadow), .image-dark-shadow {
  filter: drop-shadow(0 0 1px white);
}

.turbolinks-progress-bar {
  height: 0.25rem;
  background-color: rgb(var(--primary-rgb));
}

html, body {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background: rgb(var(--bg-rgb));
  color: rgb(var(--text-rgb));
  line-height: 1.25;
}

body {
  overflow-x: hidden;
}

pre, code {
  font-family: "Fira Code", monospace !important;
  font-weight: 500;
}

.hljs {
  background-color: black !important;
}

.hljs::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
}

.hljs::-webkit-scrollbar-track {
  background: black;
}

.hljs::-webkit-scrollbar-thumb {
  background: #5c6370;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
}

.hljs::-webkit-scrollbar-thumb:hover {
  background: #abb2bf;
}

.MavkaPage {
  min-height: 100%;
}

@keyframes skeleton {
  100% {
    transform: translateX(100%);
  }
}

.MavkaNotificationDesktop {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgb(var(--border-rgb));
  cursor: pointer;
  transition: all var(--transition-duration) ease-in-out;
  text-decoration: none;
  background: rgb(var(--bg-rgb));
  color: rgb(var(--text-rgb));
  font-size: 0.8rem;
  min-height: 44px;
  height: 44px;
  max-height: 44px;
}

.MavkaNotificationDesktopArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
}

.MavkaNotificationDesktopArrow svg {
  height: 1.25rem;
}

.MavkaNotificationDesktop.loading {
  pointer-events: none;
  cursor: default;
}

.MavkaNotificationDesktop.loading * {
  opacity: 0;
}

.MavkaNotificationDesktop.loading::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: translateX(-100%);
  background-image: linear-gradient(
      90deg,
      rgba(var(--border-rgb), 0) 0,
      rgba(var(--border-rgb), 0.2) 20%,
      rgba(var(--border-rgb), 0.5) 60%,
      rgba(var(--border-rgb), 0)
  );
  animation: skeleton 2s infinite;
}

.MavkaNotificationDesktop:not(.loading):hover {
  background: rgb(var(--hover-rgb));
}

.MavkaNotificationDesktop:not(.loading):active {
  background: rgb(var(--pressed-rgb));
}

.MavkaNotificationDesktopPrefix {
  margin-right: 0.5ch;
}

.MavkaNotificationDesktopText {
  font-weight: 500;
}

.MavkaNotificationMobile {
  position: relative;
  padding: 1rem 4rem 1rem 2rem;
  display: none;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid rgb(var(--border-rgb));
  border-bottom: 1px solid rgb(var(--border-rgb));
  cursor: pointer;
  transition: all var(--transition-duration) ease-in-out;
  text-decoration: none;
  background: rgb(var(--bg-rgb));
  color: rgb(var(--text-rgb));
}

.MavkaNotificationMobile:hover {
  background: rgb(var(--hover-rgb));
}

.MavkaNotificationMobile:active {
  background: rgb(var(--pressed-rgb));
}

.MavkaNotificationMobileHint {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.MavkaNotificationMobileText {
  font-weight: 500;
  font-size: 1.125rem;
}

.MavkaNotificationMobileButton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}

.MavkaNotificationMobile.loading {
  pointer-events: none;
  cursor: default;
  min-height: 102.6px;
}

.MavkaNotificationMobile.loading * {
  opacity: 0;
}

.MavkaNotificationMobile.loading::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: translateX(-100%);
  background-image: linear-gradient(
      90deg,
      rgba(var(--border-rgb), 0) 0,
      rgba(var(--border-rgb), 0.2) 20%,
      rgba(var(--border-rgb), 0.5) 60%,
      rgba(var(--border-rgb), 0)
  );
  animation: skeleton 2s infinite;
}

.MavkaNotificationMobile:not(.loading):hover {
  background: rgb(var(--hover-rgb));
}

.MavkaNotificationMobile:not(.loading):active {
  background: rgb(var(--pressed-rgb));
}

html.mobile {
  .MavkaNotificationDesktop {
    display: none;
  }

  .MavkaNotificationMobile {
    display: flex;
  }
}

.MavkaNavigationWrapper {
}

.MavkaNavigation {
  max-width: var(--content-max-width);
  margin: 1rem auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 80px;
}

html.mobile .MavkaNavigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
  height: 60px;
}

.MavkaNavigationLogo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  color: rgb(var(--text-rgb));
  text-decoration: none;
}

.MavkaNavigationLogo > img {
  margin-right: 1rem;
  width: 2rem;
  height: 2rem;
}

.MavkaNavigationLogoText {
  font-size: 1.4rem;
  font-weight: 500;
}

.MavkaNavigationLogoVersion {
  position: absolute;
  left: 120px;
  top: 0.25rem;
  font-size: 0.666rem;
}

html.mobile .MavkaNavigationLogo {
  flex-direction: row-reverse;
}

html.mobile .MavkaNavigationLogo > img {
  margin-right: 0;
  margin-left: 0.5rem;
}

html.mobile .MavkaNavigationLogoVersion {
  top: 1.5rem;
  left: unset;
  right: 40px;
}

.MavkaNavigationLinks {
  display: flex;
  align-items: center;
}

html.mobile .MavkaNavigationLinks {
  display: none;
}

.MavkaNavigationLink + .MavkaNavigationLink {
  margin-left: 1rem;
}

.MavkaNavigationLink {
  position: relative;
  font-size: 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgb(var(--text-rgb));
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: all var(--transition-duration) ease-in-out;
}

.MavkaNavigationLinkIcon {
  margin-right: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MavkaNavigationLinkIcon > img, .MavkaNavigationLinkIcon > svg {
  height: 1em;
}

.MavkaNavigationLink:hover {
  background: rgb(var(--hover-rgb));
}

.MavkaNavigationLink:active {
  background: rgb(var(--pressed-rgb));
}

.MavkaNavigationLink.icon-only .MavkaNavigationLinkIcon {
  margin-right: 0;
}

.MavkaNavigationLink.icon-only:not(.normal-size) .MavkaNavigationLinkIcon > img, .MavkaNavigationLink.icon-only:not(.normal-size) .MavkaNavigationLinkIcon > svg {
  height: 1.5rem;
}

.MavkaNavigationLink:not(.active) [data-close-icon=true] {
  display: none;
}

.MavkaNavigationLink.active [data-menu-icon=true] {
  display: none;
}

.MavkaNavigationMobileToggle {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  height: 60px;
  width: 60px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: rgba(var(--bg-rgb), 0.5);
  border: none;
  border-radius: 2px;
  background-image: radial-gradient(transparent 1px, rgb(var(--bg-rgb)) 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
  color: rgb(var(--text-rgb));
}

html.mobile .MavkaNavigationMobileToggle {
  display: flex;
}

.MavkaNavigationMobileToggle svg {
  width: 26px;
  height: 26px;
}

.MavkaNavigationMobileToggle:not(.active) [data-close-icon=true] {
  display: none;
}

.MavkaNavigationMobileToggle.active [data-menu-icon=true] {
  display: none;
}

.MavkaNavigationMobileMenu {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgb(var(--bg-rgb));
  color: rgb(var(--text-rgb));
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: calc(1rem + 60px + 1rem);
  padding-bottom: calc(1rem + 60px + 1rem);
  overflow: auto;
}

.MavkaNavigationMobileMenu[data-hidden=true] {
  display: none;
}

html:not(.mobile) .MavkaNavigationMobileMenu[data-hidden=false] {
  display: none;
}

.MavkaNavigationMobileMenuItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-decoration: none;
  background-color: rgb(var(--bg-rgb));
  color: rgb(var(--text-rgb));
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-size: 1rem;
}

.MavkaNavigationMobileMenuItemOptionalInnerWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.MavkaNavigationMobileMenuItemIcon {
  max-width: 4rem;
  height: 2rem;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

.MavkaNavigationMobileMenuItemName {
  display: flex;
  align-items: center;
  justify-content: center;
}

.MavkaNavigationMobileMenuItemRusted {
  margin-top: 0.1rem;
  font-size: 0.6rem;
  padding: 0.05rem 0.2rem;
  border-radius: 0.4rem;
  background: darkorange;
  color: black;
  font-weight: 600;
  display: flex;
  align-content: center;
  justify-content: center;

  &.yellow {
    background: yellow;
  }
}

.MavkaNavigationMobileMenuItemRusted svg {
  height: 0.6rem;
  margin-right: 0.25rem;
}

.MavkaNavigationMobileMenuItemBadge {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.4rem;
  background: rgb(var(--text-rgb));
  color: rgb(var(--bg-rgb));
  font-weight: 600;
  display: flex;
  align-content: center;
  justify-content: center;
}

.MavkaNavigationMobileMenuFooter {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 2.5rem;
  background: rgb(var(--bg-rgb));
  color: rgb(var(--muted-rgb));
  border-top: 1px solid rgb(var(--border-rgb));
  display: flex;
  align-items: center;
  justify-content: center;
}

.MavkaNavigationMobileMenuFooter img {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

.MavkaNavigationMobileMenuFooterConfigButton {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  background-color: rgb(var(--bg-rgb));
  color: rgb(var(--muted-rgb));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.MavkaNavigationMobileMenuFooterConfigButton svg {
  height: 1rem;
}

.MavkaNavigationMobileMenuFooterConfigButton:hover {
  background-color: rgb(var(--hover-rgb));
}

.MavkaNavigationMobileMenuFooterConfigButton:active {
  background-color: rgb(var(--pressed-rgb));
}

.MavkaNavigationMenu {
  position: fixed;
  z-index: 1001;
  top: calc(var(--menu-top) + 60px);
  left: calc(var(--menu-left) - 400px + 56px);
  background-color: rgb(var(--bg-rgb));
  box-shadow: var(--code-shadow);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 0.25rem;
  width: 400px;
  padding: 0.5rem;
  border-radius: 1rem;
  animation: menu-open var(--transition-duration) ease-in-out;
  transform-origin: top right;
}

@keyframes menu-open {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.MavkaNavigationMenu[data-hidden=true] {
  display: none;
}

.MavkaNavigationMenuItem {
  text-decoration: none !important;
  display: flex;
  border: none;
  border-radius: 1rem;
  color: rgb(var(--text-rgb));
  background: transparent;
  font-size: 1rem;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 400;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all var(--transition-duration) ease-in-out;
}

.MavkaNavigationMenuItemOptionalInnerWrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.MavkaNavigationMenuItemIcon {
  max-width: 4rem;
  height: 2rem;
  margin-bottom: 0.5rem;
  margin-right: 0;
}

.MavkaNavigationMenuItemBadge {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.4rem;
  background: rgb(var(--text-rgb));
  color: rgb(var(--bg-rgb));
  font-weight: 600;
  display: flex;
  align-content: center;
  justify-content: center;
}

.MavkaNavigationMenuItemRusted {
  margin-top: 0.1rem;
  font-size: 0.6rem;
  padding: 0.05rem 0.2rem;
  border-radius: 0.4rem;
  background: darkorange;
  color: black;
  font-weight: 600;
  display: flex;
  align-content: center;
  justify-content: center;

  &.yellow {
    background: yellow;
  }
}

.MavkaNavigationMenuItemRusted svg {
  height: 0.6rem;
  margin-right: 0.25rem;
}

.MavkaNavigationMenuItem:hover {
  background-color: rgb(var(--hover-rgb));
}

.MavkaNavigationMenuItem:active {
  background-color: rgb(var(--pressed-rgb));
}

.MavkaHomeHero {
  max-width: var(--content-max-width);
  margin: 1rem auto;
  position: relative;
  margin-top: 50px;
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4rem;
}

html.mobile .MavkaHomeHero {
  margin-top: 0;
  padding-top: 0;
  grid-gap: 0;
}

.MavkaHomeHeroLeft {
  margin-top: -1rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.MavkaHomeHeroTitle {
  margin: 0;

  font-size: 2.6em;
  font-weight: 600;
  line-height: 1.125;
  z-index: 1;
  text-align: center;

  max-width: 15ch;
}

.MavkaHomeHeroSubtitle {
  margin: 0;
  margin-top: 1.5rem;

  font-size: 1.125rem;
  line-height: 1.25;
  color: rgb(var(--muted-rgb));

  max-width: 33ch;
  z-index: 1;

  font-weight: 300;
  text-align: center;
}

html.mobile .MavkaHomeHeroLeft {
  margin-top: 2rem;
  align-items: flex-start;
}

html.mobile .MavkaHomeHeroTitle {
  text-align: left;
}

html.mobile .MavkaHomeHeroSubtitle {
  text-align: left;
}

.MavkaHomeHeroButtons {
  margin-top: 3rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}

html.mobile .MavkaHomeHeroButtons {
  align-items: flex-start;
  text-align: start;
}

.MavkaHomeHeroButtonOr {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: rgb(var(--muted-rgb));
}

.MavkaHomeHeroButtonUkrInstall a {
  color: #375BB6;
}

.MavkaHomeHeroButtons code {
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #375BB6;
  color: #375BB6;
  font-size: 0.9rem;
}

.MavkaHomeHeroButton + .MavkaHomeHeroButton {
  margin-left: 1rem;
}

.MavkaHomeHeroButton {
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  background: rgb(var(--text-rgb));
  color: rgb(var(--bg-rgb));
  text-decoration: none;
  border: none;
  font-weight: 500;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-duration) ease-in-out;
}

.MavkaHomeHeroButton svg {
  margin-left: 0.5rem;
  height: 1em;
  transition: all var(--transition-duration) ease-in-out;
}

.MavkaHomeHeroButton:hover {
  border-radius: 0.2rem;
  font-weight: 600;
}

.MavkaHomeHeroButton:hover svg {
  transform: scale(1.1);
}

.MavkaHomeHeroButton:active, .MavkaHomeHeroButton.pressed {
  border-radius: 1.6rem;
  font-weight: 400;
}

.MavkaHomeHeroButton:active svg, .MavkaHomeHeroButton.pressed svg {
  transform: scale(0.8) rotate(30deg);
}

.MavkaHomeHeroButton.small {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.MavkaHomeHeroRight {
  margin-top: -0.5rem;
  max-width: 446px;
  grid-column-start: 1;
  grid-row-start: 1;
}

.MavkaHomeHeroCodeBlockWrapper {
  position: relative;
}

.MavkaHomeHeroCodeBlock {
  position: relative;

  background: black;
  padding: 0.5rem;
  padding-top: 2rem;
  border-radius: 1rem;
  box-shadow: var(--code-shadow);

  font-size: 1rem;
  z-index: 1;
}

html.mobile .MavkaHomeHeroCodeBlock {
  border-radius: 0;
}

.MavkaHomeHeroCodeBlock [data-code-active=false] {
  display: none;
}

.MavkaHomeHeroCodeBlockButtons {
  margin-top: 0.5rem;
  display: flex;
}

.MavkaHomeHeroCodeBlockButton {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: white;
  font-weight: 600;
  transition: all var(--transition-duration) ease-in-out;
}

.MavkaHomeHeroCodeBlockButton img, .MavkaHomeHeroCodeBlockButton svg {
  margin-right: 0.33rem;
  height: 1em;
}

.MavkaHomeHeroCodeBlock pre {
  margin: 0;
}

.MavkaHomeHeroCodeBlockTabs {
  position: absolute;
  display: flex;
  top: -0.5rem;
  background: black;
  padding: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  border-radius: 1rem;
  left: 0;
  z-index: unset;
  box-shadow: var(--code-shadow);
  max-width: 100%;
  overflow-x: auto;
}

html.mobile .MavkaHomeHeroCodeBlockTabs {
  border-top-left-radius: 0;
}

.MavkaHomeHeroCodeBlockTabs::before {
  position: absolute;
  inset: 0;
  background: black;
  content: "";
  border-radius: inherit;
  z-index: 1;
}

.MavkaHomeHeroCodeBlockTab {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: #999;
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-duration) ease-in-out;
}

.MavkaHomeHeroCodeBlockTab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.MavkaHomeHeroCodeBlockTab.active {
  background: #9d3425;
  color: rgb(var(--bg-rgb));
}

@keyframes turn {
  100% {
    transform: rotate(1turn);
  }
}

.MavkaHomeHeroPattern {
  background-repeat: no-repeat;
  background-size: 100%;
  filter: grayscale(1);
  background-image: url(./мавка.лого.svg);
  opacity: 0.04;
  z-index: 0;
}

html.dark .MavkaHomeHeroPattern {
  opacity: 0.1;
  filter: grayscale(1) drop-shadow(0 0 2px white);
}

.MavkaHomeHeroPattern.p1 {
  position: absolute;
  top: 250px;
  left: 150px;
  height: 500px;
  width: 500px;
  animation: turn 180s infinite linear;
}

.MavkaHomeHeroPattern.p2 {
  position: absolute;
  top: -100px;
  right: -100px;
  height: 50px;
  width: 50px;
  animation: turn 180s infinite linear reverse;
}

.MavkaHomeHeroPattern.p3 {
  position: absolute;
  top: 100px;
  right: 0px;
  height: 60px;
  width: 60px;
  animation: turn 180s infinite linear;
}

.MavkaHomeHeroPattern.p4 {
  position: absolute;
  top: 700px;
  left: -220px;
  height: 100px;
  width: 100px;
  animation: turn 180s infinite linear reverse;
}

html.mobile .MavkaHomeHeroPattern:not(.p1) {
  display: none;
}

html.mobile .MavkaHomeHeroPattern.p1 {
  left: 0;
}

html.mobile .MavkaHomeHero {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
  padding-right: 1rem;
}

html.mobile .MavkaHomeHeroLeft {
  padding-left: 1rem;
  padding-right: 1rem;
}

html.mobile .MavkaHomeHeroRight {
  margin-top: 5rem;
  margin-left: -1rem;
  margin-right: -1rem;
  max-width: unset;
}

.MavkaHomeFeatures {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-max-width);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.MavkaHomeFeature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}

.MavkaHomeFeatureName {
  margin-top: 1rem;
  font-weight: 500;
  font-size: 1.2rem;
}

.MavkaHomeFeatureDescription {
  margin-top: 1rem;
  color: rgb(var(--muted-rgb));
}

.MavkaHomeFeatureIcon {
  font-size: 4rem;
}

html.mobile .MavkaHomeFeatures {
  margin-top: calc(10rem - 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 2rem;
  padding-right: 2rem;
}

html.mobile .MavkaHomeFeature + .MavkaHomeFeature {
  margin-top: 3rem;
}

.MavkaHomeUsecases {
  margin-top: 100px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-max-width);
  display: flex;
  flex-direction: column;
}

.XDocsCodeWrapper {
  position: relative;
  z-index: 1;
  background: black;
  padding: 0.5rem;
  border-radius: 1rem;
  box-shadow: var(--code-shadow);
}

.XDocsCodeWrapper pre {
  margin: 0;
}

html.mobile .XDocsCodeWrapper {
  border-radius: 0;
  padding: 0.5rem 0.5rem;
}

.MavkaHomeUsecase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.MavkaHomeUsecase {
  margin-top: 5rem;
}

.MavkaHomeUsecaseCode {
  position: relative;
  max-width: calc(1024px / 2);
  transform: translateX(-2rem);
}

.MavkaHomeUsecaseCode pre {
  margin-top: 0;
  margin-bottom: 0;
}

.MavkaHomeUsecaseInfo {
  margin-left: -2rem;
  padding-right: 3rem;
  padding-left: 2rem;
  border-radius: 1rem;
  /*background-color: rgba(var(--text-rgb), 0.025);*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.MavkaHomeUsecaseName {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
}

.MavkaHomeUsecaseDescription {
  margin-top: 1rem;
  color: rgb(var(--muted-rgb));
  text-align: left;
}

.MavkaHomeUsecase.code-right .MavkaHomeUsecaseName {
  text-align: right;
}

.MavkaHomeUsecase.code-right .MavkaHomeUsecaseDescription {
  text-align: right;
}

.MavkaHomeUsecase.code-right .MavkaHomeUsecaseInfo {
  margin-left: 0;
  margin-right: -2rem;
  padding-right: 2rem;
  padding-left: 3rem;
  border-radius: 1rem;
}

.MavkaHomeUsecase.code-right .MavkaHomeUsecaseCode {
  transform: translateX(2rem);
}

@media only screen and (max-width: 1023px) {
  .MavkaHomeUsecase {
    margin-top: 2rem;
    display: flex;
    flex-direction: column-reverse;
  }

  .MavkaHomeUsecaseCode {
    margin-top: 2rem;
    max-width: unset;
    transform: none;
    width: 100%;
  }

  .XDocsCodeWrapper {
    padding: 0;
  }

  .MavkaHomeUsecaseCode pre .hljs {
  }

  .MavkaHomeUsecaseCode::after {
    display: none;
  }

  .MavkaHomeUsecaseInfo {
    margin-left: 0;
    padding-right: 2rem;
    padding-left: 2rem;
    border-radius: 0;
    transform: none;
    box-shadow: none;
  }

  .MavkaHomeUsecase.code-right {
    flex-direction: column;
  }

  .MavkaHomeUsecase.code-right .MavkaHomeUsecaseInfo {
    margin-right: 0;
    padding-right: 2rem;
    padding-left: 2rem;
    border-radius: 0;
    transform: none;
  }

  .MavkaHomeUsecase.code-right .MavkaHomeUsecaseCode {
    transform: none;
  }
}

.MavkaHomeWayContainer {
  margin-top: 200px;
  position: relative;
  overflow: hidden;
  min-height: 120vh;
  background-color: black;
}

html.mobile .MavkaHomeWayContainer {
  margin-top: 10rem;
}

.MavkaHomeWay {
  position: relative;
  min-height: 120vh;
  background-color: black;
}

.MavkaHomeWayImage {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  min-height: 120vh;
  background-attachment: scroll;
  background-position: calc(45% + var(--mouse-x-percentage) * 0.1) calc(45% + var(--mouse-y-percentage) * 0.1);
  background-repeat: repeat;
  background-size: calc(var(--way-base-size) - var(--scroll-y-percentage));
  cursor: none;
}

html.loaded .MavkaHomeWayImage {
  background-image: url("шлях.png");
}

@supports (background-attachment: fixed) {
  .MavkaHomeWayImage {
    background-attachment: fixed;
  }
}

.MavkaHomeWayCredits {
  font-size: 0.8rem;
  text-align: right;
  margin-top: 1rem;
  margin-right: 1rem;
  color: rgb(var(--border-rgb));
  transition: all var(--transition-duration) ease-in-out;
}

.MavkaHomeWayCredits:hover {
  color: rgb(var(--text-rgb));
}

.MavkaFooter {
  padding: 10rem 1rem 2rem 1rem;
  text-align: center;
  color: rgb(var(--muted-rgb))
}

subject, .MavkaTextSubject {
  color: #485cb0;
  font-weight: 500;
}

keyword, .MavkaTextKeyword {
  color: #c678dd;
  font-weight: 500;
}

.MavkaHomeAnnouncement {
  background: rgb(var(--yellow-rgb));
  color: rgb(var(--yellow-text-rgb));
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}


@media only screen and (max-width: 1024px) {
  .MavkaHomeAnnouncement {
    padding-left: 6rem;
  }
}