/******************** Breakpoints *********************/
/******************** Media queries *********************/
/******************** Variables *********************/
.links-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-links-container {
  animation: hero-logo-anim 1s cubic-bezier(0.2, 0, 0, 1) 0.36s forwards;
  opacity: 0;
}

.launch-link-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 400;
  gap: 6px;
  justify-content: center;
}
.launch-link-text p {
  margin: 0;
}

.launch-link {
  margin-top: 12px;
  background-color: black;
  border-radius: 32px;
  border: 1px solid white;
  color: white;
  font-size: 1.2rem;
  padding-top: 4px;
  padding-right: 24px;
  padding-bottom: 4px;
  padding-left: 14px;
  text-align: center;
  text-decoration: none;
  line-height: 1.6em;
}
@media (min-width: 64rem) {
  .launch-link {
    font-size: 1.3rem;
  }
}

.link-icon {
  width: 40px;
  aspect-ratio: 1;
}
@media (min-width: 64rem) {
  .link-icon {
    width: 44px;
  }
}

.badge {
  transition: all 0.2s ease-in-out;
}
.badge:hover {
  scale: 1.07;
}

.badges-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 0px;
  row-gap: 0px;
  align-items: center;
  justify-content: center;
}

.google-play-badge {
  margin: 0px;
}

.google-play-badge > img {
  height: 62px;
}
@media (min-width: 64rem) {
  .google-play-badge > img {
    height: 66px;
  }
}

#pt-br {
  margin: 0px 10px;
}
@media (min-width: 64rem) {
  #pt-br {
    margin: 8px 16px;
  }
}

#pt-br > img {
  height: 54px;
}
@media (min-width: 64rem) {
  #pt-br > img {
    height: 58px;
  }
}

.app-store-badge {
  margin: 4px 10px;
}
@media (min-width: 64rem) {
  .app-store-badge {
    margin: 16px 16px;
  }
}

.app-store-badge > img {
  height: 42px;
}
@media (min-width: 64rem) {
  .app-store-badge > img {
    height: 45px !important;
  }
}

#footer {
  display: grid;
  grid-template-areas: "logo logo logo logo" "rights rights free-space company-info" "legal-links legal-links free-space-2 communities";
  grid-template-columns: auto auto 1fr auto;
  grid-template-rows: auto auto auto;
  max-width: 1200px;
  margin: 0 auto;
  gap: 16px;
  padding: 16px;
  font-size: 1rem;
}

footer * {
  color: var(--secondary-text);
}

footer p {
  font-weight: 400;
}

footer a {
  color: var(--bluegray-dark);
}

#logos-container {
  display: flex;
  flex-direction: column;
  grid-area: logo;
  gap: 32px;
  margin-bottom: 16px;
  justify-content: center;
  align-items: center;
}

#studio-logo {
  height: 120px;
  shape-rendering: auto;
}

.studio-slogan {
  font-size: 1.125rem;
  font-weight: bold;
}

#company-info {
  grid-area: company-info;
  flex-direction: column;
  align-self: center;
  gap: 24px;
  align-items: end;
  text-align: end;
}

#company-info a {
  margin: 0;
}

#communities {
  grid-area: communities;
  display: flex;
  gap: 24px;
  height: 48px;
  justify-content: end;
}
#communities a {
  height: 48px;
  width: 48px;
}
#communities a img {
  height: 36px;
  width: 36px;
  padding: 6px;
}

#small-screen-info {
  display: inline;
}
@media (min-width: 64rem) {
  #small-screen-info {
    display: none;
  }
}

#large-screen-info {
  display: none;
}
@media (min-width: 64rem) {
  #large-screen-info {
    display: inline;
  }
}

#rights {
  grid-area: rights;
  align-content: flex-end;
  align-self: center;
}

#language-selector {
  -webkit-appearance: none;
  appearance: none;
  grid-area: company-info;
  background-color: transparent;
  border-radius: 8px;
  text-align: center;
}

#legal-links {
  grid-area: legal-links;
  display: flex;
  gap: 16px;
  justify-self: start;
  align-self: center;
  text-align: start;
}

@media (max-width: 64rem) {
  #footer {
    grid-template-areas: "logo" "communities" "copyright" "rights" "language-selector" "company-info" "legal-links";
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto auto;
    padding-bottom: 24px;
  }
  footer * {
    word-break: normal;
  }
  #studio-logo-anchor {
    margin: auto;
  }
  #studio-logo {
    height: auto;
    width: 100%;
    margin: 0px;
  }
  #communities {
    justify-content: center;
  }
  #company-info {
    width: 100%;
    align-items: center;
    text-align: center;
    margin: 0px;
    padding: 0px;
  }
  #company-info p {
    width: 100%;
    margin: 0px;
  }
  #company-info a {
    word-wrap: break-word;
  }
  #rights {
    text-align: center;
    margin: 0;
  }
  #legal-links {
    margin-top: 16px;
    justify-self: center;
  }
}
@keyframes hero-logo-anim {
  0% {
    opacity: 0;
    transform: translateY(64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
/********** Splash hero page **********/
.hero-container {
  display: grid;
  max-width: 2200px;
  min-height: calc(100% - 48px);
  grid-template-areas: "title" "image";
  grid-template-columns: auto;
  grid-template-rows: auto;
  margin: 0 auto;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
}
@media (min-width: 64rem) {
  .hero-container {
    grid-template-areas: "image title";
    grid-template-columns: 1fr min(680px, 40%);
  }
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 64px);
  background-blend-mode: multiply;
  background-color: #666;
  background-image: url("../assets/wallpaper.webp");
  background-size: cover;
  background-position: center;
}
@media (min-width: 64rem) {
  .hero-background {
    background-color: unset;
  }
}

.hero-image {
  display: flex;
  grid-area: screenshot;
  height: auto;
  width: 100%;
  padding-top: 16px;
}
@media (min-width: 64rem) {
  .hero-image {
    margin: 0;
  }
}

.hero-title-container {
  grid-area: title;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
@media (min-width: 64rem) {
  .hero-title-container {
    gap: 32px;
  }
}

.hero-title-background {
  display: none;
}
@media (min-width: 64rem) {
  .hero-title-background {
    display: block;
    position: absolute;
    top: 0;
    left: 35%;
    width: 65%;
    height: calc(100% + 64px);
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5647058824) 45%);
  }
}

.hero-title-image {
  width: 70%;
  max-width: 300px;
  opacity: 0;
}
@media (min-width: 64rem) {
  .hero-title-image {
    width: 100%;
  }
}

.hero-title {
  font-size: 1.125rem;
  opacity: 0;
  text-align: center;
}
@media (min-width: 64rem) {
  .hero-title {
    font-size: 1.25rem;
  }
}

/********** Video **********/
.hero-bg-fade {
  position: absolute;
  top: 100vh;
  height: 64px;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--accent-container));
  z-index: 1;
}

.video-container {
  width: calc(100% - 64px);
  margin-top: 64px;
  background-color: var(--accent-container);
  border-bottom: solid 2px var(--accent);
  padding: 32px 32px 64px 32px;
}
@media (min-width: 64rem) {
  .video-container {
    width: calc(100% - 128px);
    margin-top: 64px;
    padding: 64px;
  }
}

.video-inner-container {
  display: grid;
  width: 100%;
  max-width: 900px;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  grid-template-areas: "title" "video";
  grid-template-columns: 100%;
  grid-template-rows: auto;
  gap: 32px;
}
.video-inner-container #videos {
  position: relative;
}
.video-inner-container video {
  max-width: 100%;
  max-height: 80vh;
  box-shadow: var(--primary) 0px 0px 24px;
  border-radius: 16px;
  margin: 0px auto;
}
@media (min-width: 64rem) {
  .video-inner-container video {
    width: 100%;
    height: min-content;
  }
}
.video-inner-container #video-play-button {
  position: absolute;
  top: calc(50% - 64px);
  left: calc(50% - 64px);
  color: var(--primary);
  cursor: pointer;
  font-size: 128px;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6666666667);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.video-inner-container #video-desktop {
  display: none;
}
@media (min-width: 64rem) {
  .video-inner-container #video-desktop {
    display: block;
  }
}
.video-inner-container #video-mobile {
  display: block;
}
@media (min-width: 64rem) {
  .video-inner-container #video-mobile {
    display: none;
  }
}

.video-title {
  margin: 0;
  font-size: 2rem;
  grid-area: title;
  text-align: center;
}

.hero-video {
  width: 100%;
  aspect-ratio: 16/9;
  grid-area: video;
  border: solid 2px var(--primary);
  box-shadow: 0 0 24px var(--primary);
  border-radius: 24px;
}

/********** FEATURES **********/
.features-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.feature-primary {
  --accent-container: var(--dark-color);
  --accent: var(--primary);
}

.feature-tertiary {
  --accent-container: #272a20;
  --accent: var(--tertiary);
}

.feature-aqua {
  --accent-container: #0e1513;
  --accent: #00deca;
}

.feature-blue {
  --accent-container: #111418;
  --accent: #9ecaff;
}

.feature-deepPurple {
  --accent-container: #151218;
  --accent: #D3BBFF;
}

.feature-purple {
  --accent-container: #171216;
  --accent: #f9abff;
}

.feature-red {
  --accent-container: #1a1110;
  --accent: #ffb4a9;
}

.feature-yellow {
  --accent-container: #15130C;
  --accent: #DBC900;
}

.feature-container {
  width: 100%;
  background-color: var(--accent-container);
  border-bottom: solid 1px rgba(255, 255, 255, 0.3);
}
.feature-container .feature-inner-container {
  display: grid;
  width: calc(100% - 64px);
  max-width: 1200px;
  margin: 0 auto;
  grid-template-areas: "image" "text";
  grid-template-columns: 100%;
  grid-template-rows: auto min-content;
  justify-items: center;
  gap: 32px;
  padding: 64px 32px;
  transition: all 0.3s ease-in-out;
}
.feature-container .feature-text {
  text-align: center;
}
@media (min-width: 64rem) {
  .feature-container .feature-inner-container {
    grid-template-areas: "text image";
    grid-template-columns: 3fr 7fr;
    grid-template-rows: 100%;
    align-items: center;
    gap: 32px;
    padding: 64px 32px;
  }
  .feature-container .feature-text {
    text-align: end;
  }
  .feature-container:nth-child(odd) .feature-inner-container {
    grid-template-areas: "image text";
    grid-template-columns: 7fr 3fr;
  }
  .feature-container:nth-child(odd) .feature-text {
    text-align: start;
  }
}

#pricing-container .feature-inner-container {
  display: grid;
  max-width: 450px;
  margin: 0 auto;
  grid-template-areas: "image" "text";
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: unset;
  gap: 0px;
}
#pricing-container .feature-images {
  width: 100%;
  margin: 0px;
}
#pricing-container .feature-text {
  text-align: center;
}

.pricing-icon {
  width: 100%;
  grid-area: image;
  color: var(--accent);
  font-size: 88px;
  text-align: center;
}

.feature-images {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: min-content;
  grid-area: image;
}
.feature-images img {
  border: solid 1.5px var(--accent);
  border-radius: 8px;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.75);
}
@media (min-width: 64rem) {
  .feature-images img {
    border-radius: 16px;
  }
}
.feature-images .feature-image-desktop {
  width: 92%;
  height: 100%;
  margin-bottom: 24px;
}
.feature-images .feature-image-mobile {
  position: absolute;
  max-height: 85%;
  right: 0px;
  bottom: 0px;
}
@media (min-width: 64rem) {
  .feature-images {
    max-width: unset;
  }
}

.feature-image {
  width: 100%;
}

.feature-text {
  max-width: 500px;
  height: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-area: text;
  gap: 16px;
  text-align: center;
}
@media (min-width: 64rem) {
  .feature-text {
    text-align: left;
  }
}

.feature-title {
  color: var(--accent);
  font-size: 2.4rem;
  font-weight: bold;
  overflow-wrap: break-word;
}

.feature-description {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--light-color);
}

.social-media-container {
  display: flex;
  gap: 24px;
  height: 56px;
  justify-content: center;
}
.social-media-container a {
  height: 56px;
  width: 56px;
  transition: all 0.2s ease-in-out;
}
.social-media-container a:hover {
  scale: 1.2;
}
.social-media-container a img {
  height: 48px;
  width: 48px;
  padding: 6px;
}
@media (min-width: 64rem) {
  .social-media-container {
    justify-content: end;
  }
}

/********** Tech stack **********/
#techstack-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  max-width: 1200px;
  margin: 0 auto;
  gap: 16px;
  padding: 32px 16px;
  padding-bottom: 48px;
}
#techstack-section .feature-title {
  text-align: center;
}
#techstack-section .feature-description {
  text-align: center;
}

#techstack-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 16px;
  gap: 32px;
}

.techstack-item {
  display: grid;
  grid-template-areas: "icon" "text";
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  width: 240px;
  height: 240px;
  transition: all 0.2s ease-in-out;
  background-color: var(--accent-container);
  border: solid 1px rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  text-align: center;
}
.techstack-item img {
  grid-area: icon;
  width: 120px;
  height: 120px;
}
.techstack-item p {
  width: calc(100% - 16px);
  font-size: 14px;
  grid-area: text;
  border-top: solid 1px rgba(255, 255, 255, 0.3);
  padding: 8px;
}
.techstack-item:hover {
  box-shadow: 0px 4px 12px color-mix(in srgb, white, transparent 50%);
  scale: 1.08;
}

#algolia-logo .techstack-icon {
  width: 136px;
  height: 136px;
}

#stripe-logo .techstack-icon {
  width: 128px;
  height: 128px;
}

/********** DOWNLOAD BANNER **********/
.download-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 64px);
  max-width: 800px;
  margin: 32px auto;
  padding: 32px 16px;
  border: 2px solid var(--primary);
  border-radius: 48px;
  gap: 16px;
}
.download-banner h2 {
  color: var(--primary);
  margin: 0;
}
.download-banner h3 {
  color: var(--tertiary);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
  text-align: center;
}

#logo-divider {
  height: 1px;
  width: calc(100% + 32px);
  background-color: rgba(255, 255, 255, 0.3);
  margin: 16px 0px;
}

#samwise-logo {
  width: 100%;
  max-width: 380px;
  margin-bottom: 14px;
  shape-rendering: auto;
}

* {
  color: var(--primary-text);
  margin: 0px;
  scroll-behavior: smooth !important;
}

html,
body {
  height: 100%;
}

body {
  transition: opacity 0.4s linear;
  background-color: var(--dark-color);
  font-family: "Ubuntu", sans-serif;
  margin: 0px;
  padding: 0px;
  --dark-color: #19110c;
  --light-color: #fefbff;
  --primary-text: rgba(255, 255, 255, .9);
  --secondary-text: rgba(255, 255, 255, .7);
  --disabled-text: rgba(255, 255, 255, .5);
  --primary: #ffb870;
  --primary-container: #704206;
  --secondary: #c49a6c;
  --tertiary: #c0cc9a;
  --tertiary-container: rgb(38, 41, 28);
  --surface-overlay: #352919;
  --on-surface: #d5c3b5;
  --on-primary-container: #ffdcbe;
  --accent: var(--primary);
  --accent-container: var(--surface-overlay);
}

h1 {
  color: var(--tertiary);
  font-size: 2rem;
  line-height: 1.25;
}
@media (min-width: 64rem) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  color: var(--primary);
  font-size: 1.5rem;
  line-height: 1.25;
}
@media (min-width: 64rem) {
  h2 {
    font-size: 1.875rem;
  }
}

h3 {
  color: var(--primary);
  font-size: 1.125rem;
  line-height: 1.25;
}
@media (min-width: 64rem) {
  h3 {
    font-size: 1.40625rem;
  }
}

b {
  color: inherit;
  font-weight: bold;
}

footer {
  background-color: unset !important;
}

/******************** Global classes *********************/
.h-divider {
  height: 1px;
  background-color: var(--tertiary);
}

/******************** Nav buttons *********************/
#intro {
  position: absolute;
  top: 0px;
}

/******************** Scrollbar *********************/
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--dark-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/*# sourceMappingURL=index.css.map */