/* Global Reset and Base Values */
    {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
    /* Default font is Inter for body text */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    margin: 0;
    padding: 0;
    }

    /* Import Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

    /* Main Container */
    .container {
        /* Full viewport height minimum */
        min-height: 100vh;
        /* Solid dark blue background */
        background: #071A3B;
        /* Generous padding */
        padding: 100px 20px;
        /* Updated text color to warm off-white */
        color: #FFF8F0;
        margin: 0;
    }

    /* 12-Column Grid System */
    .grid-container {       
        /* 12 equal columns with gaps between them */
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* Gutter between columns */
        gap: 14px;
        /* Page Dimensions */
        max-width: 1440px;
        min-height: 1440px;
        margin: 0 auto;
        /* Margin on left and right sides*/
        padding: 0 28px;
    }   

    /* Profile Section */
    .profile-section {
        /* Spans center 6 columns (columns 4-9) */
        grid-column: 4 / 10;
        /* Space below profile section */
        margin-bottom: 20px;
    }

    /* Profile photo styling */
    .profile-image {
     /* Fixed size */
    width: 160px;
    height: 160px;
    /* Makes image circular */
    border-radius: 50%;
    /* Ensures image covers the circle properly */
    object-fit: cover;
    /* Space between image and text below */
    margin-bottom: 40px;
    border: none;
    /* Aligns image to the LEFT side of the 6-column area */
    margin-right: auto;
    display: block;
    }

    /* Main introduction paragraph */
    .intro-text {
        /* Uses Instrument Sans font */
        font-family: 'Instrument Sans', sans-serif;
        font-size: 20px;
        /* Line spacing for readability */
        line-height: 1.6;
        margin: 10px auto;
        /* Updated to warm off-white color */
        color: #FFF8F0;
        /* Left-aligned text */
        text-align: left;
    }

    /* Wave divider (~) between sections */
    .divider {
        /* Large size for visual impact */
        font-size: 40px;
        /* Updated to warm off-white color with reduced opacity */
        color: rgba(255, 248, 240, 0.2);
        /* Centers the ~ within the 6-column section */
        text-align: center;
    }

    /* Personal interests paragraph */
    .personal-info {
        /* Uses Instrument Sans font */
        font-family: 'Instrument Sans', sans-serif;
        font-size: 20px;
        line-height: 1.6;
        /* Updated to warm off-white color */
        color: #FFF8F0;
        /* Space before experience section */
        margin-bottom: 0px;
        /* Left-aligned text */
        text-align: left;
    }

    /* Experience Section */
    .experience-section {
        /* Spans center 6 columns (columns 4-9) - same as profile section */
        grid-column: 4 / 10;
    }

    /* "HIGHLIGHTED EXPERIENCE" heading */
    .section-title {
        /* Uses Instrument Sans font */
        font-family: 'Instrument Sans', sans-serif;
        /* Small caps style text */
        font-size: 16px;
        /* Spacing between letters for all-caps look */
        letter-spacing: 1px;
        /* Updated to warm off-white color with reduced opacity */
        color: rgba(255, 248, 240, 0.5);
        /* Space between title and first experience item */
        margin-bottom: 15px;
        font-weight: 100;
    }

    /* Each individual job entry */
    .experience-item {
        /* Flexbox to put job title on left, date/location on right */
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        /* Space between job entries */
        margin-bottom: 25px;
        padding-bottom: 25px;
        /* Subtle divider line between entries - adjust opacity or color */
        border-bottom: 1px solid rgba(255, 248, 240, 0.1);
    }

    /* Remove border from last experience item */
    .experience-item:last-child {
        border-bottom: none;
    }

    /* Left side of experience item (job title and company) */
    .experience-left {
        /* Takes up remaining space */
        flex: 1;
    }

    /* Job title (e.g., "Mechanical Designer") */
    .experience-title {
        /* Uses Inter font (default body font) */
        font-family: 'Inter', sans-serif;
        /* Larger text with medium weight (less bold) */
        letter-spacing: 0.5px;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 5px;
        /* Updated to warm off-white color */
        color: #FFF8F0;
        }

    /* Company name and type (e.g., "Co-Op, Samuel Automation") */
    .experience-company {
        /* Uses Inter font (default body font) */
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        margin-top: 8px;
        /* Updated to warm off-white color with reduced opacity */
        color: rgba(255, 248, 240, 0.7);
    }

    /* Right side of experience item (date and location) */
    .experience-right {
        /* Right-aligned text */
        text-align: right;
    }

    /* Date range (e.g., "Sept 2025 - Present") */
    .experience-date {
        /* Uses Inter font (default body font) */
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        margin-top: 8px;
        font-style: italic;
        /* Updated to warm off-white color with reduced opacity */
        color: rgba(255, 248, 240, 0.6);
        margin-bottom: 5px;
    }

    /* Location (e.g., "Waterloo, Ontario") */
    .experience-location {
        /* Uses Inter font (default body font) */
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        margin-top: 10px;
        font-style: italic;
        /* Updated to warm off-white color with reduced opacity */
        color: rgba(255, 248, 240, 0.6);
    }

    /* Connect Section */
    .contact-section {
        /* Spans center 4 columns (columns 5-8) - narrower than other sections */
        grid-column: 5 / 9;
    }

    /* "CONNECT" heading */
    .contact-title {
        /* Uses Instrument Sans font */
        font-family: 'Instrument Sans', sans-serif;
        font-size: 14px;
        letter-spacing: 1px;
        /* Updated to warm off-white color with reduced opacity */
        color: rgba(255, 248, 240, 0.5);
        margin-bottom: 15px;
        font-weight: 100;
        /* Left-aligned within the 4-column area */
        text-align: left;
    }

    /* Container for all contact links */
    .contact-links {
        /* Stack links vertically */
        display: flex;
        flex-direction: column;
        /* Space between each link*/
        gap: 15px;
        /* Left-aligned links */
        align-items: flex-start;
    }

    /* Individual contact link styling */
    .contact-link {
        /* Uses Instrument Sans font */
        font-family: 'Instrument Sans', sans-serif;
        /* Updated to warm off-white color with reduced opacity */
        color: rgba(255, 248, 240, 0.8);
        letter-spacing: 1px;
        text-decoration: none;
        font-size: 20px;
        /* Smooth color transition on hover */
        transition: color 0.3s ease;
    }

    /* Hover effect for links - brightens to full warm off-white */
    .contact-link:hover {
        color: #FFF8F0;
    }

    /* Subdued text for link prefixes (e.g., "linkedin.com/" part) */
    .contact-link span {
        color: rgba(255, 248, 240, 0.5);
    }

    /* Projects Placeholder */
    .projects-note {
        /* Spans center 6 columns to match other content sections */
        grid-column: 4 / 10;
        /* Extra space above to separate from contact info */
        font-size: 25px;
        /* Updated to warm off-white color with reduced opacity */
        color: rgba(255, 248, 240, 0.7);
        /* Centered within its column area */
        text-align: center;
    }

    /* Bottom Decoration Image */
    .bottom-decoration {
        /* Spans 10 columns, centered (columns 2-12) */
        grid-column: 2 / 12;
        margin-top: -30px;
        /* Center the image within its area */
        text-align: center;
    }

    .bottom-decoration img {
        /* Make image dynamically sized - fills the 10-column width */
        width: 100%;
        height: auto;
        display: block;
        opacity: 1;
    }
/* Responsive Design */

/* Applies this to screens of width: 768 */
@media (max-width: 768px) {
    /* Remove grid column constraints - make all sections full width */
    .profile-section,
    .experience-section,
    .contact-section,
    .projects-note {
        grid-column: 1 / -1;  /* Spans all 12 columns */
    }

    /* Reduce container padding on mobile */
    .container {
        padding: 40px 20px;
    }

    /* Reduce grid padding on mobile */
    .grid-container {
        padding: 0 20px;
        gap: 10px;  /* Slightly smaller gap */
        min-height: auto;  /* Remove fixed height on mobile */
    }

    /* Keep profile image LEFT-aligned on mobile */
    .profile-image {
        margin-right: auto;
        margin-left: 0;
    }

    /* Adjust font sizes for mobile readability */
    .intro-text,
    .personal-info {
        font-size: 18px;
    }

    .experience-title {
        font-size: 20px;
    }

    .contact-link {
        font-size: 18px;
    }

    /* Stack experience items vertically on mobile */
    .experience-item {
        flex-direction: column;
    }

    /* Left-align date/location on mobile instead of right-aligned */
    .experience-right {
        text-align: left;
        margin-top: 10px;
    }

    /* Adjust contact section margin on mobile */
    .contact-section {
        margin-top: 20px;  /* Reset the negative margin for mobile */
    }
}