:root {
  --ff-sans: 'Poppins', sans-serif;
  --ff-serif: "IBM Plex Serif", serif;

  /* small screen font-sizes */
  --fs-200: 0.75rem;
  --fs-300: 0.813rem;
  --fs-400: 1rem;
  --fs-500: 1.063rem;
  --fs-600: 1.25rem;
  --fs-800: 2.125rem;
  --fs-900: 3.375rem;
  
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-700: 700;

  --clr-neutral-100: #ffffff;
  --clr-neutral-200: #f5f7fa;
  --clr-neutral-300: #737b8c;
  --clr-neutral-400: #434956;
  --clr-neutral-900: #020203;
  
  --clr-primary-500: #0469dc;
  --clr-secondary-600: #5858da;
  --clr-secondary-700: #0469DC;
  --clr-secondary-900: #05090f;

  --br-100: 1rem;
  --br-200: 2rem;
  --br-300: 2.5rem;
}

@media (min-width: 40em) {
  :root {
    --fs-300: 1.25rem;
    --fs-900: 5rem;
  }
}

/* reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  line-height: 1;
}

body,
h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

input,
button,
textarea,
select {
  font: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--br-300);
}

body {
  line-height: 1.75;
  font-family: var(--ff-sans);
  padding: 0 2.5rem;
}

.bg-primary-100 {
  background-color: var(--clr-neutral-100);
}

.bg-secondary-200 {
  background-color: var(--clr-neutral-200);
  border-radius: 4px;
}

/* typography/utility classes */

h1,
h2,
h3,
.section-subtitle,
.text-serif {
  font-family: var(--ff-sans);
}

a {
  color: var(--clr-neutral-900);
  text-decoration: none;
}

.text-li {
  font-size: var(--fs-300);
  line-height: 1;
  font-weight: var(--fw-400);
  color: var(--clr-neutral-900);
}

.text-serif {
  font-family: var(--ff-serif);
  font-size: var(--fs-500);
  font-weight: var(--fw-400);
  line-height: 1.75;
}

.main-title {
  font-weight: var(--fw-300);
  font-size: clamp(3.375rem, 5vw + 1rem, 5rem);
  line-height: 1.2em;
}

.section-title {
  font-family: var(--ff-sans);
  font-weight: var(--fw-300);
  font-size: var(--fs-800);
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.btn {
  display: inline-block;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0.2em 1em;
  font-size: var(--fs-300);
  font-weight: var(--fw-600);
  font-family: var(--ff-sans);
  text-decoration: none;
  border-radius: 32px;
}

.btn-small {
  font-size: var(--fs-300);
  font-weight: var(--fw-400);
}

.btn-large {
  font-size: var(--fs-600);
  font-weight: var(--fw-500);
}

.btn-black {
 background-color: var(--clr-secondary-900);
 color: var(--clr-neutral-100);
}

.btn-blue {
  background-color: var(--clr-primary-500);
  color: var(--clr-neutral-100);
}

.btn-purple {
  background-color: var(--clr-secondary-600);
  color: var(--clr-neutral-100);
}


/* general layout */

section {
  padding-top: 1.5rem;
  padding-bottom: 5rem;
}

.container {
  max-width: 50rem;
  margin: 0 auto;
}



@media (min-width: 80em) {
  .container {
    max-width: 70rem;
  }
}

.flow-content > * + * {
  margin-top: var(--flow-spacer, 1.5em);
}

.flow-bottom > * + * {
  margin-bottom: var(--flow-spacer, 1.5em);
}

.split {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1em;
}

.xl-space-small {
  margin-bottom: 1.5rem;
}

.xl-space {
  margin-top: 3.5rem;
}

.xl-bottom {
  margin-bottom: 3.5rem;
}

/* SECTIONS */

/* primary-header */

.container nav:nth-child(2) {
  display: none;
}

.container nav:nth-child(5) {
  display: none;
}

.header-large,
.header-large-desktop,
.tablet-nav,
.desktop-nav, 
.main-nav-tablet,
.main-tablet {
  display: none;
}

nav .sub-mobile {
  display: none;
}

.logo-mobile {
  width: 3rem;
  max-height: 2rem;
}

.hero-img {
  box-shadow: 0px 40px 80px rgb(161, 149, 149);
}

.search {
  width: 1.5rem;
  max-height: 1.5rem;
}

nav .sub-mobile {
  display: none;
}

.main-nav > :first-child,
.main-nav >:last-child {
  display: none;
}

.main-nav > :nth-child(2){
  position: relative;
}

.main-nav > :nth-child(2)::after {
  display: inline-block;
  content:'';
  position: absolute;
  border-bottom: 3px solid black;
  width: 100%;
  top: 25px;
  left: 0;
  z-index: 1;
}

@media (min-width: 35em) and (max-width: 64em) {
  .primary-header .header-mobile {
    display: flex;
  }

}

@media (min-width: 64em)  {
  .container nav:nth-child(5) {
    display: none;
  }

  .main-nav >:first-child,
  .main-nav >:last-child {
    display: block;
  }

  .main-nav > :nth-child(2)::after {
    display: none;
    
  }

  .main-nav >:first-child{
    position: relative;
  }
  
  .main-nav > :first-child::after {
    display: inline-block;
    content:'';
    position: absolute;
    border-bottom: 3px solid black;
    width: 100%;
    top: 25px;
    left: 0;
    z-index: 1;
  }

  .header-large {
    display: flex;
  }
  .logo-large {
    display: inline-block;
  }

  .sign-in {
    color: var(--clr-secondary-700);
    font-weight: var(--fw-500);
  }

  .split {
    align-items: center;
  }

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

  .search {
    position: relative;
    width: 40%;
    padding: 1em;
    outline: none;
    border-radius: 6px;
    border: none;
    background: var(--clr-neutral-200) url(./assets/search.svg) right .8em center;
    background-repeat:  no-repeat;
  }

  .hero .main-title {
    font-size: 4rem;
  }
  
  .primary-header .header-mobile {
    display: none;
  }

  .primary-header .header-large {
    display: block;
  }

  nav .sub-mobile {
    display: block;
  }
  
  .text-li{
    font-size: var(--fs-200);
    line-height: 1;
    font-weight: var(--fw-400);
    color: var(--clr-neutral-900);
  }
  
  .split {
    gap: 2em;
    justify-content: space-between;
  }
} 

@media (min-width: 80em) {
  .container nav:nth-child(3) {
    display: none;
  }
  .container nav:nth-child(5) {
    display: none;
  }

  .primary-header .header-mobile {
    display: none;
  }

  .primary-header .header-large {
    display: block;
  }

  nav .sub-mobile {
    display: block;
  }

  .main-nav > :first-child,
  .main-nav >:last-child {
    display: block;
  }

  .main-nav > :first-child::after {
    top: 40px;
  }

  .desktop-nav {
    display: flex;
    padding: 1em 0;
  }

  .main-nav {
    max-width: 35%;
  }

  .main-nav > li  {
    flex-basis: 5%;
  }

  .hero .main-title {
    font-size: 5rem;
  }
}


/* Courses */

.course-gallery-mobile {
  display: grid;
  grid-template-columns: 1fr;
  
}

.course {
  border-radius: 24px;
  padding: 1.5rem;
  margin: 1.5em auto;
  display: flex;
  flex-direction: column;
  gap: 3em;
}

.empty {
  flex-grow: 1;
}

.rated {
  align-self: center;
}

.course-split {
  display: flex;
  justify-content: space-between;
  gap: .5em;
}

.tablet-nav,
.desktop-nav {
  display: none;
}

.header-large .main-nav {
  display: none;
}

.course-gallery-tablet,
.course-gallery-desktop {
  display: none;
}

.course-title {
  font-size: var(--fs-800);
  line-height: 1em;
}

.author {
 font-size: var(--fs-200);
}

.pricing {
  display: flex;
  justify-content: space-between;
}

.price {
  font-size: var(--fs-600);
}

@media (min-width: 35em) {

  
  .course-gallery-mobile,
  .course-gallery-desktop {
    display: none;
  }

  .course-gallery-tablet {
    display: block;
  }
  
  .course-gallery-tablet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 1.5em 1.5em;
  }

  .courses .tablet-nav {
    display: block;
  }

  .split-nav {
    display: flex;
  }

  .tablet-nav .sub-mobile {
    display: block;
  }

  .tablet-nav {
    display: flex;
    justify-content: space-between;
  }

  .sale {
    font-size: var(--fs-200);
    text-decoration: line-through;
  }

  .course-gallery-tablet .blue {
    color: var(--clr-secondary-700);
  }
}


@media (min-width: 80em) {
  .courses .tablet-nav {
    display: none;
  }

  .courses .header-large-desktop,
  .courses .desktop-nav {
    display: block;
  }

  .course-gallery-mobile,
  .course-gallery-tablet {
    display: none;
  }

  .course-gallery-desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5em 1.5em;
  }

  .pricing-wrapper .blue {
    color: var(--clr-secondary-700);
  }
}


/* Get started */

.get-started .yarn-img {
  box-shadow: 0px 10px 50px rgb(161, 149, 149);
}

.get-started button {
  display: block;
}

.get-started .container {
  flex-direction: column;
  padding-top: 1.5em;
}

.get-started .more {
  color: var(--clr-secondary-700);
  display: inline-block;
}

@media (min-width: 35em) {
  .get-started button {
    display: inline-block;
    margin-right: 2rem;
  }
}

@media (min-width: 64em) {
  .get-started .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  } 

  .get-started .get-started-content {
    order: -1;
    flex-basis: 50%;
  }

  .get-started .yarn-img {
    width: 20rem;
    max-height: 20rem;
  }

  .get-started button {
    display: inline-block;
  }

  .get-started .more {
    margin-left: 1.5em;
  }
}

/* Become instructor */

.become-instructor {
  padding-bottom: 1.5rem;
}

.become-instructor .main-title {
  font-size: 3.1rem;
}

.become-instructor .container {
  flex-direction: column;
  gap: 1.5em;
  position: relative;
  padding-bottom: 3.5rem;
}

.become-instructor .profile-img {
  margin-left: auto;
  box-shadow: 0px 10px 50px rgb(161, 149, 149);
  object-fit: cover;
}

.become-instructor button {
  align-self: flex-start;
  display: inline-block;
}

.become-instructor button::after {
  display: inline-block;
  content:'';
  position: absolute;
  border-bottom: 3px solid #f1f3f7;
  width: 100%;
  bottom: 0px;
  left: 0;
  z-index: 1;
}

@media (min-width: 45em) {
  .become-instructor .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }

  .become-instructor button {
    align-self: end;
    display: block;
  }

  .become-instructor .instructor-content {
    flex-basis: 60%;
  }

  .become-instructor .profile-img {
    max-height: 20rem;
    width: 20rem;
    flex-basis: 40%;
  }
}

/* Footer */

.footer-split {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.footer-content img {
  align-self: flex-start;
}

.footer .footer-nav {
  margin-top: 0;
}

.social {
  display: flex;
  gap: 1em;
}

@media (min-width: 40em) {
  .header-mobile,
  .nav-mobile,
  .mobile-nav,
  .header-large-desktop,
  .desktop-nav {
    display: none;
  }

  .split-nav {
    display: flex;
    gap: 2em;
  }

  .footer-split {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5em;
  }

  .footer  .footer-nav {
    display: flex;
    gap: 1em;
    margin-top: 0;
  }

  .footer .footer-nav li  {
    margin-top: 0;
  }

  .footer .footer-content {
   margin-bottom: 3em; 
  }

  .footer-content img {
   align-self: flex-start;
  }

  .footer .social {
    margin-bottom: 0;
    align-self: flex-start;
  }
}