body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
    font-size: 18px;

    margin: 0;
    background: #f5f5f5;
    color: #222;

    margin: 0 auto;
    overflow-y: scroll;
}

/* Standardize the wrappers so they don't add extra gaps */
.hobbies-container,
.projects-container,
.projects-content {
    margin: 0 auto;
    padding: 0;
    display: block; /* Ensures they don't behave like flexboxes unless you want them to */
}

/* This is the master control for the gap under the orange header */
.hobbies-container,
.projects-container,
.projects-content,
.project-module {
    margin-top: 1rem; 
}


.section-divider {
    max-width: 1000px;  /* Limits the width on large screens */
    width: 90%;         /* Allows it to shrink on mobile devices */
    margin: 1rem auto;  /* The 'auto' on left/right handles the centering */
    opacity: 0.5;       /* Match your previous style preference */
    border: 0;          /* Clear default browser styling */
    border-top: 1px solid #ccc; /* Defines the actual line */
}

/* 1. Standardize the Orange Header */
header {
    background: #e26608;
    color: white;
    padding: 2rem 1rem; /* Unified padding for a consistent "bar" height */
    text-align: center;
}

header h1 {
    margin: 0; /* Remove default margin to prevent "pushing" the header */
}

.intro-text {
    margin: 0.5rem 0 0 0; /* Tight gap between title and subtitle */
    font-size: 1.1rem;
    opacity: 0.9;
}


/* 3. Section & Heading Spacing */
section {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1rem; /* Padding on sides for mobile, small gap on top */
}

section h2 {
    text-align: center;
    margin-top: 0;      /* Kill the top margin so it doesn't fight the container */
    margin-bottom: 0.5rem; 
}

section p {
    text-align: center;
    line-height: 1.55;
    max-width: 900px;
    margin: 0 auto .5rem auto; /* Consistent bottom margin to push away the next thing */
}



/* Links */
section a {
    color: #e26608; /* LinkedIn Blue */
    text-decoration: none; /* Removes the default underline */
    font-weight: bold;
    transition: color 0.2s ease;
}

section a:hover {
    color: #c05707; /* Darkens slightly when you hover over it */
    text-decoration: underline; /* Adds the underline back on hover for clarity */
}

nav {
    background: #222;
    padding: 1rem;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* The Hover Effect: Keeps the Glow */
nav a:hover {
    color: #e26608;
    text-shadow: 0 0 10px #e26608, 0 0 20px #e26608;
    text-decoration: none;
}

/* The Active State: Solid Color, No Glow */
nav a.active {
    color: #e26608;
    text-shadow: none; /* This ensures the glow is removed */
}

.profile-pic {
    width: 225px;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    border: 3px solid #222;

    /* THE SYMMETRY SETTINGS: */
    /* Top: 0.75rem margin + 0.75rem section padding = 1.5rem */
    /* Bottom: 1.5rem margin collapses with 0.5rem h2 margin = 1.5rem */
    margin: 1rem auto 1.5rem auto; 
}

.pdf-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.pdf-button {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    background: #222;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    border: 2px solid #222;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.pdf-button:hover {
    background: #e26608;
    transform: translateY(-2px);
}

/* =========================================
   PROJECTS PAGE LAYOUT
   ========================================= */

/* --- Pop-Out Menu Styles --- */
.legend-toggle {
  position: fixed;
  top: 80px; /* Adjust this so it sits below your main navbar */
  left: 20px;
  background-color: #222;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 900;
  font-size: 16px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s;
}

.legend-toggle:hover {
  background-color: #222;
}

.projects-legend-drawer {
  position: fixed;
  top: 0;
  left: -300px; /* Hidden off-screen by default */
  width: 250px;
  height: 100vh;
  background: #f4f4f4;
  padding: 2rem;
  box-shadow: 4px 0 10px rgba(0,0,0,0.1);
  transition: left 0.3s ease-in-out;
  z-index: 999;
  overflow-y: auto;
}

/* Class added by JavaScript to slide the menu in */
.projects-legend-drawer.open {
  left: 0; 
}

.close-legend {
  background: none;
  border: none;
  font-size: 30px;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  color: #222;
}

.projects-legend-drawer ul {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.projects-legend-drawer a {
  text-decoration: none;
  color: #222;
  display: block;
  padding: 10px 15px;
  margin-bottom: 5px;
  border-radius: 4px;
  transition: all 0.3s;
  border-left: 4px solid transparent; /* Prep for the active glow indicator */
}

/* The Hover and Active "Glow" State */
.projects-legend-drawer a:hover,
.projects-legend-drawer a.active {
  color: #ff9800; /* Subtle orange text */
  background-color: rgba(255, 152, 0, 0.1); /* Very light orange background */
  border-left: 4px solid #ff9800; /* Orange bar on the left */
  text-shadow: 0 0 8px rgba(255, 152, 0, 0.4); /* The glowing effect */
}

/* Responsive Media Grid */
.media-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Forces exactly 3 equal columns */
    gap: 1rem;
}

/* Uniform sizing and cropping for the grid */
.media-gallery img,
.media-gallery video {
  max-width: 100%; /* ADDED: This is the magic rule that stops the bug! It forces the image to obey the grid boundaries. */
  width: 100%;     /* Keeps the image filling its designated grid cell */
  height: 250px;   /* Kept this from your code so you maintain your uniform cropping */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  cursor: pointer; 
  transition: transform 0.2s ease; 
}

.media-gallery img:hover,
.media-gallery video:hover {
  transform: scale(1.02); 
}

/* --- Lightbox Modal Styles --- */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Ensures it sits on top of everything */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* Semi-transparent black background */
  opacity: 0;
  transition: opacity 0.3s ease; /* Smooth fade in */
}

.modal.show {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

#modalContentWrapper {
  max-width: 90%;
  max-height: 90%;
}

/* Styling the media inside the pop-out */
#modalContentWrapper img,
#modalContentWrapper video {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
}

.close-modal:hover,
.close-modal:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}



/* =========================================
   CURRENT STUDIES PAGE LAYOUT
   ========================================= */

/* Main wrapper to match Hobbies/Projects alignment */
.studies-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 37px 1rem 2rem 1rem; 
    box-sizing: border-box;
}



/* --- Subsection 1: Recent Interests --- */
.study-log {
    background: #fff;
    border-left: 4px solid #111;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);

    /* New Flexbox properties */
    display: flex;
    align-items: center; /* Aligns the image to the top of the container */
    gap: 25px; /* Creates the gap between the text and the image */
}

/* Ensure the text side takes up the remaining available space */
.log-content {
    flex: 1; 
}

/* Give the image container a fixed width */
.log-image {
    flex: 0 0 250px; /* Adjust the 250px to make the image box wider or narrower */
}

/* Style the image so it fits nicely inside its container */
.log-image img {
    width: 100%;
    height: auto;
    border-radius: 4px; /* Matches your existing border-radius theme */
    border: 1px solid #eee; /* Optional: adds a subtle border to the image */
    object-fit: cover;
}

.study-log .date {
    font-size: 0.85rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.log-image.book-cover {
    flex: 0 0 140px; /* Makes the image column narrower for books */
}

.log-image.book-cover img {
    aspect-ratio: 2 / 3; /* Forces a standard book cover shape */
    object-fit: cover;
}

/* The Fixed Scroll Window */
.interests-scroll-viewport {
    margin-top: 1.5rem;
    height: 375px; 
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: #fdfdfd; 
    border-radius: 8px;
    border: 1px solid #eee;
    -webkit-overflow-scrolling: touch; 
}

/* Custom Scrollbar Styling */
.interests-scroll-viewport::-webkit-scrollbar {
    width: 8px;
}
.interests-scroll-viewport::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.interests-scroll-viewport::-webkit-scrollbar-thumb {
    background: #e26608; /* Brand Orange */
    border-radius: 10px;
}

.archive-header {
    margin: 30px 0 15px 0; 
    color: #777; 
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* --- Subsection 2: Long-Term Interests --- */
.static-section {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.legend-nav {
    flex: 0 0 200px;
    position: sticky;
    top: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.domain-content {
    flex: 1; 
    min-width: 0; /* Prevents text overflow */
}

.domain-block {
    margin-bottom: 40px;
}

.domain-block h3 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

/* Responsive design */
@media (max-width: 768px) {
    .static-section {
        flex-direction: column;
    }
    .legend-nav {
        position: static;
        width: 100%;
    }
}

/* =========================================
   Hobbies Page Layout
   ========================================= */


/* --- Rest of your Hobbies code (Music, Gaming, etc.) --- */
#music-hobby {
    padding: 20px 0;
    border-top: 1px solid #eee;
}

.music-container {
    display: block; /* Removes the 1fr/2fr grid split */
    width: 100%;    /* Ensures it spans the whole page width */
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 768px) {
    .music-container {
        grid-template-columns: 1fr; /* Stacks on mobile */
    }
}

/* Ensure the flexbox inside also knows to stay centered */
.spotify-flex {
    display: flex;
    justify-content: center; 
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* 2. Center the "Top Played" header */
#music-hobby h2 {
    text-align: center;
    width: 100%;
}

.artist-item {
    text-align: center;
    width: 130px;
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

.artist-item:hover {
    transform: scale(1.05);
}

.artist-item img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 8px;
}

.artist-item span {
    font-size: 1rem;          /* Increased to match the gaming section */
    font-weight: 600;         /* Keeping the bold look for artist names */
    margin-top: 10px;         /* Adds the same spacing below the image */
    
    /* The 2-line wrapping logic from the gaming section */
    min-height: 2.4em;        /* Reserves exact space for 2 lines */
    line-height: 1.2;
    display: -webkit-box;     
    -webkit-line-clamp: 2;    /* Cuts text off after 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Gaming Section Container --- */
#gaming-hobby {
    padding: 20px 0;
}

.gaming-header {
    margin-bottom: 30px;
}

/* --- Steam Section (Centering Logic) --- */
.steam-rotation {
    text-align: center;
    margin-top: 40px;
}

/* 1. The Container: Forces horizontal layout */
#game-list {
    display: flex;
    flex-direction: row;      /* Keeps the items side-by-side */
    justify-content: center;  /* Centers the group on the page */
    flex-wrap: wrap;          /* Lets them drop to a new line on smaller screens */
    gap: 25px;                /* Space between the games */
    margin-top: 20px;
}

/* 2. The Individual Game Cards: Fixed width so text wraps */
#game-list > div {            
    width: 220px;             /* Matches your image width */
    display: flex;
    flex-direction: column;   /* Stacks the image and text vertically within the card */
    align-items: center;      
    text-align: center;
}

/* 3. The Title Text: Two-line wrap logic */
#game-list h4 {
    font-size: 1rem;
    width: 100%;
    margin-top: 10px;
    
    /* The wrapping logic */
    min-height: 2.4em;        /* Reserves exact space for 2 lines */
    line-height: 1.2;
    display: -webkit-box;     
    -webkit-line-clamp: 2;    /* Cuts text off after 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Impactful Games Section (Single Entry Per Line) --- */


.impactful-games-section h3 {
    text-align: center;
}

.favorites-grid {
    display: flex;
    flex-direction: column; /* Forces one card per line */
    gap: 25px; /* Space between each game row */
    max-width: 900px; /* Optional: keeps the text from stretching too wide on huge monitors */
    margin: 0 auto; /* Centers the list if you use a max-width */
}

.impact-card {
    display: flex;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    overflow: hidden;
    width: 100%; /* Ensures it fills the container */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.impact-card:hover {
    transform: translateX(5px); /* Subtle shift to the right instead of lifting */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.game-image-container {
    width: 220px; /* Increased width to give the image more presence */
    min-width: 220px;
}

.game-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-details {
    padding: 25px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the text next to the image */
}

.game-details h4 {
    margin: 0 0 12px 0;
    font-size: 1.4rem; /* Slightly larger title */
    color: #333;
}

.game-details p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .impact-card {
        flex-direction: column; /* Image on top of text on mobile */
    }
    
    .game-image-container {
        width: 100%;
        height: 200px;
        min-width: 100%;
    }

    .game-details {
        padding: 20px;
    }
}