/* --- PAGE HEADER (For about me section) --- */
header:not(.about-section) {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 3rem 1rem;
}

header:not(.about-section) h1 {
    margin: 0;
    font-size: 2.5rem;
    color: white;
}

/* --- ABOUT ME SECTION --- */
header.about-section {
    background-color: transparent;
    padding: 0.5rem 1rem 1rem 1rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

header.about-section h1 {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    margin-top: 0;
    letter-spacing: -1px;
}

header.about-section ul {
    display: inline-block;
    text-align: left;
    margin: 0 auto 1rem auto;
}

header.about-section li {
    font-size: 1.05rem;
    color: var(--text-color);
    line-height: 1.4;
    margin-bottom: 0.3rem;
}

.bio-text {
    font-size: 1.05rem;
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.hero-text, .results-text {
    font-size: 1rem;
    color: var(--primary-color);
    line-height: 1.8;
}

.results-text {
    font-size: 1.5rem;
}

.hobby-text {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.coursework-intro {
    margin-bottom: 0.5rem;
}

.coursework {
    color: var(--text-color);
    line-height: 1.4;
    margin-bottom: 1rem;
}

.coursework p {
    margin-top: 5px;
    margin-bottom: 5px;
}

.social-links a {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 24px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
    background-color: var(--hover-color);
    transform: translateY(-2px);
}

@media screen and (min-width: 801px) {
    header.about-section {
        padding: 2rem 1rem 1rem 1rem;
    }
}