@media screen and (min-width: 575px) {
  html:not(.docs-version-current) .navbar.navbar--fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
  }
  .homepage-header {
    z-index: 99999;
  }
}

.homepage-header {
  isolation: isolate;
  position: relative;
  text-align: center;
  height: 100vh;
  padding: 12em 1em;
  background: var(--flatify__bg-color);
}

.homepage-title {
  font-size: 5em;
  font-weight: bold;
}

.homepage-subtitle {
  font-size: 1.5em;
  opacity: 0.8;
}

.homepage-h2 {
  font-size: 3.5em;
}

.homepage-h3 {
  font-size: 1.5em;
  margin: 2em 0 0;
}

.homepage-container {
  max-width: 62em;
  padding: 0 1em;
  margin: 0 auto;
}

.homepage-para {
  opacity: 0.8;
  font-size: 0.9em;
  margin-bottom: 0.5em !important;
}

.animated-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  display: block;
  max-width: min(85%, 1400px);
  padding: 4em;
  margin: 0 auto;
  z-index: -1;
  background: #1895d0;
  border: 1.25em solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
}

.animated-logo:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 60%;
  height: 60%;
  margin: auto;
  background: #1caff5;
  border: 1.25em solid #168dc4;
  border-radius: 5em;
}

.animated-logo:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20%;
  height: 20%;
  margin: auto;
  background: #76cff9;
  border: 1.1em solid #1da0de;
  border-radius: 1em;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .animated-logo:after {
    animation: logo-spin linear 5s infinite;
  }
}

@keyframes logo-spin {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(45);
  }
}

html[data-theme="light"] .animated-logo {
  filter: contrast(120%) opacity(35%);
}
html[data-theme="dark"] .style-light:before,
html[data-theme="dark"] .style-light {
  color: #f1f4f7 !important;
  background: #2e4051 !important;
  --flatify__button-border-color: #1e2a35 !important;
}

html[data-theme="dark"] .color-dark {
  --flatify__color-dark-primary: #f1f4f7;
}
html[data-theme="dark"] .animated-logo {
  filter: brightness(75%);
}
@media screen and (min-width: 481px) and (max-width: 991px) {
  .animated-logo {
    font-size: 0.8em;
  }
}
@media screen and (max-width: 575px) {
  .homepage-header {
    height: 75vh;
  }
  .homepage-title {
    font-size: 4em;
  }
  .homepage-subtitle {
    font-size: 1em;
  }
  .get-started-button {
    font-size: 1.2em !important;
  }
}
@media screen and (max-width: 480px) {
  .animated-logo {
    font-size: 0.6em;
    max-width: 90%;
  }
}

.featured-button,
.get-started-button {
  min-width: 10em;
  margin-top: 2.5em;
}

.button,
.get-started-button {
  padding: 0.75em 0.85em 0.5em !important;
  border: none !important;
  border-radius: 0.9em !important;
}
