.header {
  padding: 1rem;
  position: relative;
}
.navbar-link:link,
.navbar-link:visited {
  font-size: var(--size-3xl);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -2px;
  color: var(--clr-font);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar-list {
  display: none;
}
.mobile-nav {
  width: var(--size-5xl);
  height: var(--size-5xl);
  color: var(--clr-font);
  display: block;
}
.icon-sun {
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
}
/* ******************************************* */
/* mobile navigation */
/* ******************************************* */

/* .navbar-list--mobile { */
.mobile-navbar {
  display: none;
  position: absolute;
  /* display: flex; */
  /* top: 0; */
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--clr-background-two);
  height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

/* ********************* list ********************** */
.navbar-list--mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  /* color: white; */
  list-style: none;
}

.mobile-nav__link-line {
  border: 1px solid var(--clr-font);
  padding-right: 1.5em;
}

/* ********************* link ********************** */
.navbar-anchor--mobile:link,
.navbar-anchor--mobile:visited {
  /* color: black; */
  text-decoration: none;
  /* color: var(--clr-round); */
  font-size: var(--size-2xl);
}
.navbar-anchor--mobile:hover,
.navbar-anchor--mobile:active {
  color: var(--clr-lighter);
}

.btn-signIn-mobile {
  padding: 0.6rem 3rem !important;
}
/* state */
.show-navbar {
  display: block;
}
/* .navbar-list--mobile li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
} */
/* icon */
.icon-sun-mobile {
  /* color: black; */
}

.openNavbar {
  display: flex;
}

/* xs */
@media (min-width: 475px) {
}

/* sm */
@media (min-width: 640px) {
}
/* md */
@media (min-width: 768px) {
  /* .header {
    display: flex;
    align-items: center;
    gap: 4rem;
  }

  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navbar-list {
    display: flex;
    gap: 4rem;
    list-style: none;
  } */

  /* .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar-list {
    display: flex;
    list-style: none;
    gap: 3.2rem;
  } */
  .header {
    /* padding: var(--space-seven) var(--space-ten); */
    padding: 32px 0;
    /* padding-left: 33px !important; */
    /* padding-right: 33px !important; */
  }

  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar-link:link,
  .navbar-link:visited {
    font-size: var(--size-4xl);
  }

  .navbar-links {
    display: flex;
    align-items: center;
    gap: 3rem;
  }

  .navbar-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-two);
  }
  .navbar-anchor:link,
  .navbar-anchor:visited {
    text-decoration: none;
    color: var(--clr-font);
    font-size: var(--size-xl);
  }

  .navbar-anchor:hover,
  .navbar-anchor:active {
    color: var(--clr-lighter);
  }
  /* button */

  .btn--signIn {
    background: none !important;
    /* border: 1px solid; */
    color: var(--clr-font) !important;
    box-shadow: inset 0 0 0 1px;
  }

  .btn--signIn:hover,
  .btn--signIn:active {
    background-color: var(--clr-font) !important;
    color: var(--clr-span) !important;
  }

  .btn--started {
    display: flex !important;
    align-items: center;
    gap: 0.8rem;
  }

  .arrow-icon {
    font-size: 1.2rem;
    color: var(--clr-span);
  }
  .mobile-nav {
    display: none;
  }
}
/* lg */
@media (min-width: 1024px) {
  /* increase font size */
  html {
    font-size: 85%;
  }
}
/* xl */
@media (min-width: 1280px) {
  html {
    font-size: 89%;
  }
}

/* 2xl */
@media (min-width: 1536px) {
}