@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

:root {
  --bg-color: #111010;
  --heading-color: #ffffff;
  --text-color: #a0a0a0;
  --accent-color: #3b82f6;
  --muted-color: #6b7280;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: rgb(255, 255, 255);
  font-family: "Poppins", "Inter", sans-serif;
}

section {
  animation: fade-in-up 0.6s ease-out forwards;
}

strong {
  color: var(--accent-color);
}
em {
  color: var(--accent-color);
}

.main_container {
  border-radius: 100px;
  max-width: 700px;
  margin: 0 auto;
  padding: 7rem;
}

.heading_container {
  display: flex;
  justify-content: space-between;
}

.heading_container-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.heading_container .author-name {
  color: var(--heading-color);
  display: block;
  font-size: 50px;
  font-weight: bold;
}

/* ---------------About Section ---------------*/

.author-info {
  color: var(--text-color);
  font-size: 20px;
}

.author-img {
  border: 3px solid #26262655;
  width: 190px;
  border-radius: 100%;
}

.about {
  margin: 40px 0px 0px 0px;
}

.about-heading {
  font-size: 22px;
}

.about-paragraph {
  font-size: 16px;
  color: var(--text-color);
}
/* --------------------------------------------- */

/* ---------------Skills Section---------------- */

.skills {
  margin: 40px 0px 0px 0px;
  display: flex;
  flex-direction: column;
}

.skills-header {
  padding-bottom: 5px;
  font-size: 22px;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style-type: none;
}

.skills-list > li {
  background-color: white;
  padding: 0px 20px;
  color: black;
  border-radius: 50px;
  transition: box-shadow 100ms ease-in-out, transform 100ms ease-in-out,
    color 100ms ease-in-out, font-weight 100ms ease-in-out;
}

.skills-list > li:hover {
  transform: scale(1.1);
  color: #3b82f6;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0px 0px 15px rgba(59, 131, 246, 0.347);
}

/* ------------------------------------------------- */

/* ----------------Education Section----------------------  */

.education {
  margin: 40px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.education-header {
  padding-bottom: 5px;
  font-size: 22px;
}

.education-card {
  width: 100%;
  max-width: auto;
  height: 70px;
  display: flex;
  align-items: center;
  transition: 0.4s ease-in-out;
}

.education-card:hover {
  cursor: pointer;
  transform: scale(1.01);
}

.college-img {
  width: 60px;
  height: 60px;
  margin-left: 10px;
  border-radius: 100%;
}

.techspire {
  background-size: cover;
  background-position: center;
  background-image: url("https://play-lh.googleusercontent.com/HDkIPc-joEdkpKeTBL0NMrpgyIkyH2tSVXzUwyVQcJn3p6FpssAyIF_7W6uq9S_Am_k=w240-h480-rw");
}

.times {
  background-size: cover;
  background-position: center;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDHXGOEin7cvt-RWdlxMbjXmY6FI49iZJFaQ&s");
}

.nepalPolice {
  background-size: cover;
  background-position: center;
  background-image: url("https://play-lh.googleusercontent.com/nQNDro6fVApXSY_uACNq-rhw34oM2EHmlr9mhNFd5cGcwEV2MadZ4bEbiqxnr8Mxs3g");
}

.education-textBox {
  width: calc(100% - 90px);
  margin-left: 10px;
  color: white;
}

.education-textContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.education-span {
  font-size: 14px;
}

.education-h1 {
  font-size: 18px;
  font-weight: bold;
}

.education-p {
  font-size: 12px;
  font-weight: light;
}
/* ----------------------------------------------------- */

/* ----------------Projects Section-------------------- */

.projects {
  margin: 40px 0px 0px 0px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 15px;
}

.project-header {
  padding-bottom: 10px;
  font-size: 22px;
}

.projects > h3 {
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  padding: 30px 0px;
}

.project-card {
  width: 320px;
  min-height: 300px;
  border-radius: 15px;
  color: var(--heading-color);
  display: flex;
  flex-direction: column;
  transition: 0.4s;
  position: relative;
  background-color: #141313;
  border: 1px solid #262626;
  overflow: hidden;
}

.project-card__img {
  aspect-ratio: 2/1;
  height: auto;
  border-radius: 20px 20px 0 0;
}

.todolist {
  background-size: cover;
  background-position: center;
  background-image: url(images/todolist.png);
}

.textrpg {
  background-size: cover;
  background-position: center;
  background-image: url(images/textrpg.png);
}

.diaryapp {
  background-size: cover;
  background-position: center;
  background-image: url(images/personaldiary.png);
}

.animepicker {
  background-size: cover;
  background-position: center;
  background-image: url(images/randomanime.png);
}

.project-card__descr-wrapper {
  padding: 15px;
  display: flex;
  flex-direction: column;

  height: 100%;
}

.project-skills {
  padding: 10px 0px;
}

.project-card__title {
  color: var(--heading-color);
  text-align: left;
  font-weight: 600;
  font-size: 20px;
}

.project-card__descr {
  color: var(--text-color);
}

.project-svg {
  width: 25px;
  height: 25px;
  transform: translateY(25%);
  fill: white;
}

.project-card__links {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-self: flex-end;
}

.project-card__links .project-link {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.project-card__links .project-link:hover {
  text-decoration: underline;
}

/* ---------------------------------------- */

/* ---------Contacts Section---------------*/

.contact {
  margin: 40px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-header {
  padding-bottom: 5px;
  font-size: 22px;
}

.contact > h4 {
  text-align: center;
  font-size: 30px;
}
.contact > p {
  padding: 0px 50px;
  text-align: center;
}

.contact > p > a {
  color: var(--accent-color);
  text-decoration: none;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color); 
}

::-webkit-scrollbar-thumb {
  background: var(--muted-color);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color); 
}

@media screen and (min-width: 200px) {
  body {
    font-size: 15px;
  }

  .main_container {
    padding: 3rem 1rem;
    max-width: 100%;
    border-radius: 0;
  }

  .author-name {
    font-size: 2.2rem;
  }
  .author-info {
    font-size: 0.9rem;
  }
  .about-heading,
  .skills-header,
  .education-header,
  .projects-header,
  .contact-header {
    font-size: 1.6rem;
    padding-bottom: 8px;
  }
  .about-paragraph {
    font-size: 0.9rem;
  }

  .project-card {
    margin: 0px auto;
  }
  .project-card__title {
    font-size: 17px;
  }
  .project-card__descr,
  .project-skills {
    font-size: 13px;
    display: flex;
    justify-self: left;
  }

  .heading_container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
  }
  .heading_container-img {
    order: -1;
  }
  .author-img {
    width: 140px;
    height: 140px;
  }

  .skills-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .skills-list > li {
    padding: 0px 15px;
    font-size: 0.85rem;
  }

  .project-card {
    max-width: 100%; 
  }

 
  @media screen and (min-width: 576px) {
    .main_container {
      padding: 4rem 2rem; 
      max-width: 600px; 
    }


    body {
      font-size: 16px;
    }
    .author-name {
      font-size: 2.8rem;
    }
    .author-info {
      font-size: 1rem;
    }
    .about-heading,
    .skills-header,
    .education-header,
    .projects-header,
    .contact-header {
      font-size: 1.8rem;
    }
    .about-paragraph {
      font-size: 1rem;
    }
    .project-card__title {
      font-size: 18px;
    }
    .project-skills {
      font-size: 14px;
    }

    .skills-list {
      gap: 10px; 
    }
    .skills-list > li {
      padding: 0px 20px; 
      font-size: 0.9rem;
    }

   
    .project-card {
      flex: 0 0 calc(50% - 15px); 
      max-width: calc(50% - 15px);
    }
  }

  @media screen and (min-width: 768px) {
    .main_container {
      max-width: 700px; 
      padding: 7rem; 
      border-radius: 100px; 
    }


    body {
      font-size: 16px;
    }
    .author-name {
      font-size: 3rem;
    }
    .author-info {
      font-size: 1rem;
    }
    .about-heading,
    .skills-header,
    .education-header,
    .projects-header,
    .contact-header {
      font-size: 22px;
    }
    .about-paragraph {
      font-size: 1rem;
    }
    .project-card__title {
      font-size: 20px;
    }
    .project-card__descr,
    .project-card__links .project-link {
      font-size: 15px;
    }
    .heading_container {
      flex-direction: row; 
      text-align: left; 
      justify-content: space-between;
      gap: 0;
    }
    .heading_container-img {
      order: 0; 
    }
    .author-img {
      width: 200px; 
      height: 200px;
    }

    .skills-list {
      justify-content: flex-start; 
    }
    .skills-list > li {
      font-size: 1rem;
    }
  }
}