:root{
  --text-color:#1a1c20;
  --link-color:#4a76ee;
  --background-color:#eeeff1;

}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
body{
  font-family:'Poppins',sans-serif;
  background-color:var(--background-color);
  max-width:1400px;
  margin:0 auto;
}
a{
  color:var(--link-color);
  text-decoration:none;
}
/*NavBar*/
nav{
  display:flex;
  justify-content:space-between;
  padding: 20px 50px;
  height:80px;
}
nav .left a{
  color:var(--text-color);
  font-size:22px;
  font-weight:600;
}
nav .right a{
  color:var(--text-color);
  margin:0 10px;
}
nav .right a:last-child{
color:var(--background-color);
background-color:var(--text-color);
padding: 5px 15px;
border-radius:8%;
}
nav .right a span{
  margin:0 5px;
}


/*Hero  section*/
.Hero-section{
  display:flex;
  justify-content:space-between;
  
  padding:50px 50px;
  align-items:center;
  gap:40px;
  margin-bottom:75px;
}

.Hero-section .Text h2{
  font-size:45px;
}
.Hero-section .Text p{
  
  flex:5;
  
}
.Hero-section .Headshot {
  display:flex;
  flex:2;
  justify-content:flex-end;
  

}
.Hero-section .Headshot img{
  width:350px;
  height:350px;
  border-radius:50%;
  border-width:2px;
  border-color:black;
  border-style:solid;
  object-fit:cover;
  
}

.Hero-section .Text .links {
  margin-top:20px;
  
}
.Hero-section .Text .links a{
  display:inline-block;
  padding:5px 10px;
  border:2px;
   border-style:solid;
  border-color:var(--link-color);
  border-radius:5px;
  margin-right:10px;
  margin-bottom:10px;
  transition:0.1s;

}
.Hero-section .Text .links a:hover{
  color:var(--text-color);
  border-color:var(--text-color);
}
/*Section 2:Skills*/
.Skills-section{
 padding:0 50px;
 margin-bottom:100px;

}
.Skills-section h2{
 text-align:center;
 font-size: 35px;
}
.Skills-section .text{
 text-align:center;
 margin-bottom: 20px;
}
.Skills-section .cells {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.Skills-section .cells .cell img{
 height:30px;
 width: 30px;
object-fit:contain;
border-radius:2px;
}
.Skills-section .cells .cell {
  display:flex;
  justify-content:center;
  align-items:center;
  width: 200px;
 padding:20px 10px;
 border:1.5px solid #d3d3d3;
 border-radius:5px;
 margin:10px;
 gap:10px;
}
.Skills-section .cells .cell span{
font-size: 18px;
}
/*Section 3:project Section*/
.Projects-section{
  padding: 0 50px;
  margin-bottom:100px;
}
.Projects-section h2{
  text-align:center;
  font-size:35px;
}
.Projects-section p{
  text-align:center;
  margin-bottom:20px;
}
.Projects-section .project-cards {
display:flex;
  justify-content:center;
  
}
.Projects-section .project-cards .project-card{
  width:200px;
  height:250px;
  align-items:center; 
   justify-content:center;
  border:2px dashed #292828;
  border-radius:5px;
  display:flex;
}
.Projects-section .project-cards .project-card h2{ 
  text-align:center;
  justify-content:center;
}
/*Section 4:Contact*/
.Contact-section{
  padding:0 50px;
  margin-bottom:100px;
} 
.Contact-section h2{
  text-align:center;
  font-size:35px;
}
.Contact-section .group{
  display:flex;
  gap:50px;
}
.Contact-section .group .text{
  flex:3;
  margin-top:20px;
}
.Contact-section .group form{
  flex:3;
  display:flex;
  flex-direction:column;
}
.Contact-section .group form input,.Contact-section .group form textarea{
  font-family:'poppins',sans-serif;
  border:2px solid var(--link-color);
  background-color:transparent;
  padding:10px;
  margin-bottom:15px;
  outline:none;
  resize:none;
}
.Contact-section .group form button{
 
    font-family:'poppins',sans-serif;
  justify-content:right;
  border-radius:5px;
  border:none;
  background-color:var(--link-color);
  color:white;
  height:50px;
  font-size:16px;
  cursor:pointer;
  transition:0.1s;

}

.Contact-section .group form button:hover{
filter:brightness(0.9);
}


@media (max-width:800px){
  /*section1:hero*/
  .Hero-section .Text h2{
    font-size:35px;
  }
  .Hero-section .Text p{
    width:350px;
  }
  .Hero-section{
    flex-direction:column-reverse;
    margin-top:20px;
  
}

}
@media (max-width:740px){
  .Hero-section .Text h2{
    
    font-size:20px;
    font-color:tomato;
  }
  .Hero-section .Headshot img{
    width:300px;
    height:300px;
  }
}
@media (max-width:600px){
  /*nav bar*/
  nav{
    padding:0 20px;

  }
  nav .right a span{
    display:none;
  }
  nav .right a {
    font-size:22px;
    margin:0 2px;
  }
    nav .right a:last-child{
    color:var(--text-color);
    background-color:transparent;
    padding:0;
    

  }
  /*Section1 :Hero section*/
  .Hero-section{
    padding:0 20px;
    
  }
  .Hero-section .Text h2{
    font-size: 30px;
  }
  /*Section 2:Skills */
  .Skills-section {
    padding:0 20px;
  }
  .Skills-section .cells .cell span{
    font-size: 16px;
  }
/*Section 3:Projects*/
.Projects-section{
  padding:0 20px;
}
.Projects-section .project-cards .project-card h2{
  font-size:30px;
}
/*Section 4:Contact*/
.Contact-section{
  padding:0 20px;
}
.Contact-section .group{
  flex-direction:column;
}
}