/* NAVBAR */

.navbar {
  background-color: #9EC8B9;
  padding: 2rem 4rem 2rem 4rem;
}

.navbar .container-fluid {
  justify-content: center;
}

.navbar-nav {
  flex-direction: row;
  gap: 8px;
}

.nav-link {
  padding: 0.25rem;
  margin: 0.25rem;
}

.bi {
  font-size: 48px;
}

.bi-github {
  color: #277978;
}

.bi-github:hover {
  color: #096568;
}

.nav-link:not(.ext-link):hover {
  color: #1E1E1E !important;
}

.nav-link.active, .nav-link.active:hover {
  color: #F9F9F9 !important;
  background-color: #096568 !important;
  border-radius: 8.45px;
}

/* MAIN */

/* Small devices */
#hero {
  max-height: 100%;
  height: 182vh;
  width: 100%;
  margin-top: 3rem;
  position: relative;
  background: url('../content/hero-sm.png') no-repeat top / contain, 
              url('../content/mockscreen-sm.png') no-repeat center / contain,
              url('../content/freeform_bg.svg') no-repeat 5% -5% / cover;
  z-index: -1;
}

h1 {
  font-size: 36px;
  width: 50vw;
  position: absolute;
  text-transform: uppercase;
  letter-spacing: 4vw;
  line-height: 170%;
  padding: 22vh 2rem 14vh 2rem;
  margin-top: -132vh;
}

h2 {
  font-size: 36px;
  text-transform: capitalize;
}

h3 {
  font-size: 32px;
}

#desc {
  gap: 10rem;
  margin-top: -28rem;
}

#desc > div {
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
}

#waitlist {
  background-color: #DCF0E9;
}

#stats {
  margin: 3vw;
  padding: 10vw;
}

#stats h2 {
  padding: 2vh;
}

#stats p {
  width: 12rem;
  padding: 0.45rem;
  margin-top: -2.8vh;
  margin-bottom: 4vh;
  margin-left: auto;
  margin-right: auto;
  color: var(--bs-secondary);
}

#cta {
  background-color: #D5E9E2;
  padding: 4vw;
}

#cta div:first-child {
  margin: 5vw;
}

#cta div:nth-child(2) {
  margin: 4vw;
}

#cta p {
  margin-top: 1rem;
}

footer {
  color: #D2E9EA;
  background-color: #096568;
}

h5, .icon-bar a {
  color: #F7E6BA;
}

footer .nav-link {
  color: var(--bs-light);
  --bs-nav-link-color: var(--bs-gray-300);
  --bs-nav-link-hover-color: var(--bs-gray-200);
}

/* Extra-small devices */
@media all and (max-width: 320px) {
  #hero {
    height: 264vh;
  }

  h1 {
    font-size: 28px;
    margin-top: -56rem;
  }
}

/* Medium devices */
@media all and (min-width: 576px) {
  .navbar{
    padding: 5rem 6rem 5rem 6rem;
  }

  .navbar .container-fluid {
    justify-content: space-between;
  }
  
  #hero {
      height: 64vh;
      background: url('../content/hero-md.png') no-repeat top / contain, 
                url('../content/freeform_bg.svg') no-repeat 5% -5% / cover;
  }

  h1 {
    font-size: 4.8vw;
    letter-spacing: 20px;
    padding: 72vh 4rem 6vh 4rem;
    margin-top: -84vh;
  }

  h2 {
    font-size: 4.2vw;
  }

  h3 {
    font-size: 3.6vw;
  }

  #desc {
    gap: 4rem;
    margin-top: -12rem;
  }

  #desc div:first-child {
    width: 60vw;
  }

  #desc div:nth-child(2) {
    width: 64vw;
    margin-top: -10vh;
    margin-left: 20vw;
  }

  #cta p {
    margin-top: 0;
  }
}

@media all and (min-width: 768px) {
  #hero {
      height: 68vh;
      background-position: 0% 20%;
  }

  h1 {
    font-size: 5vw;
    letter-spacing: 20px;
    padding: 72vh 4rem 12vh 4rem;
    margin-top: -78vh;
  }

  #desc {
    gap: 4rem;
    margin-top: -14rem;
  }

  #desc div:first-child {
    width: 60vw;
  }

  #desc div:nth-child(2) {
    width: 82vw;
    margin-left: 18vw;
  }

  #stats {
    padding: 5vw;
  }

  #cta div:first-child {
    margin: 2vw;
  }
}

@media all and (min-width: 850px) {
   #hero {
      height: 76vh;
      background-position: 0% 30%;
  }

  h1 {
    font-size: 6vw;
    letter-spacing: 20px;
    padding: 76vh 4rem 12vh 4rem;
  }

  #desc {
    gap: 4rem;
    margin-top: -14rem;
  }

  #desc div:first-child {
    width: 60vw;
  }

  #desc div:nth-child(2) {
    width: 82vw;
    margin-left: 18vw;
  }
}

/* Large devices */

@media all and (min-width: 992px) {
  #hero {
      height: 120vh;
      background-position: 0% 40%;
  }

  h1 {
    font-size: 6vw;
    letter-spacing: 20px;
    padding: 84vh 4rem 12vh 4rem;
  }

  #desc {
    gap: 4rem;
  }

  #desc div:first-child {
    width: 60vw;
  }

  #desc div:nth-child(2) {
    width: 82vw;
    margin-left: 18vw;
  }

  .icon-link {
    margin: 4vw;
  }
}

@media all and (min-width: 1200px) {
  #hero {
    height: 132vh;
    background: url('../content/hero-lg.png') no-repeat top / 90%, 
                url('../content/freeform_bg.svg') no-repeat center / cover;
  }

  h1 {
    font-size: 4.8vw;
    width: 200px;
    letter-spacing: 2vw;
    padding: 14vh 0 38vh 10rem;
    margin: 0;
  }

  h2 {
    font-size: 3.6vw;
  }

  h3 {
    font-size: 2.4vw;
  }

  #desc {
    margin: -36vh 0 0 -14vh;
  }

  #desc div:first-child {
    width: 50vw;
  }

  #desc div:nth-child(2) {
    margin-left: 30vw;
    width: 80vw;
  }
}

/* Extra-large devices */
@media all and (min-width: 1500px) {
  #hero {
    height: 160vh;
    margin-top: 2vh;
  }

  h1 {
    font-size: 5vw;
    width: 200px;
    letter-spacing: 2vw;
    padding: 20vh 0 40vh 20vh;
  }

  h2 {
    font-size: 4vw;
  }

  h3 {
    font-size: 3vw;
  }

  #desc {
    margin: -40vh 0 0 -12vh;
  }

  #desc div:first-child {
    width: 48vw;
  }

  #desc div:nth-child(2) {
    margin-left: 30vw;
    width: 64vw;
  }
}

@media all and (min-width: 1800px) {
  #hero {
    height: 200vh;
    margin-top: 4vh;
  }

  h1 {
    margin-top: -20vh;
  }

  #desc {
    margin: -50vh 0 0 -12vh;
  }

  #desc div:nth-child(2) {
    margin-left: 28.5vw;
    width: 70vw;
  }
}

/* FONTS */

.roboto-regular {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}