:root{
  --background-color:#BE9EC9;
  --people-back:#F9E3E0;
  --border-style: 2px solid #694F8E;
  --padding-size: 1rem;
  --margin-top: 2rem;
  --radius-size: 10px;
}


img{
    width: 100%;
    padding-top: 10%;
}

h1{
  font-size: 2rem;
  margin: 0;
  /* padding-top: 3rem; */
  font-family: "Kanit", serif;
  letter-spacing: 2px;
}

h2{
  font-family: "Libre Franklin", sans-serif;
  font-weight: 500;
}

h3{
  font-family: "Libre Franklin", sans-serif;
}


p, li, blockquote{
  font-family: "Work Sans", serif;
}

blockquote{
  font-style: italic;
}

aside{
  margin-top: var(--margin-top);
}

.about{
  border:var(--border-style);
  padding: var(--padding-size);
  margin-top: var(--margin-top);
  border-radius: var(--radius-size);
  background-color: var(--background-color);
}

.intro{
  background-color: white;
  /* border:var(--border-style); */
  border-radius: var(--radius-size);
  padding: var(--padding-size);
  margin-top: var(--margin-top);
  text-align: center;
}

.timeline{
  padding:.5rem 0 .5rem 2rem;
  margin-top: var(--margin-top);
  border-radius: var(--radius-size);
}

.plan, .plan2{
  background-color: var(--people-back);
  padding: var(--padding-size);
  border-radius: var(--radius-size);
  
}

.plan3{
  background-color: var(--people-back);
  border: var(--border-style);
  border-radius: var(--radius-size);
}

.plan3 img{
  margin-top: var(--padding-size);
}

.script{
  margin-top: 2rem;
}

.script, .script2, .script3{
  background-color: var(--background-color);
  border-radius: var(--radius-size);
  padding: var(--padding-size);
}

.first-p, .second-p, .third-p{
  background-color: var(--people-back);
  padding: var(--padding-size);
  margin-top: var(--margin-top);
  border-radius: var(--radius-size);
   border-radius: var(--radius-size);
}

.insight1, .insight2, .insight3, .hmw1, .hmw2, .hmw3, .dashboard, .schedule, .tutor{
  border: var(--border-style);
  padding: var(--padding-size);
  margin-top: var(--margin-top);
  border-radius: var(--radius-size);
}

.insight{
  background-color: var(--background-color);
  border-radius: var(--radius-size);
  padding: 1rem 2rem 2rem 2rem;
  margin-top: 2rem;
}

.insight1, .insight2, .insight3{
  background-color: white;
}

.hmw{
  /* background-color: var(--people-back); */
  padding: var(--padding-size);
  border-radius: var(--radius-size);
}

.hmw1{
  background-color: var(--people-back);
}

.hmw2{
  background-color: #DDCBE1;
} 

.hmw3{
  background-color: var(--background-color);
}

.syth{
  background-color: var(--background-color);
  padding: var(--padding-size);
  border-radius: var(--radius-size);
}

.dashboard, .schedule, .tutor{
  background-color: white;
}

li{
  padding-top: 1.5rem;
}


@media (min-width:1440px) {

  h1{
    font-size: 4rem;
  }

  h2{
    font-size: 2.5rem;
  }

  h3{
    font-size: 2rem;
  }

  h4{
    font-size: 1.5rem;
  }

  p{
    font-size: 1.5rem;
  }



  li{
    font-size: 1.5rem;
    padding-top: 0;
  }

  img{
    padding-top: 2%;
  }

  blockquote{
    font-size: 2.3rem;
    margin-left: 0;
    /* text-align:  center; */
  }


  .about{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    margin-top: 10rem;
  }

  .intro{
    grid-column: 1;
    padding: 5rem;
    margin: 3rem;
  }

  .timeline{
    grid-column: 2;
    margin-top: 0;
  }

  .research{
    margin-top: 2rem;
  }

  .research h2, .idea h2, .high h2{
    margin: 0;
  }

  .audit, .account, .forms, .payment, .selection, .schedule-audit, .confirm, .plan{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  aside{
    grid-column: 1/span 2;
  }

  .audit-img{
    padding-right: 2rem;
  }

  .summary{
    padding-left: 2rem;
  }

  .interview1, .interview2, .interview3, .insight, .hmw{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    margin-top: 5rem;
    background-color: #F9E3E0;
    padding: 2rem;
  }

  .recmmend{
    padding-left: 2rem;
  }

  .insight-head{
    grid-column: 1/span 3;
  }

  .insight2, .insight3, .hmw2, .hmw3{
    margin-left: 2rem;
  }

  /* .industry-research{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    margin-top: 10rem;
  }

  .audit, .account, .forms, .payment, .selection, .schedule-audit, .confirm, .plan, .script, .script2, .script3{
    padding: 1rem 3rem 1rem 3rem;
    
  } */


  .plan, .script, .script2, .script3{
    margin-top: 10rem;
  }

  .plan1{
    padding-left: 2rem;
  }

  .plan2{
    padding-top: 6rem;
    padding-left: 4rem;
    padding-right: 2rem;
  }

  .plan3{
    margin-top: 10rem;
    margin-left: 2rem;
  }

  .script, .script2, .script3{
    padding: 3rem;
  }

  /* .audit, .plan, .script, .first-p{
    grid-column: 1;
  }

  .account{
    grid-column: 2;
  }

  .forms{
    grid-column: 3;
  } */

  /* .interview{
    grid-column: 1/span 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    margin-top: 10rem;
  } */

  

  /* .second-p, .third-p{
    margin-left: 1.5rem;
  } */

  .person{
    width: 50%;
    margin-left: 20%;
  }

  /* .sythesis, .ideation{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    margin-top: 10rem;
  } */

  .note, .insight{
    grid-column: 1;
  }

  .insight1, .insight2, .insight3{
    padding: 2rem;
  }

  /* .sketch{
    margin-left: 3rem;
    margin-top: 0;
    padding: 0;
    
  } */

  .hmw1, .hmw2, .hmw3{
    padding: 2rem;
  }



  /* .hmw2, .hmw3{
    margin-top: 10rem;
  } */

  /* .syth{
    grid-column: 1/span 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    margin-top: 10rem;
  } */

  .syth, .idea-sketch{
    margin-top: 5rem;
  }

  .sktech-img{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .sketch, .sketch2{
    padding: 2rem;
  }

  /* .sketch2{
    margin-top: 5rem;
  } */

  /* .sketch{
    width: 80%;
    margin-top: 0;
    padding-left: 2rem;
  } */

  .syth-idea{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    /* margin-left: 3rem;
    margin-right: 12rem; */
  }

  .syth-head{
    grid-column: 1/span 3;
  }

  .schedule, .tutor{
    margin-left: 2rem;
  }

  .prd{
    grid-column: 1/span 2;
    margin-top: 10rem;
  }

  .lo-fi{
    /* display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto; */
    margin-top: 10rem;
  }

  .home, .signin, .coursep, .coursep2, .tutorp, .schedulep, .schedulep2, .paymentp, .bookp{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    margin-top: 10rem;
  }

  .high-fi{
    margin-top: 10rem;
  }

  .wire-img1{
    grid-column: 1;
  }

  .wire-img1, .wire-img2, .wire-img3{
    padding-left: 1rem;
  }

  .page1, .signin{
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }

  .description, .description-course{
    /* display: 1/span 2; */
    margin-top: 2.3rem;
    padding-left: 5rem;
    position: sticky;
    top: 100px;
    height: 80%;
  }
  
  .description-pay{
    grid-column: 1/span 2;
  }
/* 
  .description li{
    font-size: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
   */
  .description-sign{
    grid-column: 1/span 2;
    padding-top: 2rem;
  }

  .signin1{
    grid-column: 1;
    padding-right: 3rem;
  }

  .signup{
    grid-column: 2;
    padding-left: 3rem;
  }

  .logo, .home1,  .home2, .home3,  .home4, .course1, .course2, .tutor1, .tutor2, .schedel1, .schedul2, .schedul3, .schedul4, .pay1, .pay2, .pay3, .pay4, .pay5{
    padding: 3rem;
  }

  

  .home1, .signin1, .course1, .tutor1, .schedel1, .pay1{
    grid-column: 1;
  }

  /* .account-img{
    margin-top: 7rem;
  } */

  
}