/* ===== NSF.net Custom CSS - Optimized for Performance and Maintainability ===== */

/* ===== VARIABLES ===== */
:root {
    /* Core colors */
    --color-white: rgba(255, 255, 255, 0.95);
    --color-white-secondary: rgba(255, 255, 255, 0.9);
    --color-white-muted: rgba(255, 255, 255, 0.8);
    --color-dark: rgba(19, 21, 25, 0.5);
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-medium: rgba(255, 255, 255, 0.3);
  
    /* Achievement colors */
    --color-blue: rgba(0, 123, 255, 0.7);
    --color-green: rgba(40, 167, 69, 0.7);
    --color-yellow: rgba(255, 193, 7, 0.7);
  
    /* Semantic colors */
    --text-primary: var(--color-white);
    --text-secondary: var(--color-white-secondary);
    --text-muted: var(--color-white-muted);
    --overlay-dark: var(--color-dark);
    --border-light: var(--color-border-light);
    --border-medium: var(--color-border-medium);
    --achievement-date: var(--color-blue);
    --achievement-tech: var(--color-green);
    --achievement-milestone: var(--color-yellow);
  
    /* Typography scale based on 1.25 ratio */
    --font-size-xs: 0.8rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-md: 1.25rem;
    --font-size-lg: 1.563rem;
    --font-size-xl: 1.953rem;
    --font-size-xxl: 2.441rem;
  
    /* Map old variables to new ones for compatibility */
    --font-size-small: var(--font-size-sm);
    --font-size-normal: var(--font-size-base);
    --font-size-medium: var(--font-size-md);
    --font-size-large: var(--font-size-lg);
    --font-size-xlarge: var(--font-size-xl);
    --font-size-xxlarge: var(--font-size-xxl);
  
    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
  
    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;
  
    /* Shadows */
    --shadow-text: 0 1px 3px rgba(0, 0, 0, 0.7);
    --shadow-text-strong: 0 2px 4px rgba(0, 0, 0, 0.8);
    --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.5);
  
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
  }
  
  /* ===== ACCESSIBILITY IMPROVEMENTS ===== */
  .skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #fff;
    color: #000;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s ease;
  }
  
  .skip-to-content:focus {
    top: 0;
  }
  
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
  }
  
  /* ===== LOADING STATE ===== */
  .js-loading {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .js-loaded {
    opacity: 1;
  }
  
  /* ===== BACKGROUND ===== */
  #bg:after {
    background-image: url('../../images/internet-map.webp');
    background-size: cover;
    background-position: center;
    opacity: 1;
  }
  
  #bg:before {
    background: linear-gradient(
      135deg, 
      rgba(19, 21, 25, 0.7) 0%, 
      rgba(30, 35, 45, 0.7) 50%, 
      rgba(19, 21, 25, 0.7) 100%
    );
    background-size: 200% 200%;
    animation: gradientAnimation 15s ease infinite;
  }
  
  /* ===== TYPOGRAPHY ===== */
  .subtitle, 
  .description {
    color: var(--text-secondary);
    text-shadow: var(--shadow-text);
    font-weight: var(--font-weight-semibold);
  }
  
  small, 
  .small-text,
  #header .content p.small-text {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-shadow: var(--shadow-text-strong);
  }
  
  h1 {
    font-size: var(--font-size-xxl);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
  }
  
  h2 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
  }
  
  h3 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
  }
  
  p, li {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }
  
  p {
    margin: 0 0 1rem 0;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem 0;
  }
  
  h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
    margin: 0 0 1rem 0;
  }
  
  hr {
    margin: 1.5rem 0;
  }
  
  body, input, select, textarea {
    line-height: 1.5;
  }
  
  /* ===== HEADER & NAVIGATION ===== */
  #rotating-text {
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-xs);
    padding: 0.3em 0;
    color: #fff;
    text-shadow: var(--shadow-text);
    font-size: var(--font-size-medium);
    transition: opacity 0.5s ease;
  }
  
  #header .content p {
    color: var(--text-secondary);
    text-shadow: var(--shadow-text);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.15rem;
    font-size: var(--font-size-small);
  }
  
  #header nav ul li a {
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.15rem;
    text-shadow: var(--shadow-button);
    transition: color 0.2s ease, background-color 0.2s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    min-width: 80px;
    text-align: center;
  }
  
  #header nav ul li a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
  }
  
  #header nav ul li a:hover:before {
    transform: translateX(0);
  }
  
  #header nav ul li a.active {
    color: #fff;
  }
  
  #header nav ul li a.active:before {
    transform: translateX(0);
  }
  
  /* ===== FOOTER ===== */
  #footer,
  #footer p, 
  #footer .copyright,
  footer p,
  footer .copyright,
  .copyright {
    color: var(--text-secondary);
    text-shadow: var(--shadow-text);
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem !important;
    content-visibility: auto;
  }
  
  #footer {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    contain: layout style paint;
  }
  
  /* ===== FORM ELEMENTS ===== */
  ::-webkit-input-placeholder,
  :-moz-placeholder,
  ::-moz-placeholder,
  :-ms-input-placeholder,
  .formerize-placeholder {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
  }
  
  /* ===== BUTTONS ===== */
  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button,
  .button {
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.15rem;
    text-shadow: var(--shadow-button);
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  input[type="submit"].primary,
  input[type="reset"].primary,
  input[type="button"].primary,
  button.primary,
  .button.primary {
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.15rem;
  }
  
  .actions {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
  }
  
  /* ===== ARTICLE CONTENT ===== */
  #main article {
    padding: 4.5rem 3rem 2rem 3rem;
    max-width: 50rem;
    animation: fadeIn 0.6s ease-out;
    min-height: 300px;
  }
  
  #main article p,
  #main article ul,
  #main article ol {
    font-size: var(--font-size-medium);
    line-height: 1.8;
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
  }
  
  #main article li {
    margin-bottom: 0.75rem;
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
    min-height: 1.5em;
    transform: translateY(10px);
  }
  
  /* Limit animation delays to first 6 items only */
  #main article li:nth-child(1) { animation-delay: 0.1s; }
  #main article li:nth-child(2) { animation-delay: 0.2s; }
  #main article li:nth-child(3) { animation-delay: 0.3s; }
  #main article li:nth-child(4) { animation-delay: 0.4s; }
  #main article li:nth-child(5) { animation-delay: 0.5s; }
  #main article li:nth-child(6) { animation-delay: 0.6s; }
  
  #main article h2 {
    font-size: var(--font-size-xxlarge);
    margin-bottom: var(--space-lg);
    color: #fff;
    text-shadow: var(--shadow-text-strong);
  }
  
  #main article h3 {
    font-size: var(--font-size-large);
    margin-bottom: var(--space-md);
    margin-top: var(--space-lg);
    color: #fff;
    text-shadow: var(--shadow-text);
  }
  
  #main article pre,
  #main article code {
    font-size: var(--font-size-normal);
    line-height: 1.6;
  }
  
  /* ===== TIMELINE STYLING - FIXED VERSION ===== */
.timeline-section {
    position: relative;
    padding-left: 2rem;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-light);
  }
  
  .timeline-section:last-child {
    border-bottom: none;
  }
  
  .timeline-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.5rem;
    height: 100%;
    width: 2px;
    background: linear-gradient(
      to bottom, 
      var(--achievement-date) 0%, 
      var(--achievement-tech) 50%, 
      var(--achievement-milestone) 100%
    );
    animation: pulseTimeline 3s infinite alternate;
    z-index: -1;
  }
  
  .timeline-section h3 {
    position: relative;
    font-size: 1.2em;
  }
  
  .timeline-section h3:before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--achievement-date);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .timeline-section:hover h3:before {
    transform: scale(1.2);
    box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.2);
  }
  
  /* Fix for timeline list formatting */
  .timeline-section ul {
    padding-left: 1.2em;
    margin-top: 1em;
    list-style-type: disc;
  }
  
  .timeline-section ul li {
    font-size: 1.1rem; /* Reduced from 1.2em to fix spacing */
    line-height: 1.6;
    margin-bottom: 0.75em; /* Reduced from 1em */
    padding-left: 0.5em;
    transition: transform 0.2s ease, color 0.2s ease;
    white-space: normal; /* Ensure text wraps properly */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: none;
    display: list-item; /* Ensure proper list display */
    text-indent: 0; /* Prevent unexpected indentation */
  }
  
  /* Fix for the bullet points */
  .timeline-section ul li::marker {
    content: "•"; /* Ensure consistent bullet style */
    font-size: 1em;
  }
  
  .timeline-section ul li:hover {
    transform: translateX(3px);
    color: rgba(255, 255, 255, 1);
  }
  
  .timeline-section ul li strong {
    color: #2196f3;
    font-weight: 600;
    margin-right: 0.25em;
    white-space: nowrap; /* Keep dates together */
  }
  
  /* Fix link wrapping in timeline */
  .timeline-section a {
    hyphens: none;
    word-break: normal; /* Changed from break-word */
    white-space: normal; /* Allow links to wrap */
    display: inline; /* Changed from inline-block */
  }
  
  /* Remove horizontal dividers */
  .timeline-section hr,
  #timeline hr,
  article hr,
  .timeline-section + hr,
  #timeline + hr,
  section + hr,
  hr {
    display: none !important;
  }

  /* Remove animations from timeline bulleted items */
.timeline-section ul li,
.timeline-section li {
  animation: none !important;
  opacity: 1 !important; 
  transform: translateX(0) !important;
  transition: none !important;
}

/* Remove any scroll-triggered animations */
.timeline-section [data-aos],
.timeline-section [data-scroll],
.timeline-section .aos-animate {
  transition: none !important;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Disable any JavaScript animation classes */
.timeline-section .animated,
.timeline-section .fade-in,
.timeline-section .slide-in {
  animation: none !important;
  opacity: 1 !important;
}
  
  /* ===== LINK STYLING ===== */
  .inline-resource,
  a[href*="dave.levine.io"],
  a[href*="internetsociety.org"],
  a[href*="livinginternet.com"],
  a[href*="nsf.gov"],
  a[href$=".pdf"],
  a[href^="http"] {
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 1.5px solid rgba(33, 150, 243, 0.5);
    padding-bottom: 1px;
    margin-right: 0.25em;
  }
  
  .inline-resource:hover,
  a[href*="internetsociety.org"]:hover,
  a[href*="livinginternet.com"]:hover,
  a[href*="nsf.gov"]:hover,
  a[href*="dave.levine.io"]:hover,
  a[href$=".pdf"]:hover,
  a[href^="http"]:hover {
    color: #2196f3;
    border-bottom: 1px solid #2196f3;
  }
  
  /* Link icons */
  .inline-resource:before,
  a[href*="dave.levine.io"]:before,
  a[href*="internetsociety.org"]:before,
  a[href*="livinginternet.com"]:before,
  a[href*="nsf.gov"]:before,
  a[href$=".pdf"]:before,
  a[href^="http"]:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0.3em;
    font-size: 0.9em;
    display: inline-block;
    flex-shrink: 0;
  }
  
  /* Paragraph link specific styling */
  p .inline-resource,
  p a[href*="dave.levine.io"],
  p a[href*="internetsociety.org"],
  p a[href*="livinginternet.com"],
  p a[href*="nsf.gov"],
  p a[href$=".pdf"],
  p a[href^="http"] {
    display: inline-flex;
    align-items: center;
  }
  
  /* PDF icon */
  a[href$=".pdf"]:before {
    content: "\f1c1";
    color: #ff5252;
  }
  
  /* Personal link icon */
  a[href*="dave.levine.io"]:before {
    content: "\f007";
    color: #03a9f4;
  }
  
  /* External website icons based on domain */
  a[href*="nsf.gov"]:before {
    content: "\f19c";
    color: #4caf50;
  }
  
  a[href*="internetsociety.org"]:before {
    content: "\f0ac";
    color: #2196f3;
  }
  
  a[href*="merit.edu"]:before {
    content: "\f19d";
    color: #9c27b0;
  }
  
  a[href*="computerhistory.org"]:before {
    content: "\f1da";
    color: #795548;
  }
  
  a[href*="internethalloffame.org"]:before {
    content: "\f091";
    color: #ffc107;
  }
  
  a[href*="ethw.org"]:before {
    content: "\f5fc";
    color: #3f51b5;
  }
  
  a[href*="livinginternet.com"]:before {
    content: "\f0eb";
    color: #ff9800;
  }
  
  a[href*="cs.umd.edu"]:before {
    content: "\f19c";
    color: #e91e63;
  }
  
  a[href*="cern"]:before {
    content: "\f0c3";
    color: #00bcd4;
  }
  
  a[href*="minnpost.com"]:before {
    content: "\f1ea";
    color: #607d8b;
  }
  
  a[href*="ncsa.illinois.edu"]:before {
    content: "\f109";
    color: #ff9800;
  }
  
  /* Default icon for other external links - simplified selector */
  a[href^="http"]:not([href$=".pdf"]):not([href*="nsf.gov"]):not([href*="internetsociety.org"]):not([href*="merit.edu"]):not([href*="computerhistory.org"]):not([href*="internethalloffame.org"]):not([href*="ethw.org"]):not([href*="livinginternet.com"]):not([href*="cs.umd.edu"]):not([href*="cern"]):not([href*="minnpost.com"]):not([href*="ncsa.illinois.edu"]):not([href*="dave.levine.io"]):before {
    content: "\f0c1";
    color: #2196f3;
  }
  
  /* ===== ACHIEVEMENT BADGES ===== */
  .achievement-list li {
    display: flex;
    align-items: center;
    padding: 0.75em 0;
  }
  
  .achievement-date, 
  .achievement-tech, 
  .achievement-milestone {
    display: inline-block;
    min-width: 100px;
    margin-right: var(--space-sm);
    padding: 0.3em 0.8em;
    border-radius: 20px;
    font-size: 0.9em;
    text-align: center;
    transition: background-color 0.2s ease;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  .achievement-date {
    background-color: var(--achievement-date);
  }
  
  .achievement-tech {
    background-color: var(--achievement-tech);
  }
  
  .achievement-milestone {
    background-color: var(--achievement-milestone);
  }
  
  /* ===== PROJECT ITEMS ===== */
  .project-item {
    background: rgba(30, 35, 45, 0.5);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  
  .project-item:hover {
    background: rgba(40, 45, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  .project-item h3 {
    position: relative;
    padding-bottom: 0.75rem;
  }
  
  .project-item h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--achievement-date), var(--achievement-tech));
    border-radius: 3px;
  }
  
  .project-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  /* ===== PROJECT LINK STYLING ===== */
  .project-link,
  .project-item p a.button.small {
    display: inline-block;
    font-size: 0.95rem;
    padding: 0 0 0.2em 0;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    padding-right: 1.8em;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  .project-link:before,
  .project-item p a.button.small:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 1.8em);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .project-link:hover:before,
  .project-item p a.button.small:hover:before {
    transform: scaleX(1);
  }
  
  .project-link:after,
  .project-item p a.button.small:after {
    content: "→";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    font-size: 1.1em;
  }
  
  .project-link:hover,
  .project-item p a.button.small:hover {
    color: rgba(255, 255, 255, 1);
    background-color: transparent;
    box-shadow: none;
  }
  
  .project-link:hover:after,
  .project-item p a.button.small:hover:after {
    transform: translate(3px, -50%);
  }
  
  /* ===== IMAGE ASPECT RATIO HANDLING ===== */
  .image.main {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Default 16:9 aspect ratio */
    overflow: hidden;
    margin-bottom: var(--space-lg);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  
  .image.main::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* Default 16:9 aspect ratio */
  }
  
  #about .image.main {
    padding-bottom: 75%; /* 4:3 aspect ratio */
  }
  
  #timeline .image.main {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
  }
  
  #achievements .image.main {
    padding-bottom: 50%; /* 2:1 aspect ratio */
  }
  
  .image.main img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: saturate(1.1) contrast(1.1);
  }
  
  .image.main:hover img {
    transform: scale(1.03);
    filter: saturate(1.2) contrast(1.15);
  }
  
  .image.main.preserve-ratio img {
    object-fit: contain;
    background-color: rgba(245, 245, 245, 0.1);
  }
  
  /* ===== IMPROVED CONTACT SECTION ===== */
  #contact {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto;
  }
  
  #contact p {
    margin-bottom: 1.5rem;
    font-size: var(--font-size-medium);
    line-height: var(--line-height-relaxed);
  }
  
  /* Clean, minimalist email styling */
  .contact-email {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.2rem;
    transition: all 0.3s ease;
    position: relative;
    font-family: "Courier New", monospace;
    letter-spacing: 0.05em;
  }
  
  .contact-email:hover {
    color: #fff;
    border-bottom-color: #fff;
  }
  
  .contact-email:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease;
  }
  
  .contact-email:hover:after {
    width: 100%;
  }
  
  /* ===== CUSTOM SCROLLBAR ===== */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
  }
  
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
  }
  
  /* ===== DARK/LIGHT THEME TOGGLE ===== */
  .theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
  }
  
  .theme-toggle button {
    background: rgba(30, 35, 45, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    backdrop-filter: blur(5px);
  }
  
  .theme-toggle .sun {
    display: none;
  }
  
  /* ===== ANIMATIONS ===== */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes pulseTimeline {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
  }
  
  @keyframes logoReveal {
    0% {
      opacity: 0;
      transform: scale(0.1);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .logo img {
    animation: logoReveal 1s ease-out forwards;
    transform-origin: center;
  }

  @media screen and (max-width: 736px) {
    .logo img {
      animation: logoReveal 1s ease-out forwards !important;
      transform-origin: center;
    }
  }
  
  /* ===== LIGHT THEME STYLES ===== */
  body.light-theme {
    background-color: #f5f5f5;
    color: #333;
  }
  
  body.light-theme #bg:after {
    opacity: 0.1;
  }
  
  body.light-theme #bg:before {
    background: linear-gradient(
      135deg, 
      rgba(255, 255, 255, 0.9) 0%, 
      rgba(240, 240, 245, 0.9) 50%, 
      rgba(255, 255, 255, 0.9) 100%
    );
  }
  
  body.light-theme #main article {
    background: rgba(255, 255, 255, 0.8);
    color: #333;
  }
  
  body.light-theme h1, 
  body.light-theme h2, 
  body.light-theme h3 {
    color: #222;
    text-shadow: none;
  }
  
  body.light-theme p, 
  body.light-theme li {
    color: rgba(0, 0, 0, 0.85);
    text-shadow: none;
  }
  
  body.light-theme .theme-toggle .moon {
    display: none;
  }
  
  body.light-theme .theme-toggle .sun {
    display: block;
  }
  
  body.light-theme .theme-toggle button {
    background: rgba(240, 240, 245, 0.7);
    color: #333;
    border-color: rgba(0, 0, 0, 0.1);
  }
  
  body.light-theme .project-item {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  body.light-theme .project-item:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.2);
  }
  
  body.light-theme .achievement-date,
  body.light-theme .achievement-tech,
  body.light-theme .achievement-milestone {
    color: rgba(0, 0, 0, 0.9);
  }
  
  body.light-theme .project-link,
  body.light-theme .project-item p a.button.small {
    color: #333;
  }
  
  body.light-theme .project-link:before,
  body.light-theme .project-item p a.button.small:before {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  body.light-theme .contact-email {
    color: #333;
    border-bottom-color: rgba(0, 0, 0, 0.3);
  }
  
  body.light-theme .contact-email:hover {
    color: #000;
    border-bottom-color: transparent;
  }
  
  body.light-theme .contact-email:after {
    background-color: #000;
  }
  
  /* ===== REDUCED MOTION ===== */
  @media (prefers-reduced-motion: reduce) {
    #main article,
    #main article li {
      animation: none;
      opacity: 1;
      transform: none;
    }
  
    .image.main img,
    .project-item,
    #contact-email,
    .contact-email {
      transition: none;
      transform: none;
    }
  
    #bg:before {
      animation: none;
    }
  
    #header nav ul li a:before {
      transition: none;
    }
  
    .project-link:before,
    .project-link:after,
    .project-item p a.button.small:before,
    .project-item p a.button.small:after,
    .contact-email:after {
      transition: none;
    }
  
    .logo img {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
  
  /* ===== RESPONSIVE ADJUSTMENTS ===== */
  @media screen and (max-width: 980px) {
    :root {
      /* Adjust font sizes for medium screens */
      --font-size-xxlarge: 1.6rem;
      --font-size-xlarge: 1.4rem;
    }
  
    /* Reduce header content padding */
    #header .content .inner {
      padding: 2rem 2rem;
    }
  
    /* Reduce space between header elements */
    #header > * {
      margin-top: 2.5rem;
    }
  
    #header > *:before {
      top: calc(-2.5rem - 1px);
      height: calc(2.5rem + 1px);
    }
  }
  
  @media screen and (max-width: 736px) {
    :root {
      /* Adjust font sizes for small screens */
      --font-size-medium: 1rem;
      --font-size-large: 1.2rem;
      --font-size-xlarge: 1.3rem;
      --font-size-xxlarge: 1.5rem;
    }
  
    #main article {
      padding: 3.5rem 1.5rem 1.5rem 1.5rem;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      overflow-wrap: break-word;
      word-wrap: break-word;
      hyphens: none;
    }
  
    #main article p,
    #main article ul,
    #main article ol {
      line-height: 1.6;
      word-wrap: break-word;
    }
  
    #main article h2 {
      margin-bottom: var(--space-md);
    }
  
    #main article h3 {
      margin-bottom: var(--space-sm);
      margin-top: var(--space-lg);
    }
  
    #main article img {
      max-width: 100%;
      height: auto;
    }
  
    #main article li {
      margin-bottom: var(--space-xs);
    }
  
    #main article table {
      display: block;
      overflow-x: auto;
      width: 100%;
    }
  
    #wrapper {
      padding: var(--space-lg) var(--space-sm);
    }
  
    #main {
      width: 100%;
      padding: 0;
    }
  
    /* Ensure tap targets are large enough */
    #header nav ul li a,
    .button,
    a.button {
      padding: 0.7em 1.2em;
      min-height: 44px;
      min-width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .achievement-date, 
    .achievement-tech,
    .achievement-milestone {
      min-width: 80px;
      font-size: 0.8em;
    }
  
    .timeline-section {
      padding-left: 1.5rem;
    }
  
    .timeline-section h3:before {
      left: -1.5rem;
      width: 0.8rem;
      height: 0.8rem;
    }
  
    .project-item {
      padding: 1.2rem;
    }
  
    .contact-email {
      padding: 0.75rem 1.5rem;
      font-size: 1.1rem;
    }
  
    /* Fix for rotating text on mobile */
    #header .content {
      min-height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  
    #header .content p {
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      font-size: 0.8rem;
      line-height: 1.5;
    }
  
    #header .content .inner {
      padding: 1.5rem 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  
  @media screen and (max-width: 480px) {
    :root {
      /* Adjust font sizes for extra small screens */
      --font-size-small: 0.85rem;
      --font-size-normal: 0.9rem;
      --font-size-medium: 0.95rem;
      --font-size-large: 1.1rem;
      --font-size-xlarge: 1.2rem;
      --font-size-xxlarge: 1.3rem;
    }
  
    #main article {
      padding: 3rem 1rem 1rem 1rem;
    }
  
    #main article .close {
      top: 0.5rem;
      right: 0.5rem;
    }
  
    /* Ensure content is readable */
    #main article p,
    #main article li {
      font-size: 1rem; /* Minimum 16px for readability */
    }
  
    /* Adjust contact email for small screens */
    .contact-email {
      padding: 0.75rem 1rem;
      font-size: 1rem;
      width: 100%;
      box-sizing: border-box;
    }
  
    .timeline-section {
      padding-left: 1.2rem;
    }
  
    .timeline-section h3:before {
      left: -1.2rem;
      width: 0.6rem;
      height: 0.6rem;
    }
  }
  
  /* For very small screens, reduce font size further if needed */
  @media screen and (max-width: 360px) {
    #header .content p {
      font-size: 0.6rem;
    }
  }
  
  /* ===== PRINT STYLES ===== */
  @media print {
    /* Optimize for printing */
    @page {
      margin: 1.5cm;
    }
  
    body {
      font-size: 12pt;
    }
  
    #bg, #header nav, #footer, .close {
      display: none !important;
    }
  
    body, #wrapper, #main, #main article {
      background: white !important;
      color: black !important;
      margin: 0 !important;
      padding: 1cm !important;
      width: 100% !important;
      max-width: none !important;
      box-shadow: none !important;
    }
  
    #main article p, #main article li, #main article h2, #main article h3 {
      color: black !important;
      text-shadow: none !important;
    }
  
    /* Ensure URLs are printed */
    a[href]:after {
      content: " (" attr(href) ")";
      font-size: 90%;
      color: #666;
    }
  
    /* Don't print URL for internal links */
    a[href^="#"]:after {
      content: "";
    }
  
    /* Break pages appropriately */
    h2, h3 {
      page-break-after: avoid;
      break-after: avoid;
    }
  
    .image.main,
    .project-item, 
    .timeline-section {
      page-break-inside: avoid;
      break-inside: avoid;
    }
  }
  
  /* ===== CONTENT VISIBILITY OPTIMIZATIONS ===== */
  /* Prioritize important content for LCP */
  #header h1,
  #header .logo img,
  #about .image.main img {
    content-visibility: visible;
    contain: none;
  }
  
  /* Ensure the header content is prioritized */
  #header .content .inner {
    content-visibility: visible;
    contain: none;
  }
  
  /* Ensure the first article image loads quickly */
  #about .image.main {
    content-visibility: visible;
    contain: none;
  }
  
  /* Prevent scroll indicator from being LCP */
  .scroll-indicator {
    content-visibility: auto;
    contain: layout style paint;
  }

/* Fix for mobile URL wrapping in Recognition and Awards section */
@media screen and (max-width: 736px) {
  /* Target the specific list items with links */
  .achievement-list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1em;
  }

  /* Keep the date on its own line */
  .achievement-list .achievement-date {
    margin-bottom: 0.25em;
  }

  /* Make links wrap properly */
  .achievement-list a.inline-resource {
    display: inline;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Fix for bulleted text running outside screen bounds */
  #main article ul li,
  #main article ol li {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Fix for long links in bulleted lists */
  #main article ul li a,
  #main article ol li a {
    display: inline;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
  }

  /* Fix for long blue text in bulleted lists */
  #main article ul li strong,
  #main article ol li strong,
  #main article ul li a[href],
  #main article ol li a[href] {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
}

/* Blue highlighting for dates in bullet points */
#main article ul li strong,
#main article ol li strong {
  color: #2196f3;
  font-weight: 600;
  margin-right: 0.25em;
}

/* Style numbered list items with blue color */
#main article ol li span.date,
#main article ol li > span:first-child {
  color: #2196f3;
  font-weight: 600;
  margin-right: 0.25em;
}