/*

Comprehensive CSS File for the Dr. Lee, PhD. LLC Website.
This stylesheet provides a unified design for all pages, ensuring
a consistent and professional look. It includes a parchment-like
background, consistent typography, and a responsive layout. */
/* ================== General Styles ================== */

/* Import Google Fonts for a classic typewriter feel */ @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* Apply the parchment background and base font to the entire body / body { / Use the vintage paper texture as a background / background-image: url('./images/vintage-paper.png'); background-color: #f8f8f8; / Fallback color */ color: #333; font-family: 'Special Elite', monospace; margin: 0; padding: 0; line-height: 1.6; }

/* Ensure all text elements use the typewriter font */
p, h1, h2, h3, h4, h5, h6, a, button, li {
font-family: 'Special Elite', monospace;
}

p {
font-size: 1.1rem;
}

/* Base container to center content and add a clean paper effect */
.container {
max-width: 960px;
margin: 40px auto;
padding: 20px;
background-color: 
#ffffff;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
text-align: center;
}

.indented-list { list-style-type: none; /* removes bullet points / padding-left: 1.5rem; / adds indentation / margin-bottom: 1rem; / optional spacing below each list */ }

/* ================== Header Styling ================== */

header {
background-color: 
#f8f8f8; /* Matches the body background */
padding: 20px;
text-align: center;
border-bottom: 2px solid #ccc;
}

.logo-and-name {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}

.logo-image {
max-width: 80px;
height: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.site-title {
font-family: 'Special Elite', monospace;
font-size: 2.5rem;
font-weight: 700;
color: 
#343a40;
}

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

nav a {
text-decoration: none;
color: #555;
font-weight: 600;
font-family: 'Special Elite', monospace;
transition: color 0.3s ease;
}

nav a:hover { color: 
#007bff; /* A nice highlight color */ }

/* ================== Main Content Sections ================== */

.content-section {
padding: 40px 20px;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}

.content-section:last-of-type { border-bottom: none; }

h2 {
font-family: 'Special Elite', monospace;
font-size: 2rem;
color: 
#343a40;
margin-bottom: 15px;
text-align: center;
}

h3 {
font-family: 'Special Elite', monospace;
font-size: 1.5rem;
color: 
#343a40;
margin-top: 20px;
margin-bottom: 10px;
}

h4 {
font-family: 'Special Elite', monospace;
font-size: 1.2rem;
color: 
#343a40;
margin-top: 15px;
margin-bottom: 8px;
}

.post-list {
list-style: none;
padding: 0;
}

/* ================== Button Styling ================== */

.btn {
display: inline-block;
padding: 10px 20px;
background-color: 
#007bff;
color: 
#ffffff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
font-family: 'Special Elite', monospace;
font-weight: 600;
}

.btn:hover { background-color: 
#0056b3; }

/* ================== Footer Styling ================== */

footer {
text-align: center;
padding: 20px;
border-top: 1px solid #ccc;
font-family: 'Special Elite', monospace;
font-size: 0.9rem;
color: #666;
margin-top: 40px;
}

/* ================== Responsive Design ================== */
@media (max-width: 768px) {
.site-title {
font-size: 2rem;
}

.logo-and-name {
    flex-direction: column;
}

nav ul {
    flex-direction: column;
    gap: 10px;
}
}