section.portfolio-listing > header {
    border-bottom: 1px solid #a2a2a2;
    box-shadow: 0px 1px 2px 1px #cfcfcf;
    padding: 10px;
}

section.portfolio-listing > header > h1 {
    text-align: center;
}

section.portfolio-listing > article > *:not(.scroll-container) {
    margin: 0 2rem;
}

section.portfolio-listing > article > h2 {
    border-bottom: 1px solid #999999;
    padding: 10px 0;
    color: #313131;
}

section.portfolio-listing > article > h3,
section.portfolio-listing > article > h4,
section.portfolio-listing > article > h5,
section.portfolio-listing > article > h6 {
    padding: 10px 0;
    padding-left: 1rem;
}

section.portfolio-listing p.note.floating {
    padding: 1rem 2rem;
    background-color: #f8f8f8;
    border-radius: 0.5rem;
    border: 1px solid #c0c0c0;
    width: fit-content;
    margin: 1em auto;
    max-width: min(800px, 95%);
}

/* === MEDIA SCREEN & DARK MODE === */

@media screen and (prefers-color-scheme: dark) {
    section.portfolio-listing > header {
        border-bottom: 1px solid #444; /* Subtle, non-intrusive */
        box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5); /* Darker soft shadow */
    }

    section.portfolio-listing > article > h2 {
        border-bottom: 1px solid #555; /* Low contrast border */
        color: #e5e7eb; /* Light heading for visibility */
    }

    section.portfolio-listing p.note.floating {
        background-color: #1f2937; /* Dark gray-blue for subtle box */
        border: 1px solid #374151; /* Distinct edge for separation */
        color: #f1f5f9; /* Ensures note text is readable */
    }
}