/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,
:before,
:after {
  box-sizing: border-box;
}
html {
  font-family:
    system-ui,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}
body {
  margin: 0;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    Liberation Mono,
    Menlo,
    monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  border-color: currentcolor;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
legend {
  padding: 0;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_astro/InterVariable.DiVDrmQJ.woff2) format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_astro/InterVariable-Italic.FCBEiFp6.woff2) format("woff2");
}
html {
  background-color: #fafafa;
  line-height: 1.25;
}
body {
  font-family: InterVariable, sans-serif;
  font-feature-settings:
    "liga" 1,
    "calt" 1;
}
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
header {
  padding: 30px;
  background-color: #0f172a;
  .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
  }
  h1 {
    font-size: 20px;
    margin: 0;
    color: #fff;
  }
  .github_logo {
    width: 32px;
    height: 32px;
  }
}
main {
  padding: 30px;
  color: #000;
  text-align: center;
  background-color: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  h2 {
    color: #94a3b8;
    font-size: 24px;
    margin: 0;
    & span {
      color: #fff;
    }
  }
  img {
    width: 100%;
  }
}
.features,
.faqs,
.downloads {
  padding: 30px;
}
h3 {
  text-align: center;
  font-size: 28px;
  margin: 0;
  padding: 0 30px 30px;
}
.feature {
  display: block;
  width: 100%;
  color: #000;
  border-radius: 6px;
  padding: 30px;
  margin: 0 0 30px;
  background-color: var(--feature-bg-color);
  box-shadow: 4px 4px 0 var(--feature-border-color);
  h4 {
    margin: 0 0 10px;
  }
  p {
    margin: 0;
  }
  &:nth-of-type(1) {
    --feature-bg-color: #f3e5f5;
    --feature-border-color: #e1bee7;
  }
  &:nth-of-type(2) {
    --feature-bg-color: #e8f5e9;
    --feature-border-color: #c8e6c9;
  }
  &:nth-of-type(3) {
    --feature-bg-color: #e3f2fd;
    --feature-border-color: #bbdefb;
  }
  &:nth-of-type(4) {
    --feature-bg-color: #fff3e0;
    --feature-border-color: #ffe0b2;
  }
}
.faqs {
  background-color: #eee;
}
.downloads section {
  img {
    width: 64px;
  }
  .browser {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    max-width: 600px;
    padding: 30px;
    margin: 0 auto 30px;
    background-color: #eee;
    border-radius: 6px;
    box-shadow: 4px 4px #e0e0e0;
    &:last-of-type {
      margin-bottom: 0;
    }
    > div:first-of-type {
      display: flex;
      align-items: center;
      column-gap: 10px;
    }
    span {
      font-size: 20px;
    }
  }
}
footer {
  background-color: #212121;
  color: #bdbdbd;
  padding: 30px;
  text-align: center;
  span {
    color: #fff;
  }
  .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  a {
    color: #fff;
    white-space: nowrap;
    &:hover {
      text-decoration: none;
    }
  }
  p:last-of-type {
    margin-bottom: 0;
  }
}
a.btn {
  padding: 10px;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  background-color: #2563eb;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  &:active {
    filter: brightness(0.9);
  }
  &:focus-visible {
    outline: 2px #2563eb solid;
    outline-offset: 1px;
  }
  &:hover {
    background-color: #1d4ed8;
  }
  &.clearBtn {
    background-color: #525252;
    &:hover {
      background-color: #404040;
    }
  }
}
@media only screen and (min-width: 400px) {
  main {
    .buttons {
      display: flex;
      justify-content: center;
      column-gap: 10px;
      a:first-of-type {
        margin-bottom: 0;
      }
    }
    img {
      max-width: 900px;
    }
  }
}
@media only screen and (min-width: 650px) {
  header {
    padding: 20px;
  }
  main {
    gap: 50px;
  }
  main,
  .features,
  .faqs,
  .downloads {
    padding: 70px;
  }
  h3 {
    padding: 0 20px 70px;
  }
  .downloads section .browser {
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
  }
  footer {
    padding: 70px;
  }
}
@media only screen and (min-width: 1000px) {
  header .wrap,
  main .wrap,
  .wrap section {
    max-width: 1200px;
    margin: 0 auto;
  }
  main {
    h2 {
      max-width: 800px;
    }
  }
  .features section {
    display: flex;
    column-gap: 30px;
  }
  .feature {
    display: flex;
    flex-direction: column;
  }
}
details {
  --box-shadow-color: #bdbdbd;
  box-shadow: 4px 4px 0 var(--box-shadow-color);
  border-radius: 6px;
  &:not(:last-of-type) {
    margin-bottom: 30px;
  }
  &:focus-within {
    --box-shadow-color: #90caf9;
    summary {
      background-color: #bbdefb;
      color: #0d47a1;
    }
  }
  summary {
    padding: 30px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    background-color: #e0e0e0;
    border-radius: 6px;
    display: flex;
    column-gap: 20px;
    align-items: center;
    justify-content: space-between;
    svg {
      width: 15px;
      flex-shrink: 0;
      [open] & {
        transform: rotate(-180deg);
      }
    }
    [open] & {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  div {
    background-color: #f5f5f5;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 30px;
  }
}
@media screen and (prefers-reduced-motion: no-preference) {
  details {
    svg {
      transition: transform 0.2s ease-in-out;
    }
  }
}