@font-face {
  font-family: 'Aeonik Regular';
  src: url('/fonts/Aeonik-Regular.woff2') format('woff2'),
    url('/react-native-gesture-handler/fonts/Aeonik-Regular.woff2')
      format('woff2'),
    url('/fonts/Aeonik-Regular.woff') format('woff'),
    url('/react-native-gesture-handler/fonts/Aeonik-Regular.woff')
      format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Bold';
  src: url('/fonts/Aeonik-Bold.woff2') format('woff2'),
    url('/react-native-gesture-handler/fonts/Aeonik-Bold.woff2') format('woff2'),
    url('/fonts/Aeonik-Bold.woff') format('woff'),
    url('/react-native-gesture-handler/fonts/Aeonik-Bold.woff') format('woff');
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&display=swap');

:root {
  --gh-logo: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");

  --h1-font-size: 3rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.5rem;
  --h4-font-size: 1rem;
  --h5-font-size: 0.875rem;
  --h6-font-size: 0.85rem;

  --h1-font-size-mobile: 2.3rem;
  --h2-font-size-mobile: 2rem;
  --h3-font-size-mobile: 1.35rem;
  --h4-font-size-mobile: 1.25rem;
  --h5-font-size-mobile: 1.1rem;
  --h6-font-size-mobile: 1rem;

  --swm-color-base: #001a72;
  --swm-color-bright: #f2f3f8;
  --swm-color-code-highlight: #22377f;

  --ifm-font-family-base: Aeonik Regular, system-ui, -apple-system, Segoe UI,
    Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
    Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol;
  --ifm-font-family-bold: Aeonik Regular, system-ui, -apple-system, Segoe UI,
    Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
    Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
    Segoe UI Symbol;
  --ifm-font-family-monospace: DM Mono, monospace;
  --ifm-color-primary: var(--swm-color-base);
  --ifm-color-primary-darkest: #001250;
  --ifm-color-primary-darker: #001661;
  --ifm-color-primary-dark: #001767;
  --ifm-color-primary-light: #001d7d;
  --ifm-color-primary-lighter: #001e83;
  --ifm-color-primary-lightest: #002294;
  --ifm-color-white: #ffffff;
  --ifm-font-size-base: 16px;
  --ifm-code-font-size: 80%;

  --ifm-link-color: var(--ifm-color-primary-dark);
  --ifm-link-hover-color: var(--ifm-color-primary-lightest);
  --ifm-link-decoration: underline;
  --ifm-link-hover-decoration: underline;

  --ifm-navbar-background-color: var(--ifm-color-primary);
  --ifm-navbar-padding-horizontal: 60px;
  --ifm-navbar-link-color: var(--swm-color-bright);
  --ifm-navbar-link-hover-color: var(--ifm-color-white);
  --ifm-navbar-link-decoration: none;
  --ifm-navbar-link-hover-decoration: none;

  --ifm-sidebar-background: var(--swm-color-bright);
  --ifm-sidebar-color: var(--swm-color-bright);
  --ifm-menu-link-decoration: none;
  --ifm-menu-link-hover-decoration: none;

  --ifm-hero-background-color: var(--ifm-color-white) !important;
  --ifm-hero-text-color: var(--ifm-color-primary);

  --ifm-footer-background-color: var(--swm-color-base);
  --ifm-font-color-base: var(--ifm-color-primary);
  --ifm-menu-color: var(--ifm-color-primary);
  --ifm-menu-color-background-active: none;
  --ifm-menu-color-background-hover: none;
  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg alt='Arrow' xmlns='http://www.w3.org/2000/svg' width='13px' height='13px' viewBox='002424'><path fill='rgba(
      5,
      5,
      76,
      1
    )' d='M7.4115.41l1210.83l4.594.58l1814l-6-6-66z'></path></svg>');
  --ifm-menu-link-padding-horizontal: 14px;
  --ifm-hr-border-color: #dcdfeb;
  --ifm-container-width: 1900px;
}

.docusaurus-highlight-code-line {
  background-color: var(--swm-color-code-highlight) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.navbar__inner {
  flex-wrap: nowrap;
}

.navbar .navbar__items .navbar__toggle svg path {
  stroke: var(--ifm-color-white);
}

.navbar__title {
  font-size: var(--ifm-h3-font-size);
  font-family: var(--ifm-font-family-base);
  font-weight: 300;
}

.navbar__toggle {
  margin-right: 16px;
}

.navbar__brand {
  text-decoration: none;
}

.navbar__brand:hover {
  color: var(--ifm-color-white);
  text-decoration: none;
}

.navbar > .navbar__inner > .navbar__items > .navbar__short {
  display: hidden;
}

.navbar__item.navbar__link[href*='github'] {
  display: flex;
  font-size: 0;
  padding: 0;
}

.navbar__item.navbar__link[href*='github']:before {
  content: '';
  min-width: 24px;
  width: 24px;
  min-height: 24px;
  height: 24px;
  background: var(--gh-logo);
  background-repeat: no-repeat;
}

.menu > ul.menu__list ul.menu__list {
  border-left: 2px solid var(--ifm-hr-border-color);
  margin-left: var(--ifm-menu-link-padding-horizontal);
  padding-left: var(--ifm-menu-link-padding-horizontal);
}

.menu__link--active {
  border-left: 2px solid var(--ifm-color-primary);
  border-radius: 0;
  margin-left: calc(-2px - var(--ifm-menu-link-padding-horizontal));
  padding-left: calc(var(--ifm-menu-link-padding-horizontal) * 2);
}

.menu__link {
  text-decoration: none;
}

.badge--info {
  --ifm-badge-background-color: #8ed3ef;
  color: var(--ifm-color-primary);
  border-radius: 3px;
  font-size: 14px;
  padding: 2px 4px;
  font-weight: 300;
  margin-left: 5px;
  vertical-align: middle;
}

.footer--dark {
  background-color: var(--swm-color-base);
}

.footer-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 20px;
  align-items: center;
}

.footer-image-link {
  height: 62px;
  margin-right: 0;
}

.githubStarLink {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  margin-right: 1rem;
}

.navbar-sidebar > .navbar__link--active:hover {
  color: var(--ifm-navbar-link-hover-color);
}

.navbar__link--active {
  color: var(--ifm-navbar-link-hover-color);
}

header > .container {
  margin-left: 0;
  margin-right: 0;
  padding: 0 60px;
  display: flex;
  flex: 1;
  max-width: var(--ifm-container-width);
}

section > .container {
  margin-left: 0;
  margin-right: 0;
  padding: 0 60px;
  display: flex;
  flex: 1;
  max-width: var(--ifm-container-width);
}

.hero {
  justify-content: center;
}

.row-hero {
  width: 100%;
  margin: 0;
}

.hero-content {
  padding: 3rem 0;
  flex-direction: column;
  justify-content: center;
}

.hero__title {
  text-align: left;
  font-size: 4rem;
}

.hero__p {
  text-align: left;
}

.hero-buttons {
  margin-top: 2rem;
}

.button--primary {
  border-radius: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  min-width: 15rem;
  font-weight: 300;
}

.hero-image {
  min-height: 25rem;
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}

section {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
  background-color: var(--swm-color-bright);
}

section:nth-child(2) {
  background-color: var(--ifm-color-white);
}

section > .contaner > .row {
  display: flex;
  align-items: flex-start;
}

.simple-text-box {
  margin-bottom: 2rem;
}

.row > .section-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
}

.info-box {
  display: flex;
  margin-bottom: 1rem;
}

.row--box-section {
  flex-direction: row-reverse;
}

.section-image {
  min-height: 20rem;
}

.screenshot-container {
  padding-bottom: -10px;
  margin-bottom: 2rem;
}

.button--demo {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.col--bottom-section {
  width: 100%;
}

.row--center {
  justify-content: center;
  justify-self: center;
  width: 100%;
}

.screenshot-container {
  min-width: 170px;
  min-height: 100px;
  padding: 0;
  display: inline-block;
}

.row--docitem {
  width: 100%;
}

.container--center {
  margin-top: 2rem;
}

@media screen and (max-width: 1920px) {
  :root {
    --ifm-font-size-base: 16px;
  }

  header > .container {
    max-width: 1300px;
  }

  section > .container {
    max-width: 1300px;
  }
}

@media screen and (max-width: 1600px) {
  :root {
    --ifm-font-size-base: 16px;
    --ifm-h1-font-size: var(--h1-font-size);
    --ifm-h2-font-size: var(--h2-font-size);
    --ifm-h3-font-size: var(--h3-font-size);
    --ifm-h4-font-size: var(--h4-font-size);
    --ifm-h5-font-size: var(--h5-font-size);
    --ifm-h6-font-size: var(--h6-font-size);
    --ifm-container-width: 1300px;
  }

  header > .container {
    max-width: 1300px;
  }

  section > .container {
    max-width: 1300px;
  }

  .markdown > h1 {
    --ifm-font-size: var(--h1-font-size);
  }

  .markdown > h2 {
    --ifm-font-size: var(--h2-font-size);
  }

  .markdown > h3 {
    --ifm-font-size: var(--h3-font-size);
  }

  .markdown > h4 {
    --ifm-font-size: var(--h4-font-size);
  }

  .markdown > h5 {
    --ifm-font-size: var(--h5-font-size);
  }

  .markdown > h6 {
    --ifm-font-size: var(--h6-font-size);
  }

  .hero__title {
    text-align: left;
    font-size: var(--ifm-h1-font-size);
  }
}

@media screen and (max-width: 1380px) {
  header > .container {
    max-width: 1140px;
  }

  section > .container {
    max-width: 1140px;
  }
}

@media screen and (max-width: 996px) {
  :root {
    --ifm-navbar-padding-horizontal: 20px;
  }

  .navbar__link {
    font-size: var(--ifm-h3-font-size);
  }

  .navbar__title {
    font-size: var(--ifm-font-size-base);
  }

  .button--primary {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  header > .container {
    max-width: 1300px;
  }

  section > .container {
    max-width: 1300px;
  }

  .hero > .container {
    margin-left: 0;
    margin-right: 0;
    padding: 0 20px;
    display: flex;
    flex: 1;
    max-width: 100%;
  }

  .hero-image {
    background-position: center center;
    margin-bottom: 1rem;
  }

  .row--box-section {
    flex-direction: row-reverse;
  }

  .container {
    margin-left: 0;
    margin-right: 0;
    padding: 0 20px;
    display: flex;
    flex: 1;
    max-width: 100%;
  }

  .container--center {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 600px) {
  .button--primary {
    margin-right: 0;
    margin-left: 0;
    min-width: 20rem;
  }
  .navbar__brand {
    margin-right: 0;
  }
}

@media screen and (max-width: 460px) {
  :root {
    --ifm-font-size-base: 14px;
    --ifm-h1-font-size: var(--h1-font-size-mobile);
    --ifm-h2-font-size: var(--h2-font-size-mobile);
    --ifm-h3-font-size: var(--h3-font-size-mobile);
    --ifm-h4-font-size: var(--h4-font-size-mobile);
    --ifm-h5-font-size: var(--h5-font-size-mobile);
    --ifm-h6-font-size: var(--h6-font-size-mobile);
    --ifm-navbar-padding-horizontal: 10px;
  }

  .markdown > h1 {
    --ifm-font-size: var(--h1-font-size-mobile);
  }

  .markdown > h2 {
    --ifm-font-size: var(--i2-font-size-mobile);
  }

  .markdown > h3 {
    --ifm-font-size: var(--h3-font-size-mobile);
  }

  .markdown > h4 {
    --ifm-font-size: var(--h4-font-size-mobile);
  }

  .markdown > h5 {
    --ifm-font-size: var(--h5-font-size-mobile);
  }

  .markdown > h6 {
    --ifm-font-size: var(--h6-font-size-mobile);
  }

  .navbar__title {
    font-size: var(--ifm-font-size-base);
  }

  .navbar__link {
    font-size: var(--ifm-h3-font-size);
  }

  .badge--info {
    border-radius: 2px;
    font-size: 10px;
  }

  .button--primary {
    min-width: 18rem;
    margin: initial 0;
  }

  .col--bottom-section {
    width: 100%;
  }

  .footer-container {
    flex-direction: column-reverse;
    justify-content: space-around;
  }

  .githubStarLink {
    margin-top: 0;
    margin-bottom: 30px;
    padding-top: 0;
  }

  .navbar__items > .githubStarLink {
    display: none;
  }
}