@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

    .container.Detail-and-Summary {
    padding: 50px 0;
}

.subtitle {
  font-size: calc(0.8rem + 0.2vw);
  color: #999999;
  margin-bottom: 20px;
}
.Detail-and-Summary h1, .Detail-and-Summary h2{
margin-bottom: 12px; 
font-size: x-large;
color: #c3dcffab;

}
.Detail-and-Summary h3{
    font-family: "Russo One", serif;
    font-weight: lighter;
margin-bottom: 12px; 
font-size: large;
color: #c3dcffab;
}

.Detail-and-Summary h2{
    font-family: "Londrina Outline", serif;
    font-weight: 500;
    font-size: 60px;
    color: #fff;
    opacity: 0.5;
    transition: opacity 0.8s ease; /* Add smooth transition for opacity */


}
.Detail-and-Summary h2:hover{
    opacity: 1;

}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.1vw + 1vh); /* Adjusts the gap dynamically */
 width: calc(100% - 90vh); 
margin-bottom: calc(71% - 98vh);
}

.tag {
    padding: calc(0.4rem - 0.2vw) calc(0.1rem + 0.3vw) calc(0.1rem - 1vw);
  border-radius: 0.375rem 0.375rem  0px 0px;
  background-color: #1e293b;
  color: #94a3b8;
  font-size: calc(0.55rem + 0.3vw); /* Responsive font size */
  font-weight: lighter;
  cursor: default;
  position: relative;
}

.tag:hover {
  background-color: #333333;
}

.tag::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 3px;
    height: 0.25vh;
    width: 0%;
    background: linear-gradient(to right, #8a57ea 100%, transparent 0%);
}

.tag.html::after {
  width: calc(100% - 10px); /* Underline for HTML tag */
}

.tag.css::after {
  width: calc(100% - 10px); /* Underline for CSS tag */
}

.tag.js::after {
  width: calc(100% - 10px); /* Underline for JavaScript tag */
}

.tag.typeScript::after {
  width: calc(100% - 10px); /* Underline for TypeScript tag */
}

.tag.php::after {
  width: calc(100% - 10px); /* Underline for PHP tag */
}

.tag.dart::after {
  width: calc(100% - 10px); /* Underline for Dart tag */
}

.tag.react::after {
  width: calc(60% - 10px); /* Underline for React tag */
}

.tag.angular::after {
  width: calc(80% - 10px); /* Underline for Angular tag */
}

.tag.vue::after {
  width: calc(60% - 10px); /* Underline for Vue.js tag */
}

.tag.tailwind::after {
  width: calc(100% - 10px); /* Underline for TailwindCSS tag */
}

.tag.bootstrap::after {
  width: calc(100% - 10px); /* Underline for Bootstrap tag */
}

.tag.jquery::after {
  width: calc(100% - 10px); /* Underline for jQuery tag */
}

.tag.nextjs::after {
  width: calc(60% - 10px); /* Underline for Next.js tag */
}

.tag.materialUI::after {
  width: calc(80% - 10px); /* Underline for Material UI tag */
}

.tag.laravel::after {
  width: calc(100% - 10px); /* Underline for Laravel tag */
}

.tag.node::after {
  width: calc(35% - 10px); /* Underline for Node.js tag */
}

.tag.wordpress::after {
  width: calc(100% - 10px); /* Underline for WordPress tag */
}

.tag.django::after {
  width: calc(50% - 10px); /* Underline for Django tag */
}

.tag.rest::after {
  width: calc(80% - 10px); /* Underline for RESTful APIs tag */
}

.tag.flutter::after {
  width: calc(100% - 10px); /* Underline for Flutter tag */
}

.tag.mysql::after {
  width: calc(100% - 10px); /* Underline for MySQL tag */
}

.tag.mongoDB::after {
  width: calc(100% - 10px); /* Underline for MongoDB tag */
}

.tag.postgres::after {
  width: calc(70% - 10px); /* Underline for PostgreSQL tag */
}

.tag.git::after {
  width: calc(100% - 10px); /* Underline for Git tag */
}

.tag.github::after {
  width: calc(100% - 10px); /* Underline for GitHub tag */
}

.tag.bitbucket::after {
  width: calc(100% - 10px); /* Underline for Bitbucket tag */
}

.tag.apache::after {
  width: calc(100% - 10px); /* Underline for Apache tag */
}

.tag.nginx::after {
  width: calc(100% - 10px); /* Underline for Nginx tag */
}

.tag.docker::after {
  width: calc(45% - 10px); /* Underline for Docker tag */
}

.tag.ci::after {
  width: calc(70% - 10px); /* Underline for CI/CD tag */
}

.tag.vscode::after {
  width: calc(100% - 10px); /* Underline for VSCode tag */
}

.tag.xcode::after {
  width: calc(100% - 10px); /* Underline for Xcode tag */
}

.tag.androidStudio::after {
  width: calc(30% - 10px); /* Underline for Android Studio tag */
}

.tag.postman::after {
  width: calc(100% - 10px); /* Underline for Postman tag */
}

.tag.mysqlWorkbench::after {
  width: calc(100% - 10px); /* Underline for MySQL Workbench tag */
}

.tag.illustrator::after {
  width: calc(80% - 10px); /* Underline for Illustrator tag */
}

.tag.photoshop::after {
  width: calc(90% - 10px); /* Underline for Photoshop tag */
}

.tag.xd::after {
  width: calc(100% - 10px); /* Underline for XD tag */
}

.tag.figma::after {
  width: calc(100% - 10px); /* Underline for Figma tag */
}

.tag.aws::after {
  width: calc(100% - 10px); /* Underline for AWS tag */
}

.tag.googleCloud::after {
  width: calc(100% - 10px); /* Underline for Google Cloud tag */
}

.tag.firebase::after {
  width: calc(100% - 10px); /* Underline for Firebase tag */
}

.tag.vercel::after {
  width: calc(100% - 10px); /* Underline for Vercel tag */
}

.tag.netlify::after {
  width: calc(100% - 10px); /* Underline for Netlify tag */
}

.tag.jira::after {
  width: calc(100% - 10px); /* Underline for Jira tag */
}

.tag.trello::after {
  width: calc(100% - 10px); /* Underline for Trello tag */
}

.tag.slack::after {
  width: calc(100% - 10px); /* Underline for Slack tag */
}

.tag.zoom::after {
  width: calc(100% - 10px); /* Underline for Zoom tag */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .tags {
    width: calc(100% - 10vh); 
    gap: 15px;
  }

  .tag {

  font-size: calc(1rem - 0.3vw); /* Responsive font size */


  }

  /* Adjust width of the after element for small screens */
  .tag::after {
    bottom: 0px;
    height: 2.5px;
  }

  /* Adjust individual tag widths */
 
.tag.html::after {
  width: calc(100% - 10px); /* Underline for HTML tag */
}

.tag.css::after {
  width: calc(100% - 10px); /* Underline for CSS tag */
}

.tag.js::after {
  width: calc(100% - 10px); /* Underline for JavaScript tag */
}

.tag.typeScript::after {
  width: calc(100% - 10px); /* Underline for TypeScript tag */
}

.tag.php::after {
  width: calc(100% - 10px); /* Underline for PHP tag */
}

.tag.dart::after {
  width: calc(100% - 10px); /* Underline for Dart tag */
}

.tag.react::after {
  width: calc(60% - 10px); /* Underline for React tag */
}

.tag.angular::after {
  width: calc(80% - 10px); /* Underline for Angular tag */
}

.tag.vue::after {
  width: calc(60% - 10px); /* Underline for Vue.js tag */
}

.tag.tailwind::after {
  width: calc(100% - 10px); /* Underline for TailwindCSS tag */
}

.tag.bootstrap::after {
  width: calc(100% - 10px); /* Underline for Bootstrap tag */
}

.tag.jquery::after {
  width: calc(100% - 10px); /* Underline for jQuery tag */
}

.tag.nextjs::after {
  width: calc(60% - 10px); /* Underline for Next.js tag */
}

.tag.materialUI::after {
  width: calc(80% - 10px); /* Underline for Material UI tag */
}

.tag.laravel::after {
  width: calc(100% - 10px); /* Underline for Laravel tag */
}

.tag.node::after {
  width: calc(35% - 10px); /* Underline for Node.js tag */
}

.tag.wordpress::after {
  width: calc(100% - 10px); /* Underline for WordPress tag */
}

.tag.django::after {
  width: calc(50% - 10px); /* Underline for Django tag */
}

.tag.rest::after {
  width: calc(80% - 10px); /* Underline for RESTful APIs tag */
}

.tag.flutter::after {
  width: calc(100% - 10px); /* Underline for Flutter tag */
}

.tag.mysql::after {
  width: calc(100% - 10px); /* Underline for MySQL tag */
}

.tag.mongoDB::after {
  width: calc(100% - 10px); /* Underline for MongoDB tag */
}

.tag.postgres::after {
  width: calc(70% - 10px); /* Underline for PostgreSQL tag */
}

.tag.git::after {
  width: calc(100% - 10px); /* Underline for Git tag */
}

.tag.github::after {
  width: calc(100% - 10px); /* Underline for GitHub tag */
}

.tag.bitbucket::after {
  width: calc(100% - 10px); /* Underline for Bitbucket tag */
}

.tag.apache::after {
  width: calc(100% - 10px); /* Underline for Apache tag */
}

.tag.nginx::after {
  width: calc(100% - 10px); /* Underline for Nginx tag */
}

.tag.docker::after {
  width: calc(45% - 10px); /* Underline for Docker tag */
}

.tag.ci::after {
  width: calc(70% - 10px); /* Underline for CI/CD tag */
}

.tag.vscode::after {
  width: calc(100% - 10px); /* Underline for VSCode tag */
}

.tag.xcode::after {
  width: calc(100% - 10px); /* Underline for Xcode tag */
}

.tag.androidStudio::after {
  width: calc(30% - 10px); /* Underline for Android Studio tag */
}

.tag.postman::after {
  width: calc(100% - 10px); /* Underline for Postman tag */
}

.tag.mysqlWorkbench::after {
  width: calc(100% - 10px); /* Underline for MySQL Workbench tag */
}

.tag.illustrator::after {
  width: calc(80% - 10px); /* Underline for Illustrator tag */
}

.tag.photoshop::after {
  width: calc(90% - 10px); /* Underline for Photoshop tag */
}

.tag.xd::after {
  width: calc(100% - 10px); /* Underline for XD tag */
}

.tag.figma::after {
  width: calc(100% - 10px); /* Underline for Figma tag */
}

.tag.aws::after {
  width: calc(100% - 10px); /* Underline for AWS tag */
}

.tag.googleCloud::after {
  width: calc(100% - 10px); /* Underline for Google Cloud tag */
}

.tag.firebase::after {
  width: calc(100% - 10px); /* Underline for Firebase tag */
}

.tag.vercel::after {
  width: calc(100% - 10px); /* Underline for Vercel tag */
}

.tag.netlify::after {
  width: calc(100% - 10px); /* Underline for Netlify tag */
}

.tag.jira::after {
  width: calc(100% - 10px); /* Underline for Jira tag */
}

.tag.trello::after {
  width: calc(100% - 10px); /* Underline for Trello tag */
}

.tag.slack::after {
  width: calc(100% - 10px); /* Underline for Slack tag */
}

.tag.zoom::after {
  width: calc(100% - 10px); /* Underline for Zoom tag */
}

}