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

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

body {
      font-family: "Poppins", sans-serif;
      color: var(--text-color);
      background-color: var(--background-color);
      max-width: 1440px;
      margin: 0 auto;

}

a {
      text-decoration: none;
      color: var(--link-color);

}

/*nav*/
nav 
{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 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 20px;
      font-weight: 600;

}

nav .right a span {
      margin-left: 5px;
}

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

.hero-section .text {
      flex: 5;
}
.hero-section .text h2{
      font-size: 45px;
}

.hero-section .text .links {
      margin-top: 25px;
}

.hero-section .text .links a {
      display: inline-block;
      padding: 5px 10px;
      border: 2px solid var(--link-color);
      border-radius: 5px;
      margin-right: 10px; 
  }

  .hero-section .text .links a:hover {
      color: var(--text-color);
      border: 2px solid var(--text-color)
  }

.hero-section .headshot {
      flex: 2;
      display: flex;
      justify-content: right;
}

.hero-section .headshot img {
      width: 300px;
      border-radius: 50%;

}



/*hero*/

.skills-section {
      padding: 0 50px;
      margin-bottom: 100px;
}

.skills-section h2 {
      font-size: 35px;
      text-align: center;
}

.skills-section .text {
      text-align: center;
      margin: 10px;
}

.skills-section .cells {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
}

.skills-section .cells .cell {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      width: 200px;
      padding: 10px 20px;
      margin: 10px;
      border: 2px solid var(--link-color);
      border-radius: 15px;
      
}

.skills-section .cells .cell img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      border-radius: 5px;
}

.skills-section .cells .cell span {
      font-size: 18px;

}

/*project*/

.project-section {
      padding: 0 50px;
      margin-bottom: 100px;
}

.project-section h2 {
      font-size: 35px;
      text-align: center;
}
.project-section .text {
      text-align: center;
      margin: 10px;
}
.project-section .project-cells {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      justify-items: center;
      gap: 20px;
}

.project-section .project-cells .cell {
      border: 1px solid gray;
      border-radius: 5px;
      width: 100%;
      padding: 15px 10px;
      background: white;
      box-shadow: white;
}

.project-section .project-cells .cell button {
      border: 2px solid var(--link-color);
      padding: 7px 10px;
      border-radius: 5px;
      color: var(--link-color);
      margin-top: 5px;
}












/* Contact section */

.contact-section {
      padding: 0 50px;
      margin-bottom: 100px;
  }
  
  .contact-section h2 {
      font-size: 35px;
  }
  
  .contact-section .group {
      display: flex;
      gap: 50px;
  }
  
  .contact-section .group .text {
      flex: 3;
  }
  
  .contact-section .group form {
      flex: 3;
      display: flex;
      flex-direction: column;
  }
  
  .contact-section .group form input,
  .contact-section .group form textarea {
      font-size: 16px;
      font-family: "Poppins", sans-serif;
      background-color: transparent;
      padding: 10px;
      margin-bottom: 10px;
      outline: none;
      border: 2px solid var(--link-color);
      border-radius: 10px;
  }
  
  .contact-section .group form button {
      font-size: 16px;
      font-family: "Poppins", sans-serif;
      background-color: var(--link-color);
      padding: 10px;
      margin-bottom: 10px;
      outline: none;
      border: 2px solid var(--link-color);
      border-radius: 10px;
      cursor: pointer;
      color: white;
  }
  
  .contact-section .group form button:hover {
      filter: brightness(0.9);
  }
  
  
  footer {
      text-align: center;
      padding: 20px;
      background-color: black;
      color: white;
  }