@media (max-width: 480px) {
   /* Styles for screens smaller than 480px */
   #main-content {
     padding: 3vh 2vw;
     margin: 10vh 4vw;
     padding-top: 20vh;
   }
   
   .section {
      justify-content: center;
   }

   .header {
      justify-self: center;
      height: 20vh;
   }

   .greetings {
     font-size: 2rem;
     line-height: 1.2;
     justify-self: center;
   }
 
   .sub {
     font-size: 0.9rem;
     height: 2.2rem;
     width: fit-content;
     align-self: center;
   }
   
   .main-sub {
      /* margin-left: 3rem; */
      padding-top: 10vh;
      height: 50vh;
      width: 80%;
      overflow: visible;
   }
   .sub-wrapper {
     height: 2.2rem;
   }
 
   .links {
     margin-top: 3vw;
     /* border: 2px solid yellow; */
     
   }
 
   .section-link {
     font-size: 1rem;
     margin-bottom: 0.8rem;
   }
 
   .section {
     padding-left: 0;
     padding-right: 0;
   }
 
   .narrative-text {
     font-size: 12px;
     padding: 0 10px;
   }
 
   .me-img {
     width: 150px;
     height: 150px;
   }
 
   .skills-h {
     font-size: 18px;
   }
 
   .skill {
     width: 40px;
     height: 40px;
     margin: 0;
   }

 
   .carousel {
     padding: 10px;
     height: 250px;
     display: none;
   }
 
   .carousel > * {
     width: 10px;
     min-width: 50px;
     font-size: 12px;
     padding: 10px 6px;

     height: 100px;

   }
 
   .carousel > .expanded {
     width: 100px;
   }
 
   .project-link {
     flex: 0 0 50px;
     width: 100%;
     height: 90px;
   }



   .sidebar {
      display: none;
   }
 
   .project span {
     font-size: 11px;
     color: rgb(255, 255, 255);
   }
 
   .footer h3 {
     font-size: 1.1em;
   }
 
   .footer p {
     font-size: 0.8em;
   }
 
   .about-me {
     padding: 15px;
     width: 85vw;
     padding: 5vw;
     margin-left: auto;
     margin-right: auto;
     height: fit-content;
     order: 3;
   }
 
   .readme {
     padding: 0.5rem !important;
     font-size: 12px;
     word-wrap: break-word;
     overflow-wrap: break-word;
     max-width: 100%;
   }
 
   /* Prevent code blocks from overflowing */
   .readme pre {
     max-width: 100%;
     overflow-x: auto;
     white-space: pre-wrap;
     word-wrap: break-word;
   }
 
   .readme code {
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
 
   /* Ensure tables don't overflow */
   .readme table {
     max-width: 100%;
     overflow-x: auto;
     display: block;
   }
 
   .readme img {
     max-width: 100%;
     height: auto;
   }
 
   .profile {
     display: none; /* Keep profile hidden on small mobile */
   }
   
   .tags-container{
      background-color: rgb(0, 0, 0);
      height: 10px;
      padding: 10px;
   }
   .tag-icon {
      width: 6px;
      height: 6px;
   }
 
}

/* Extra small screens
@media (max-width: 375px) {
   #main-content {
     padding: 2vh 1vw;
   }
 
   .greetings {
     font-size: 1.8rem;
   }
 
   .sub {
     font-size: 1rem;
     height: 2rem;
   }
 
   .sub-wrapper {
     height: 2rem;
   }
 
   .carousel {
     height: 220px;
     padding: 8px;
   }
 
   .carousel > * {
     width: 45px;
     min-width: 45px;
     font-size: 11px;
     padding: 8px 6px;
   }
 
   .carousel > .expanded {
     width: 180px;
     min-width: 180px;
   }

 
   .project-link {
     width: 120px;
     height: 120px;
   }
 
   .project span {
     font-size: 12px;
   }
 
   .section-link {
     font-size: 0.9rem;
   }
 
   .readme {
     font-size: 11px !important;
     word-wrap: break-word;
     overflow-wrap: break-word;
     max-width: 100%;
   }
 
   /* Prevent code blocks from overflowing */
   .readme pre {
     max-width: 100%;
     overflow-x: auto;
     white-space: pre-wrap;
     word-wrap: break-word;
   }
 
   .readme code {
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
 
   /* Ensure tables don't overflow */
   .readme table {
     max-width: 100%;
     overflow-x: auto;
     display: block;
   }
 
   .readme img {
     max-width: 100%;
     height: auto;
   }
 
   .profile {
     display: none; /* Keep profile hidden on extra small mobile */
   }
 
   .skills {
     gap: 10px;
   }
 
   .skill {
     width: 35px;
     height: 35px;
   }
 } */
/* Add touch-friendly styles for mobile */
@media (hover: none) and (pointer: coarse) {
   .carousel > * {
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
   }
 
   .carousel > *:active {
     transform: scale(0.95);
   }
 
   .section-link {
     padding: 8px 0;
     -webkit-tap-highlight-color: transparent;
   }
 
   .section-link:active {
     opacity: 0.7;
   }
 
   .project-link:active {
     transform: scale(0.98);
   }
}