body {
	   font-family: 'Inter', sans-serif;
	   line-height: 1.6;
	   color: #333;
	   background-color: #ffffff;
	   margin: 0;
	   padding: 0;
	}

	.header {
	   text-align: center;
	   padding: 60px 0 40px;
	}

	.name-display {
       font-family: 'Fira Code', monospace;
       font-size: 2.1em;
       text-align: center;
       margin-bottom: 10px;
       white-space: nowrap; /* Prevent text wrapping */
       overflow: hidden; /* Hide overflowing content */
       text-overflow: ellipsis; /* Show ellipsis for overflowing text */
    }

	.container {
	   max-width: 800px;
	   margin: 0 auto;
	   padding: 40px 20px;
	   position: relative;
	}

	h1,
	h2 {
	   color: #000000;
	   text-align: left;
	}

	h1 {
	   font-size: 2.5em;
	   margin-bottom: 0;
	   text-align: center;
	}

	.subtitle {
	   font-family: 'Inter', sans-serif;
	   font-size: 1.2em;
	   font-weight: 300;
	   letter-spacing: 0.05em;
	   color: #34495e;
	   margin-top: 0;
	   margin-bottom: 1.5em;
	}

	.social-icons {
	   display: flex;
	   justify-content: center;
	   gap: 15px;
	   margin: 20px 0;
	}

	.social-icons a {
	   /*color: #000000;*/
	   color: var(--header-color);
	   font-size: 1.5em;
	   transition: all 0.3s ease;
	}

	.social-icons a:hover {
	   transform: translateY(-2px);
	}

	.social-icons .fa-x-twitter {
	   color: #000000;
	}

	.social-icons .fa-linkedin {
	   color: #0A66C2;
	}

	.code-block {
	   background-color: #f8f9fa;
	   padding: 15px;
	   border-radius: 4px;
	   font-family: 'Fira Code', monospace;
	   font-size: 0.9em;
	   margin-bottom: 20px;
	   text-align: left;
	   border: 1px solid #e0e0e0;
	}

	.section-header {
	   position: relative;
	   margin-bottom: 30px;
	   padding-bottom: 10px;
	   border-bottom: 2px solid #e0e0e0;
	}

	.section-header h2 {
	   font-size: 1.8em;
	   color: #000000;
	   margin-bottom: 5px;
	   position: relative;
	   display: inline-block;
	   transition: all 0.3s ease;
	}

	.section-header h2::after {
	   content: '';
	   position: absolute;
	   bottom: -17px;
	   left: 0;
	   width: 0;
	   height: 3px;
	   background-color: #3498db;
	   transition: width 0.3s ease;
	   transform: translateX(var(--translateX, 0));
	}

	.section-header:hover h2::after {
	   width: 100%;
	}

	/* Adjust spacing for better section separation */
	.section {
	   margin-bottom: 50px;
	}

	.technical-info-display {
	   background-color: #1e1e1e;
	   border-radius: 8px;
	   overflow: hidden;
	   font-family: 'Fira Code', monospace;
	   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.terminal-header {
	   background-color: #323233;
	   padding: 10px;
	   display: flex;
	   gap: 8px;
	}

	.terminal-button {
	   width: 12px;
	   height: 12px;
	   border-radius: 50%;
	}

	.terminal-button.red {
	   background-color: #ff5f56;
	}

	.terminal-button.yellow {
	   background-color: #ffbd2e;
	}

	.terminal-button.green {
	   background-color: #27c93f;
	}

	.terminal-body {
	   padding: 20px;
	   color: #f8f8f2;
	}

	.command {
	   color: #50fa7b;
	}

	.json-output {
       color: #f1fa8c;
       margin: 10px 0;
       white-space: pre-wrap;       /* CSS 3 */
       white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
       white-space: -pre-wrap;      /* Opera 4-6 */
       white-space: -o-pre-wrap;    /* Opera 7 */
       word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }

	.skill-output {
	   color: #8be9fd;
	   word-wrap: break-word;
	}

	.about-content {
	   text-align: left;
	   font-size: 0.9em;
	   font-family: 'Source Code Pro', monospace;
	}

	.skills {
	   display: flex;
	   flex-wrap: wrap;
	   gap: 10px;
	   justify-content: center;
	}

	.skill-tag {
	   background-color: transparent;
	   color: #2c3e50;
	   border: 1.5px solid #e2e8f0;
	   padding: 6px 12px;
	   border-radius: 20px;
	   font-size: 0.85em;
	   font-weight: 500;
	   transition: all 0.5s ease;
	   position: relative;
	   overflow: hidden;
	}

	.skill-tag::before {
	   content: '';
	   position: absolute;
	   top: 0;
	   left: -100%;
	   width: 100%;
	   height: 100%;
	   background-color: #2d3748;
	   transition: all 0.3s ease;
	   z-index: -1;
	}

	.skill-tag:hover {
	   background-color: #2d3748;
	   color: #ffffff;
	}

	.skill-tag:hover::before {
	   left: 0;
	}

	.skill-tag-project {
	   background-color: #ffffff;
	   color: #2d3748;
	   padding: 4px 10px;
	   border-radius: 12px;
	   font-size: 0.8em;
	   font-weight: 500;
	   transition: all 0.2s ease;
	   border: 1px solid #e2e8f0;
	}

	.skill-tag-project:hover {
	   background-color: #2d3748;
	   color: #ffffff;
	}

	.skills-container {
	   display: grid;
	   grid-template-columns: repeat(3, 1fr);
	   gap: 20px;
	}

	.skill-category {
	   break-inside: avoid;
	   page-break-inside: avoid;
	}

	.category-title {
	   font-size: 0.9em;
	   font-weight: bold;
	   margin-bottom: 10px;
	   color: #555;
	   text-transform: uppercase;
	}

	.category-skills {
	   display: flex;
	   flex-wrap: wrap;
	   gap: 8px;
	}

	.btn-container {
	   text-align: center;
	   margin-top: 40px;
	   margin-bottom: 20px;
	}

	.btn {
	   display: inline-block;
	   padding: 10px 20px;
	   background: #000000;
	   color: white;
	   text-decoration: none;
	   border-radius: 25px;
	   font-size: 0.9em;
	   font-weight: bold;
	   transition: all 0.3s ease;
	   border: 2px solid #000000;
	}

	.btn:hover {
	   background: transparent;
	   color: #000000;
	}

	.experience-item {
	   margin-bottom: 20px;
	   border-bottom: 1px solid #e0e0e0;
	   font-size: 0.9em;
	}

	.experience-item:last-child {
	   border-bottom: none;
	}

	.experience-title {
	   font-weight: bold;
	   margin-bottom: 5px;
	}

	.experience-company {
	   font-style: italic;
	   color: #666;
	}

	.experience-date {
	   font-size: 1em;
	   color: #aaa;
	}

	.experience-header {
	   display: flex;
	   justify-content: space-between;
	   align-items: center;
	}

	.experience-company-name {
	   font-weight: bold;
	   font-size: 1.3em;
	}

	.experience-title {
	   font-size: 1em;
	   color: #888;
	   font-style: italic;
	   font-weight: normal;
	   margin-top: 3px;
	}

	.experience-content {
	   font-family: 'Source Code Pro', monospace;
	}

	.projects-grid {
	   display: grid;
	   grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
	   gap: 47px;
	   margin-top: 20px;
	}

	.project-card {
	   display: flex;
	   flex-direction: column;
	   justify-content: space-between;
	   height: 92%;
	   width : 93%;
	   background-color: #f8f9fa;
	   border-radius: 8px;
	   padding: 20px;
	   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	   transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.project-card:hover {
	   transform: translateY(-5px);
	   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}

	.project-content {
	   flex-grow: 1;
	   display: flex;
	   flex-direction: column;
	}

	.project-title {
	   font-size: 1.2em;
	   font-weight: bold;
	   margin-bottom: 10px;
	   font-family: 'Ubuntu', sans-serif;
	   display: flex;
	   align-items: center;
	}

	.project-description {
	   font-size: 0.9em;
	   color: #666;
	   font-family: 'Source Code Pro', monospace;
	   flex-grow: 1;
	}

	.project-tags {
	   display: flex;
	   flex-wrap: wrap;
	   gap: 6px;
	   margin-bottom: 15px;
	}

	.project-tag {
	   background-color: #e2e8f0;
	   color: #2d3748;
	   padding: 2px 8px;
	   border-radius: 12px;
	   font-size: 0.75em;
	}

	.github-btn {
	   font-size: 0.8em;
	   padding: 5px 10px;
	   width: 68px;
	   text-align: center;
	   margin: 0 auto;
	   display: inline-block;
	}

	.project-links {
	   text-align: center;
	   margin-top: 1px;
	}

	.project-status {
	   background-color: #fce7f3;
	   color: #9d174d;
	   border-color: #fbcfe8;
	   font-size: 0.6em;
	   font-style: italic;
	   padding: 2px 7px;
	   border-radius: 2px;
	   white-space: nowrap;
	   margin-left: 9px;
	   display: inline-block;
	   height: 16px;
	   line-height: 16px;
	   text-align: center;
	   border-width: 1px;
	}

	.project-status:hover {
	   background-color: #fbcfe8;
	   color: #9d174d;
	}

	.techy-download-container {
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   margin-top: 50px;
	   margin-bottom: 50px;
	}

	.command-prompt {
	   font-family: 'Fira Code', monospace;
	   background-color: #f1f3f5;
	   padding: 10px 15px;
	   border-radius: 5px 5px 0 0;
	   color: #333;
	   width: 100%;
	   max-width: 300px;
	   box-sizing: border-box;
	   height: 40px;
	   display: flex;
	   align-items: center;
	}

	.command-text {
	   margin-left: 10px;
	   color: #000000;
	}

	.techy-download-button {
	   font-family: 'Fira Code', monospace;
	   background-color: #000000;
	   color: #fff;
	   border: none;
	   padding: 10px 15px;
	   border-radius: 0 0 5px 5px;
	   cursor: pointer;
	   transition: background-color 0.3s ease;
	   text-decoration: none;
	   width: 100%;
	   max-width: 300px;
	   box-sizing: border-box;
	   text-align: center;
	}

	.techy-download-button:hover {
	   background-color: #333333;
	   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.cursor {
	   display: inline-block;
	   width: 10px;
	   height: 20px;
	   background-color: #000000;
	   animation: blink 0.7s infinite;
	   margin-left: 2px;
	   /* Added to give some space after the text */
	}

	@keyframes blink {
	   0% {
		  opacity: 0;
	   }

	   50% {
		  opacity: 1;
	   }

	   100% {
		  opacity: 0;
	   }
	}
	
	@keyframes scaleAnimation {
	  0% { transform: scale(1); }
	  50% { transform: scale(1.05); }
	  100% { transform: scale(1); }
	}


	.name-char {
	   display: inline-block;
	   opacity: 0;
	   transform: translateY(20px);
	   transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.name-char.visible {
	   opacity: 1;
	   transform: translateY(0);
	}

	.name-underscore {
	   display: inline-block;
	   width: 15px;
	   height: 3px;
	   background-color: #000;
	   margin-left: 5px;
	   animation: blink 0.7s infinite;
	}
	
	.blog-link {
	  position: absolute;
	  top: 20px;
	  right: 20px;
	  z-index: 1000;
	}

	.blog-link a {
	  display: flex;
	  align-items: center;
	  text-decoration: none;
	  color: #000000;
	  font-size: 1em;
	  transition: all 0.3s ease;
	  padding: 5px 10px;
	  border-radius: 20px;
	  background-color: transparent;
	  box-shadow: none;
	  justify-content: center;
	  gap: 5px;
	}

	.blog-link i {
	  transition: all 0.3s ease;
	}

	.blog-link span {
	  font-weight: 500;
	}

	.blog-link:hover a {
	  background-color: #000000;
	  color: #ffffff;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	  animation: scaleAnimation 0.5s ease-in-out;
	}

	.blog-link:hover i {
	  transform: rotate(15deg);
	}



	@media (max-width: 768px) {
	   .section {
		  margin-bottom: 40px;
		  padding-bottom: 20px;
		  border-bottom: 1px solid #e0e0e0;
	   }

	   .section:last-child {
		  border-bottom: none;
	   }

	   .name-display {
		  font-size: 1.9em;
	   }

	   .subtitle {
		  font-size: 1.2em;
	   }

	   .skill-tag {
		  font-size: 0.75em;
		  padding: 4px 10px;
	   }

	   .skill-category {
		  flex: 1 1 100%;
	   }

	   .skills-container {
		  grid-template-columns: repeat(2, 1fr);
	   }

	   .projects-grid {
		  grid-template-columns: 1fr;
		  gap: 30px;
	   }

	   .project-card {
		  height: auto;
		  width: auto;
	   }

	   .project-card:hover {
		  transform: translateY(-5px);
		  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	   }

	   .project-title {
		  font-size: 1.1em;
	   }

	   .project-description {
		  font-size: 0.85em;
		  margin-bottom: 10px;
	   }

	   .skill-tag-project {
		  font-size: 0.75em;
		  padding: 3px 8px;
	   }

	   .social-icons {
		  gap: 20px;
	   }

	   .social-icons a {
		  font-size: 1.3em;
	   }
	   
	    .blog-link {
		top: 10px;
		right: 10px;
	  }

	   .blog-link a {
		font-size: 0.9em;
		padding: 4px 8px;
	  }
	  
	}

	@media (max-width: 480px) {
	   .skills-container {
		  grid-template-columns: 1fr;
	   }

	   .btn:hover {
		  transform: translateY(-3px);
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	   }

	   .unnamed-section {
		  margin-bottom: 50px;
	   }
	   
	   .name-display {
          font-size: 1.6em; /* Further reduce font size on smaller devices */
       }
	}