/* stylelint-disable custom-property-pattern */

:root {
  --ifm-color-primary-lightest: rgb(228 222 222);
  --ifm-color-primary-lighter: #d0312d;
  --ifm-color-primary-light: #f8f8fa;
  --ifm-color-primary: #e8433e;
  --ifm-color-dark: #000;
  --ifm-color-primary-dark: #a5a0a0;
  --ifm-color-primary-darker: #9a2521;
  --ifm-color-shadow--lw: #7f1e1b;
  --color-title: #101827;
  --color-github-button: #101827;
  --color-github-button-hover: #000;
  --color-primary: #e8433e;
  --color-subtitle: #000;
  --color-secondary: #4b5563;
  --color-secondary-bg: #f3f4f6;
  --color-secondary-text: #444952;
  --color-border: #eee;
  --color-downloads-subtitle: #374051;
  --color-downloads-leftsidelinks: #4b5563;
  --color-downloads-leftsidelink-hover: #111827;
  --color-downloads-rightside-versioninfo: #6b7280;
  --color-downloads-rightside-versioninfo-span: #374151;
  --color-team-repocard: #374151;
  --color-team-repocard-hover: #111827;
  --color-docs-subtitle: #374151;
  --color-docs-versioninfo: #4b5563;
  --color-help-subtitle: #6b7280;
  --color-downloads-dropdown: #fff;
  --color-downloads-dropdown-items: #f3f4f6;
}

html[data-theme="dark"] {
  --color-secondary-bg: #121212;
  --ifm-color-dark: #b0b0b0;
  --color-title: #f0f0f0;
  --color-subtitle: #f0f0f0;
  --color-github-button: #121212;
  --color-secondary-text: #b0b0b0;
  --color-border: #b0b0b0;
  --color-downloads-subtitle: #f0f0f0;
  --color-downloads-leftsidelinks: #909397;
  --color-downloads-leftsidelink-hover: #f0f0f0;
  --color-downloads-rightside-versioninfo: #f0f0f0;
  --color-downloads-rightside-versioninfo-span: #909397;
  --color-team-repocard: #f0f0f0;
  --color-team-repocard-hover: #909397;
  --color-docs-subtitle: #f0f0f0;
  --color-docs-versioninfo: #b0b0b0;
  --color-help-subtitle: #f0f0f0;
  --color-downloads-dropdown: #18191a;
  --color-downloads-dropdown-items: #4c4e50;
}

@font-face {
  font-family: MaisonNeue-Medium;
  src:
    local("MaisonNeue-Medium"),
    url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf")
    format("opentype");
  font-display: optional;
}

@font-face {
  font-family: MaisonNeue-Bold;
  src:
    local("MaisonNeue-Bold"),
    url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf")
    format("opentype");
  font-display: optional;
}

@font-face {
  font-family: MaisonNeue-Light;
  src:
    local("MaisonNeue-Light"),
    url("https://static.apiseven.com/202202/MaisonNeue-Light.otf")
    format("opentype");
  font-display: optional;
}

@font-face {
  font-family: MaisonNeue-Demi;
  src:
    local("MaisonNeue-Demi"),
    url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf")
    format("opentype");
  font-display: optional;
}

@font-face {
  font-family: MaisonNeue-ExtraBold;
  src:
    local("MaisonNeue-ExtraBold"),
    url("https://static.apiseven.com/202202/MaisonNeue-ExtraBold.otf")
    format("opentype");
  font-display: optional;
}

body {
  overflow-x: hidden !important;
}

body,
h1,
h2,
h3 {
  font-family: MaisonNeue-Medium, apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
}

div.inner {
  color: var(--ifm-color-primary);
}

.image {
  padding: 75px 10px 75px 75px;
}

.more-users {
  padding-top: 75px;
}

.post-header {
  padding-top: 50px;
}

.header {
  padding-top: 50px;
}

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

header h2 {
  color: var(--color-primary);
}

@media only screen and (max-width: 414px) {
  .hide-on-mobile {
    display: none;
  }
}

/* navbar */
.navbar__link:hover,
.navbar__link--active {
  color: var(--color-primary);
}

.navbar__title {
  font-size: 18px;
  height: 30px;
}

/* button */
.button {
  margin: 0 10px;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  background: #fee2e2;
  color: #ef4444;
  transition: all 0.3s;
}

.button:hover {
  background: #fecaca;
  color: #ef4444;
}

.button.github {
  background: var(--color-github-button);
  color: white;
  display: inline-flex;
  align-items: center;
  margin-bottom: 15px;
}

.button.github .github-logo {
  height: 24px;
  margin: 0 12px 1px 0;
}

.button.github:hover {
  background: var(--color-github-button-hover);
}

.button-wrapper {
  margin: 0 -10px;
}

.button.secondary {
  background: #f3f4f6;
  color: #1f2937;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.button.secondary:hover {
  background: #e5e7eb;
}

@media only screen and (max-width: 414px) {
  .button {
    margin: 0;
  }

  .button.secondary,
  .button.github {
    width: 100%;
  }

  .button-wrapper {
    margin: 0;
  }
}

a {
  color: var(--ifm-color-dark);
  cursor: pointer;
}

a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

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

.arrow-btn {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1002;
}

/* Sidebar Section */
.sidebar-link {
  color: #d0312d;
}

.sidebar-link :hover {
  color: #ffb3b3;
}

.arch-head,
.compare-head,
.testimonials-head,
.docs-promo-head {
  font-size: 2.4rem;
  position: relative;
  left: 16.8%;
  width: 83.2%;
}

.arch-subtitle,
.compare-subtitle,
.testimonials-subtitle,
.docs-promo-subtitle {
  font-size: 1.13rem;
  position: relative;
  left: 16.8%;
  width: 70%;
  color: #615d5d;
  letter-spacing: 0.2px;
  font-family: MaisonNeue-Light, sans-serif;
  font-weight: 700;
}

.add-left-margin {
  position: relative;
  left: 16.8%;
}

/* Mobile-phones and tablet styles */
@media only screen and (min-width: 300px) and (max-width: 1100px) {
  body {
    overflow-x: hidden !important;
  }

  .hero-sec-wrap {
    display: block;
    height: fit-content;
  }

  .homeCanvas-overlay {
    position: absolute;
    width: 100vw;
    height: 50vh;
    background: #ebe6dc;
    top: -1px;
    right: 0;
  }

  .hero-text {
    height: 50%;
    width: 100%;
    padding: 5rem 0 0 6vw;
  }

  .hero-title {
    width: 100vw;
    font-size: 3.4rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
    line-height: 28px;
    margin: 25px 0 24px;
    padding-right: 20px;
  }

  .add-margin {
    margin: 30px 0 0;
  }

  .homeCanvas {
    width: 100vw;
    height: 50vh;
  }

  .hero-infograph {
    overflow: hidden;
  }

  .add-left-margin {
    position: relative;
    left: 7%;
  }

  .add-left-margin-feat {
    position: absolute;
    left: 7%;
  }

  .bottom-pos {
    bottom: 34%;
  }

  .feat-head {
    font-size: 2.13rem;
    width: 84%;
  }

  .feat-head-desc {
    left: 7%;
  }

  .feat-desc {
    width: 83%;
    left: 7%;
  }

  .feat-container-d {
    display: none;
  }

  .feat-container-m {
    display: block;
  }

  .benefit {
    background: #fff8f6;
    padding: 50px 0;
    height: 100vh;
  }

  .row-benefit {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column-reverse;
    position: absolute;
    height: 100vh;
    width: 100vw;
  }

  .benefit-infograph {
    width: 100%;
    padding: 0 0 60px;
  }

  .row-reverse {
    flex-flow: column;
  }

  .row-hidden {
    opacity: 0;
  }

  .table {
    width: 100%;
    display: block;
  }
}

@media only screen and (min-height: 500px) and (max-height: 670px) {
  .benefit-infograph {
    width: 70%;
    padding: 0 0 60px;
  }
}

@media only screen and (min-width: 768px) {
  .arch-card-caption > p {
    width: 50%;
  }
}

.bottom-pos {
  bottom: 34%;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1100px) {
  .feat-container-d {
    display: none;
  }

  .feat-container-m {
    display: block;
  }
}

@media only screen and (min-device-width: 300px) and (max-device-width: 360px) {
  .hero-title {
    font-size: 2.95rem;
  }

  .hero-infograph {
    overflow: hidden;
  }

  .endcta-text {
    font-size: 1.6rem;
  }

  .arch-head,
  .compare-head,
  .testimonials-head,
  .docs-promo-head,
  .oss-promo-head {
    left: 7%;
    width: 93%;
  }

  .benefit .feat-desc {
    font-size: 0.85rem;
  }

  .oss-promo-infograph {
    overflow: hidden;
  }
}

@media (min-width: 1600px) and (max-width: 2080px) {
  .bottom-pos {
    bottom: 38%;
  }

  .arch-scale-svg {
    transform: scale(1.2);
  }
}

article h1 {
  font-size: 48px;
}

article h2 {
  font-size: 36px;
}

article h3 {
  font-size: 24px;
}

article {
  font-size: 20px;
  line-height: 35.4px;
}

article p {
  font-size: 20px;
  line-height: 35.4px;
}

/* Announcement Bar */
div[class*="announcementBar_"] {
  height: 40px;
}

div[class*="announcementBarContent"] {
  font-size: 15px !important;
  font-weight: 500;
}

div[class*="announcementBarPlaceholder"] {
  height: 40px;
}

button[class*="announcementBarClose"] {
  height: 40px !important;
}

@media screen and (max-width: 996px) {
  div[class*="announcementBar_"] {
    height: auto !important;
    min-height: 40px;
  }

  div[class*="announcementBarContent"] {
    font-size: 15px !important;
    font-weight: 500;
  }
}
