@media (max-width: 768px) {
   /* Styles for screens smaller than 768px */
   #main-content {
     width: 90vw;
     padding: 10vh 6vw;
     overflow-x: hidden;
     margin-top: 10vh;
     border-radius: 20px;
   }
 
   .greetings {
     font-size: 2.5rem;
   }
 
   .sub {
     font-size: 1.3rem;
   }
 
   .main-sub {
     /* flex-direction: column;
     gap: 20px; */

     height: 60vh;
   }
 
   .links {
     width: 100%;
     min-width: unset;
     margin-left: 5vw;

     margin-top: 20vh;
   }
 
   .section-link {
     font-size: 1.1rem;
     margin-left: 0;
     margin-bottom: 1rem;
     text-align: center;
   }
 
   .section {
     padding-left: 0;
     padding-right: 0;
     min-height: auto;
   }
 
   .narrative {
     flex-direction: column;
     gap: 5vw;
     align-items: center;
   }
 
   .narrative-text {
     max-width: 95vw;
     min-width: unset;
     padding: 0 20px;
     text-align: center;
   }
 
   .me-img {
     width: 200px;
     height: 200px;
     margin: 0;
   }
 
   .skills-h {
     font-size: 20px;
   }
 
   .skills {
     flex-wrap: wrap;
     justify-content: center;
     gap: 12px;
   }
 
   .skill {
     width: 50px;
     height: 50px;
   }
 
   .carousel {
     padding: 15px;
     height: 200px;
     min-width: unset;
     width: 100%;
     margin-left: 10vw;
     margin-bottom: 10vh;
     align-self: flex-end;
   }
 
   .carousel > * {
     width: 60px;
     min-width: 60px;
     font-size: 14px;
     padding: 15px 10px;

   }
 
   .carousel > .expanded {
     width: 200px;
   }
 
   .project-link {
     flex: 0 0 120px;
     width: 200px;
     aspect-ratio: 1/1;
   }
 
   .footer h3 {
     font-size: 1.3em;
   }
 
   .footer p {
     font-size: 0.9em;
   }
 
   .footer a {
     margin: 0 5px;
   }
 
   .about-me {
     padding: 20px;
   }
 
   .about-me-header {
     flex-direction: column;
     gap: 10px;
     text-align: center;
   }
 
   .readme-container {
     max-width: 100%;
     overflow-x: hidden;
   }
 
   .readme {
     padding: 1rem !important;
     font-size: 14px;
     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 {
     width: 100%;
     max-width: 100%;
     display: none; /* Hide profile on mobile */
   }
 
   .readme-container {
     width: 100%;
     max-width: 100%;
   }
 }