h1, h2, h3, h4, p, ul, li{
  font-family: "Rubik", sans-serif;
}

/* h1 {
  font-size: 40px;
  font-family: sans-serif; 
  text-transform: uppercase;
  font-style: bold;
}

h2{
  font-size: 40px; 
  font-family: sans-serif;
}

h3{
  font-size: 30px;
  font-family: sans-serif;
}

h4{
  font-size: 20px;
  font-family: sans-serif;
  text-transform: uppercase;
  text-align: center; 
}

p{
  font-size: 22px;
  font-family: sans-serif;
  line-height: 1.5;   
}

li{
  font-size: 20px; 
  font-family: sans-serif;

} */

*{
  padding: 0;
  margin: 0;
  /* box-sizing: border-box; */
}

html{
  font-size: 62.5%;
}

body{
  line-height: 1;
  font-weight: 400;
}

/***********************/
/*General Resuable Components*/

.container{
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.grid{
  display: grid;
  column-gap: 6.4rem;
  row-gap:9.6rem;
}

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

.heading-primary,
.heading-secondary{
  font-size: 3.8rem;
  font-weight: 800;
  line-height: 1.05;
}

.heading-primary{
  color: darkslategrey;
  margin-bottom: 3.2rem;
  margin-top: 9.6rem;
}

.heading-secondary{
  float: center;
  align-items: center;
  color: darkslategrey;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.subheading{
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #305563;
  /* text-transform: uppercase; */
  margin-bottom: 3.5rem;
  letter-spacing: 0.75px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.btn:link, 
.btn:visited{
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  padding: 1.2rem 2.8rem; 
  border-radius: 9px;
  transition: all 1s; /*this is for the background color animation transition*/
}

.btn--linkedin:link,
.btn--linkedin:visited{
  background-color: #5494ae;
  color: white;
}

.btn--linkedin:hover,
.btn--linkedin:active{
  background-color: #305563;
}


/***********************/
/*Header*/

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #60aac6;
  height: 9.6rem;  /*we want this to be sticky, we want this to stay the same when we scroll down*/ 
  padding: 0 4.8rem;
  position: fixed;
  top: 0;
  width: 100%;
}

/***********************/
/*Navigation*/

.main-nav-list{
  list-style: none;
  display: flex;
  gap: 3.2rem; 
}

.main-nav-link:link, 
.main-nav-link:visited{
  display: inline-block;
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.main-nav-link:hover, 
.main-nav-link:active{
  color: #305563;
}

.contact-logos{
  list-style: none; 
  display: flex;
  padding: 1.5rem; 
}

.connect-img{
  max-width: 5rem;
}


/***********************/
/*Profile page section*/ 
.angela-deng{
  background-color: #e4f6fe;
  padding: 9.6rem;
}

/* this aligns the angela class under the html. */
.angela{
  max-width: 120rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* thi splits it into the 2 columns*/
  gap: 9.6rem;
  align-items: center;
}


.description{
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  width: 110%;

}

.bullet-summary{
  font-family: "Rubik";
  list-style-position: inside;
  margin:0 0 1em 15px;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.margin-sm{
  margin: 1rem !important;  /* this means that this is the highest pri*/
}

.margin-lrg{
  margin: 3rem;
}

.angela-img{
  margin-left: 9.6rem;
  border-radius: 2rem;
}



/***********************/
/*Projects section*/ 
.section-projects{
  padding:9.6rem;
  background-color: #f2fbfe;
}

.next-projects{
  padding:9.6rem;
  background-color: #f2fbfe;
}

.project-name{
  font-size: 9.6rem;
  font-weight: 600;
  color:rgba(160, 156, 156, 0.603);
  margin-bottom: 1.2rem;
  margin-top: 8rem;
}

.next-project{
  font-size: 8rem;
  font-weight: 600;
  color:rgba(160, 156, 156, 0.603);
  margin-bottom: 1.2rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-description{
  font-size: 2rem;
  line-height: 1.8;
  color: #24404a;
  margin-bottom: 1.5rem;
}

.next-description{
  width: 60%;
  margin-left: auto;
    margin-right: auto;
  font-size: 2rem;
  line-height: 1.8;
  color: #24404a;
}

.step-img-box{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
}

.step-img{
  width: 50%;
  border-radius: 2rem;
}

.step-img2{
  width: 110%;
  border-radius: 2rem;
}


/***********************/
/*Footer section*/ 
.footer{
  float: center;
  align-items: center;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  background-color: #60aac6;
}
.contact-footer{
  font-size: 3rem;
  font-weight: 600;
  color: #e4f6fe;
  margin-bottom: 1rem;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-linkedIn{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the other link is in the header sections for reference*/ 
.btn--linkedin2:link,
.btn--linkedin2:visited{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d7f2fd;
  color: #24404a;
}

.btn--linkedin2:hover,
.btn--linkedin2:active{
  background-color: #86d8f9;
}


/***********************/
/*Copyright section*/ 

.copyright{
  display: flex;
  align-items: center;
  justify-content: center;
}



/***********************/
/*Media Queries*/ 

@media(max-width: 79em){
html{
  font-size: 50%;
}

.grid{
  column-gap: 4.8rem;
  row-gap: 6.4rem;
}
  /* .angela-deng{
max-width: 120rem;
  } */

  .section-projects{
    padding:5rem;
  }

.heading-primary{
font-size: 4.4rem; 
}

}


@media(max-width: 59em){
  html{
    font-size: 40%;
  }

  .angela-img{
    height: 80%;
    width: 80%;
  }

  .section-projects{
    padding:6.8rem;
  }

  .step-img2{
    height: 80%;
    width: 90%;
  }
}

@media(max-width: 34em){
  html{
    font-size: 25%;
  }
  
  .grid{
    column-gap: 1rem;
    row-gap: 1rem;
  }

  .heading-primary{
  font-size: 3.5rem; 
  }

  .angela-deng{
    padding: 6.4rem;
  }

  .angela-img{
    height: 75%;
    width: 75%;
    margin-left: 5.5rem;
  }

  .description{
    width: 120%;
  
  }

  .section-projects{
    padding:5rem;
  }
  
 .step-img{
  width: 65%;
 }

 .step-img2{
  height: 70%;
  width: 80%;
  margin-left: 8rem;
 }

 .step-description{
  width: 110%;
}

 .next-description{
  width: 80%;
}
 
}

@media(max-width: 22em){
  html{
    font-size: 22%;
  }
  
  .grid{
    column-gap: .5rem;
    row-gap: .5rem;
  }

  .angela-deng{
    padding: 5rem;
  }

  .angela{
    max-width: 130rem;
    grid-template-columns: 1fr 1fr;  /* thi splits it into the 2 columns*/
    gap: 5rem;
    align-items: center;
  }

  .angela-img{
    height: 80%;
    width: 80%;
    margin-left: 5.5rem;
  }

  .description{
    width: 120%;
  }


  .section-projects{
    padding:5rem;
  }

  .project-name{
    margin-bottom: 1.2rem;
    margin-top: 5rem;
  }
  
 .step-img{
  width: 70%;
  margin-left:0;
 }

 .step-img2{
  height: 70%;
  width: 80%;
  margin-left: 8rem;
 }

 .step-description{
  width: 100%;
}

 .next-description{
  width: 90%;
}
 
}