@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,700;0,900&display=swap");
* {
  box-sizing: border-box;
  /* border: 1px solid green; */
  font-family: "Poppins";
}

body {
  color: #1c1c1c;
}

.external-link {
  color: #1a1a1a;
  text-decoration: none;
}

#hero {
  position: relative;
  max-width: 1000px;
  margin: auto;
  height: 100vh;
  padding: 20px;
}

#hero > .section-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.theme-section {
  position: absolute;
  right: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#toggleThemeBg {
  position: relative;
  background-color: grey;
  width: 50px;
  height: 25px;
  border: 2px solid grey;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#toggleThemeCircle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
}

#toggleThemeBtn {
  display: none;
}

.hello {
  margin: 0;
  font-size: 50px;
}

.intro {
  font-size: 20px;
  max-width: 600px;
}

.getintouch {
  font-size: 16px;
  font-weight: 500;
}

.getintouch .external-link {
  text-underline-offset: 5px;
  text-decoration: underline;
  text-decoration-color: #007bff;
  text-decoration-thickness: 2px;
}

.section {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

.section-title {
  color: #007bff;
  letter-spacing: 1px;
}

#background .section-content {
  display: block;
}

#background .section-content > p {
  font-size: 14px;
  font-weight: 300;
}

.bold-word {
  font-weight: 700;
}

.skills {
  flex: 1;
}

.skills-category {
  font-weight: 500;
  margin-bottom: 0;
}

.skills-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-weight: 300;
  font-size: 14px;
}

.skills-list > li {
  margin: 2px 0;
}

#featured-projects > .section-content {
  display: block;
}

.featured-project-image {
  width: 100%;
}

.project-title {
  font-weight: 500;
  margin-bottom: 10px;
}

.project-title > span {
  color: #007bff;
}

.project-title:hover > span {
  position: relative;
  left: 8px;
}

.project-desc {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
}

.project-tags {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 35px;
}

.project-tags > li {
  color: #007bff;
  border: 1px solid #007bff;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 5px;
}

#badges .section-content {
  gap: 10px;
  flex-wrap: wrap;
}

#footer {
  font-weight: 500;
}

#footer > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  letter-spacing: 1.2px;
}

#footer > ul > li > a > * {
  color: #007bff;
}

#footer > ul > li > a {
  text-underline-offset: 5px;
  text-decoration: underline;
  text-decoration-color: #007bff;
  text-decoration-thickness: 2px;
}

/* small devices */
@media (max-width: 767px) {
  .section-content {
    display: flex;
    flex-wrap: wrap;
  }

  .skills {
    gap: 20px;
    padding: 10px;
  }

  #footer {
    text-align: center;
  }

  #footer > ul:nth-child(2) {
    display: none;
  }
}

/* medium and above device */
@media (min-width: 768px) {
  .section {
    display: flex;
    justify-content: space-evenly;
    gap: 30px;
  }

  .section-title {
    text-align: right;
    width: 25%;
  }

  .section-content {
    width: 75%;
    display: flex;
  }

  .project-card {
    display: flex;
  }

  .project-card > a {
    width: 75%;
    display: inline-flex;
    align-self: center;
  }

  .project-details {
    width: 25%;
  }

  #other-projects > .section-content {
    display: block;
  }

  #footer {
    justify-content: space-between;
  }

  #footer > ul:last-child {
    display: none;
  }
}