/* General Styles */
 body {
    font-family: "Myriad Pro", "Helvetica Neue", Helvetica;
    font-size: 13px;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #000000;
    line-height: 1.6;
    min-height: 100vh;
    overflow-y: scroll; /* Prevents layout shift from scrollbar appearing */
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.content-loaded {
    opacity: 1;
}


h3 {
  font-size: 17px;
  font-weight: bold;
}


.loading-protection {
    visibility: hidden;
    background-color: #ffffff;
    opacity: 0;
}

.loading-protection.loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 0s ease;
}

.grid-item a {
    text-decoration: none;
    color: #000000;
    display: block;
}


.grid-item a:hover {
    text-decoration: none;
}

#content {
    margin-top: 25px;
    float: left;
    width: 500px;
}



        @keyframes jump {
            0% { transform: translateY(0) scale(1) rotate(0deg); }
            15% { transform: translateY(1px) scale(0.98) rotate(0deg); }
            50% { transform: translateY(-6px) scale(1.05) rotate(5deg); }
            85% { transform: translateY(0) scale(1.02) rotate(0deg); }
            100% { transform: translateY(0) scale(1) rotate(0deg); }
        }



        .random-link:hover {
            color: #008000;
            animation: jump 0.6s cubic-bezier(.2,-0.3,.7,1.3) forwards;
      
       }






       #navbar-container {
        background-color: rgba(255, 255, 255, 0.85); /* 30% opacity background */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px; /* adjust as needed */
        z-index: 100;
        transition: top 0.3s ease;
      }
      

nav {
 
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.nav-container {
    height: 55px; 
    width: 56%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
  }


.nav-name {
    font-size: 14px;
    font-weight: normal;
    color: #000000;
}

.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links li a {
    color: #007bff; /* Standard blue color for links */
    text-decoration: underline; /* Underline by default */
    font-size: 13px;
    padding-bottom: 5px;
    position: relative;
}




.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default to 2 equal columns */
    grid-gap: 13px; /* Space between grid items */
    width: 100%;
    margin: 0 auto; /* Center the grid on the page */
    padding: 0px;
    box-sizing: border-box;
    justify-content: center; /* Ensures grid items are centered if fewer columns are present */
}

.grid-item {
    width: 100%;
     padding: 3px;

    background-color: #ffffff;
    box-sizing: border-box;
}

.grid-item img {
    width: 100%;
      padding: 3px;

    height: auto;
    object-fit: cover;
    border-radius: 0px 0px 0 0;
}

.grid-item h3 {
    padding: 15px 10px;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #000000;
}

/* Responsive Design for Mobile Devices */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr; /* Single column layout for screens smaller than 768px */
    }
}

p {
    margin-bottom: 15px;
    color: #000000;
}

h1, h2, h3, h5, h6 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #000000;
}



h3{
    margin-top: 30px;
    margin-bottom: -5px;
    color: #000000;
    font-weight: bolder;
}

h4{
    margin-top: 20px;
    margin-bottom: -5px;
    color: #000000;

    font-weight: bold;

}


.tools{
    margin-top: 11vh;
}

ul, ol {
    margin-bottom: 15px;
    padding-left: 20px;
    color: #000000;
}

li {
    margin-bottom: 5px;
    color: #000000;
}

/* Indented text section */
.indented-text {
    margin-left: 20px;
    padding-left: 15px;
    border-left: 2px solid #000000;
    color: #000000;
}

/* Minimalist adjustments */
body {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.project-content {
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(255,255,255,0.05);
    color: #000000;
}



/* Column styles */
.column {
    width: 48%; /* Adjust width as needed */
}


/* Text column specific styles */
.text-column {
         float: left;
         margin-left: 10%;
         margin-right: 2%;
}


.image-column img:last-child {
    margin-bottom: 0;
}



/* Responsive Design */
@media (max-width: 768px) {
    .grid {
        width: 100%;
    }

    .grid-sizer, .grid-item {
        width: 100%;
        margin-left: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    body {
        padding: 10px;
    }
    
    .project-content {
        padding: 15px;
    }
    
    /* Stack the columns vertically on smaller screens */
    .container {
        flex-direction: column;
    }
    
    .column {
        width: 100%;
        padding-right: 0; /* Remove padding on smaller screens */
    }
}




 .textcontainer {
            padding-top: 10vh;
            width: 50%;
            float: left;
            margin-left: 15%;
  }

.textIcontainer {
    width: 88%;  /* 100% minus the left and right margins */
    margin-left: 10%;
    margin-right: 2%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 1em;  /* Adds spacing between flex items */
}

        /* Media query for screens narrower than 768px (common breakpoint for mobile devices) */
        @media (max-width: 767px) {
            .textcontainer {
                width: 100%;
                float: none;
                margin-left: 0;
            }
        }





.progressive-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.progressive-image.loaded {
    opacity: 1;
}

.project-link {
    color: #0864c7;
    text-decoration: underline; /* Ensure underline is kept */
}




.video-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.video-wrapper {
    flex: 1;
    position: relative;
    height: 30vh; /* Set height to 30% of viewport height */
    aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the iframe covers the area without distortion */
}

@media (max-width: 768px) {
    .video-container {
        flex-direction: column;
    }
    
    .video-wrapper {
        width: 100%; /* Full width on smaller screens */
        height: auto; /* Height will be determined by aspect ratio */
        padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
    }
}

        .textIcontainer iframe {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        
        .main-content {
            position: relative;
            padding-bottom: 0;
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            align-self: center;
            justify-content: space-between;
            margin-bottom: 0; 
            margin-top: 30px;
        }
        
        .column {
            flex: 1;
            min-width: 300px;
        }
        
        .image-column {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 5px;
            gap: 10px;
          }
          
        .video-container {
            position: relative;
            width: 85%;
            padding-bottom: 30%;
            height: 0;
            overflow: hidden;
            max-width: 800px; 
            margin: 0 auto;
        }
        
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 85%;
        }

 


#fullscreen-overlay {
    /* Fixed positioning ensures the overlay covers the entire viewport */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Semi-transparent black background */
    background-color: rgba(0, 0, 0, 0.9);
    
    /* Use flex display when visible for centering */
    display: none; /* This will be changed to 'flex' when visible */
    
    /* These flex properties center the content both horizontally and vertically */
    justify-content: center;
    align-items: center;
    
    /* Ensure overlay appears above other content */
    z-index: 1000;
    cursor: pointer;
}

#fullscreen-image {
    /* Maintain aspect ratio while fitting within bounds */
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    
    /* Add a subtle shadow to help the image stand out against the dark background */
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
}

.clickable-image {
    cursor: pointer;
    /* Smooth transition for hover effect */
    transition: transform 0.2s ease-in-out;
}

.clickable-image:hover {
    /* Slight scale up on hover */
    transform: scale(1.05);
}






.about-content {
    display: flex;
    width: 85%;
    height: min-content;
    margin: 0 auto;
    gap: 2rem;
    padding-top: 50px; /* Match the navbar height */
    /* min-height: calc(100vh - 70px); */
    position: relative;
}

/* Remove floating behavior from textContainer */
.textContainer {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left-half, .right-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Adjust profile and computer images */
.profile-image, .computer-image {
    width: 175px;
    height: 175px;
    border-radius: 3%;
    object-fit: cover;
    margin-bottom: 20px;
}

/* Make it responsive */
@media (max-width: 768px) {
    .textContainer {
        width: 95%;  /* Use more width on mobile */
    }

    .about-content {
        flex-direction: column;  /* Stack vertically on mobile */
        gap: 1rem;  /* Reduce gap on mobile */
    }
}



/* Style for the social icons section */
.social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center; /* Center the icons horizontally */
    width: 100%; /* Take up full width of parent */
}

/* Container for each individual icon */
.social-icons a {
    color: #000000;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Remove any default margins that might affect centering */
    margin: 0;
}

/* The SVG icons themselves */
.social-icons svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Ensure the paragraph is also centered */
.left-half p {
    text-align: center;
    width: 100%;
    margin: 0 0 15px 0; /* Consistent margin */ 
}



/* Welcome section styles */
.welcome-section {
    text-align: center;
    padding: 2rem 0;
}

.welcome-section p {
    margin: 0.5rem 0;
}

/* Image gallery styles */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
    padding: 1rem 0;
}

/* Individual gallery image styles */
.gallery-image {
    height: 30vh;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .home-content {
        width: 95%;
        margin-top: 60px;
    }

    .gallery-image {
        height: 25vh; /* Slightly smaller on mobile */
    }

    .image-gallery {
        gap: 1rem;
    }
}





.tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #000;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #ffffff;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-size: 13px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}



/* Main content container */
.home-content {
    width: 80%;
    height: min-content;
    margin: 0 auto;
}



/* Introduction section */
.intro-section {
    text-align: center;
    margin-bottom: 60px;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.intro-text {
    font-size: 13px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Timeline section */
.timeline-section {
    display: flex;
    gap: 60px;
    margin-bottom: 80px;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 0.3s;
}

/* Timeline column */
.timeline-col {
    width: 100px;
    flex-shrink: 0;
    position: relative;
}

.timeline-line {
    position: absolute;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
}

.fade-line {
    width: 1px;
    height: 100%;
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(0,0,0,0.75),
        rgba(0,0,0,0)
    );
}

.timeline-markers {
    position: relative;
    z-index: 1;
}

.marker {
    padding: 40px 0;
    text-align: right;
    font-size: 13px;
    position: relative;
}

.marker::after {
    content: '';
    position: absolute;
    right: -29px;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
    transform: translateY(-50%);
}

.timeline-container {
    padding:0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Timeline content */
.timeline-content {
    flex-grow: 1;
}

.experience-entry {
    padding: 40px 0;
}

.experience-entry h3 {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
}

.experience-entry p {
    font-size: 13px;
    line-height: 1.6;
}

/* Image gallery */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 0.6s;
}

.gallery-image {
    height: 30vh;
    width: auto;
    object-fit: contain;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .home-content {
        width: 90%;
        padding-top: 60px;
    }

    .timeline-section {
        flex-direction: column;
        gap: 20px;
    }

    .timeline-col {
        width: 100%;
    }

    .marker {
        text-align: left;
        padding-left: 20px;
    }

    .marker::after {
        left: -3px;
        right: auto;
    }

    .gallery-image {
        height: 25vh;
    }
}



.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.timespan {
    grid-column: span 1;
    font-size: 14px;
    text-align: right;
    padding-right: 5px;
    color: #bbb;
}

.ico {
    grid-column: span 1;
    vertical-align: top;
    border-left: 2px solid #cfcfcf;
    position: relative;
}

.desc {
    grid-column: span 10;
    vertical-align: top;
    font-size: 14px;
    /* width: 600px; */
    padding-left: 20px;
    padding-bottom: 20px;
}

.entry-dot {
    position: absolute;
    top: 0px;
    left: -8px;
    width: 10px;
    height: 10px;
    border-radius: 7px;
    background-color: #cfcfcf;
    border: 2px solid white;
}


hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #ccc, transparent);
    margin: 1rem 0;
  }
  


      /* Example styling for all images */
      .unified-image {
        width: 50px;   /* Adjust as needed */
        height: auto;   /* Maintain aspect ratio */
        object-fit: contain;
        border-radius: 30%; /* Example: slightly rounded corners */
        display: block; /* Ensures consistent layout behavior */
      }

    .quip {
        font-size: 15px;
    }
    .smallword{
        width: 56px;
    }

    #history.container {
        justify-content: center;
    }

    .vspacer {
        display: block; /* Optional, since divs are block by default */
        height: 150px;   /* Adjust this value as needed */
      }
      









      .intro {
        transform: translateY(13px);
        animation: scale-up 1s forwards cubic-bezier(0.5, 1, 0.9, 1);
      }
      
      @keyframes scale-up {
        to {
          transform: scale(1);
        }
      }
    
      .intro p {
        display: block;
        opacity: 0;
        filter: blur(2px);
      }
      
    
      .intro p:nth-child(1) {
        animation: fade-in 0.2s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      .intro p:nth-child(2) {
        animation: fade-in 0.2s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      .intro p:nth-child(3) {
        animation: fade-in 0.2s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      .intro p:nth-child(4) {
        animation: fade-in 0.2s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      .intro p:nth-child(5) {
        animation: fade-in 0.2s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
      }
      
      @keyframes fade-in {
        to {
          opacity: 1;
          filter: blur(0);
        }
      }
      

.content-loaded {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



#footer-container {
    width: 100%;
    clear: both;  
}

.footer {
    padding-top: 30px;
    margin-top: 30px;
    padding-bottom: 5px;
}

.footer p {
    margin-left: 20%;
    margin-bottom: 0;
    text-align: left;
    color: #333;
    font-family: Arial, sans-serif;
}






/* Fixed-height projects container */
.projects-container {
    overflow-y: auto; /* Enables vertical scrolling */

    margin: 40px auto; 
    width: 80%; /* Matches home-content width */
    position: relative;
    background-color: #ffffff;
  }
  

  /* Ensure content inside projects container works well */
  .projects-container .home-content {
    width: 100%;
    margin: 0 auto;
    padding-top: 0px;
    height: auto; /* Override any height restrictions */
  }
  
  .projects-container .textcontainer {
    padding-top: 5vh; /* Reduced padding */
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .projects-container {
      height: 500px; /* Slightly shorter on mobile */
      width: 95%;
    }
  }


  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-bottom: 1.5em;
}

.timespan {
    grid-column: span 1;
    font-size: 13px;
    text-align: right;
    margin-right: 5px;
    color: #bbb;
}

.ico {
    grid-column: span 1;
    vertical-align: top;
    border-left: 2px solid #cfcfcf;
    position: relative;
    padding-left: 15px;
  }
  
  /* Add a gradient overlay that creates a fade-out effect */
  .ico::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -2px; /* Align with the border */
    width: 2px; /* Same width as the border */
    height: 13px; /* Height of the gradient effect - adjust as needed */
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    z-index: 1; /* Make sure it appears on top of the border */
  }

.desc {
    grid-column: span 10;
    vertical-align: top;
    font-size: 13px;
    padding-left: 20px;
    padding-bottom: 0px;
}

.entry-dot {
    position: absolute;
    top: 0px;
    left: -8px;
    width: 10px;
    height: 10px;
    border-radius: 7px;
    background-color: #cfcfcf;
    border: 2px solid white;
}

.unified-image {
    width: 75px;
    height: auto;
    object-fit: contain;
    border-radius: 4%;
    display: block;
    margin-top: 7.5px;
}

.project-link {
    color: #0864c7;
    text-decoration: underline;
    font-weight: bold;
}

.project-description {
    display: inline;
    margin-left: 0.5em;
}



.fullscreen {
    height: 100vh; 
    width: 100%;
    display: flex;
    position: relative;
    background-color: #ffffff;
  }
  



html {
    scroll-behavior: smooth !important;
  }
  
  /* Ensure body doesn't have padding that affects scrolling */
  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  
  /* Ensure other sections have proper spacing */
  #home #projects, #useful, #contact {
    padding-top: 0px; /* Account for navbar */
  }
  
  /* Ensure projects container is visible
  .projects-container {
    overflow-y: visible; /* Change from auto to visible to debug */
    /* max-height: 70vh; Allow scrolling within the container */
  /* } */ 

  
  /* Fix for the outer element of projects section */
  #projects {
    overflow: visible;
  }



/* First section (home) should account for navbar differently */
#home {
  padding-top: 0;
}

#home .home-content {
  padding-top: 60px; /* Adds just enough space after navbar */
}

/* Reduce the excessive top padding in textcontainer */
.textcontainer {
  padding-top: 5vh !important; /* Override inline styles */
}

/* Specific adjustment for projects section */
#project .projects-container {
  margin-top: 20px;
}

/* Specific adjustment for useful section */
#useful .home-content {
  padding-top: 20px;
}

/* Specific adjustment for contact section */
#contact .about-content {
  padding-top: 20px;
  margin-top: 0;
}

/* Ensure proper spacing for first elements in each section */
.projects-container .textcontainer,
#useful .textcontainer {
  padding-top: 0 !important;
}



  
  /* Home section adjustments */
  #home {
    padding-top: 0; /* Remove padding as it's handled by the home-content */
  }
  
  #home .home-content {
    padding-top: 60px; /* Account for navbar */
  }
  
  /* Projects section adjustments */
  #project .projects-container {
    margin-top: 20px;
  }
  
  /* Useful section adjustments - critical fix here */
  #useful .about-content {
    padding-top: 60px !important; /* Match the home section */
  }
  
  #useful .textcontainer {
    padding-top: 0 !important; /* Remove excess padding */
  }
  
  /* Contact section adjustments */
  #contact .about-content {
    padding-top: 60px !important; /* Match the other sections */
    margin-top: 0;
  }
  
  /* Standard text container adjustments */
  .textcontainer {
    padding-top: 0 !important; /* Override any inline styles */
  }
  
  /* Additional spacing fixes for inner content */
  .introduction, .category {
    margin-top: 0;
  }