/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Color and Font Variables - Randomized feeling, but consistent for professionalism */ :root { --primary-color: #1a1a2e; /* Deep Navy */ --secondary-color: #16213e; /* Slightly Lighter Navy */ --accent-color: #e94560; /* Vibrant Pink/Red */ --text-color: #e0e0e0; /* Light Gray/Off-White */ --heading-font: 'Arial', sans-serif; /* Clean Sans-serif */ --body-font: 'Georgia', serif; /* Readable Serif */ --container-width: 960px; /* Max width for content */ } body { font-family: var(--body-font); line-height: 1.7; color: var(--text-color); background-color: var(--primary-color); font-size: 16px; } .container { max-width: var(--container-width); margin: 0 auto; padding: 20px; background-color: var(--secondary-color); box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); border-radius: 8px; /* Subtle rounding */ margin-top: 30px; margin-bottom: 30px; } /* Headings */ h1, h2, h3, h4 { font-family: var(--heading-font); color: var(--accent-color); margin-bottom: 1em; line-height: 1.3; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } h1 { font-size: 2.8em; /* Larger for main title */ text-align: center; border-bottom: 2px solid var(--accent-color); padding-bottom: 0.5em; } h2 { font-size: 2.2em; margin-top: 1.5em; border-left: 4px solid var(--accent-color); padding-left: 0.5em; } h3 { font-size: 1.8em; margin-top: 1.2em; color: #f0a500; /* Different accent for H3 */ } /* Paragraphs and Text */ p { margin-bottom: 1.2em; text-align: justify; /* Justified text for a cleaner look */ } a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease; } a:hover { color: #ff7f7f; /* Lighter shade on hover */ text-decoration: underline; } /* Lists */ ul, ol { margin-left: 20px; margin-bottom: 1.5em; } li { margin-bottom: 0.8em; } /* Images */ img { max-width: 100%; /* Responsive images */ height: auto; display: block; margin: 30px auto; /* Center images */ border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } .image-caption { text-align: center; font-style: italic; font-size: 0.9em; color: #b0b0b0; margin-top: -20px; /* Pull caption closer to image */ margin-bottom: 30px; } /* Call to Action Button (Style Placeholder) */ .cta-button { display: inline-block; background-color: var(--accent-color); color: var(--primary-color); padding: 15px 30px; font-size: 1.2em; font-weight: bold; text-align: center; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; margin: 20px auto; display: block; /* Center button */ width: fit-content; transition: background-color 0.3s ease, transform 0.2s ease; font-family: var(--heading-font); text-shadow: none; } .cta-button:hover { background-color: #ff7f7f; transform: scale(1.05); color: var(--primary-color); text-decoration: none; } /* Footer */ footer { text-align: center; margin-top: 40px; padding: 20px; font-size: 0.9em; color: #a0a0a0; border-top: 1px solid #333; } /* Responsive Design */ @media (max-width: 1024px) { .container { max-width: 90%; padding: 15px; } h1 { font-size: 2.5em; } h2 { font-size: 2em; } h3 { font-size: 1.6em; } } @media (max-width: 768px) { body { font-size: 15px; } h1 { font-size: 2.2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.5em; } .container { margin-top: 15px; margin-bottom: 15px; border-radius: 0; /* Full width on smaller screens */ } p { text-align: left; } /* Justify can look odd on narrow screens */ } @media (max-width: 480px) { body { font-size: 14px; } h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1.3em; } .cta-button { padding: 12px 25px; font-size: 1em; } ul, ol { margin-left: 15px; } }