/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Variables for 'Random' Theme */ :root { --primary-color: #1a237e; /* Deep Indigo */ --secondary-color: #ffab00; /* Amber Accent */ --background-color: #f5f5f5; /* Light Gray */ --text-color: #212121; /* Dark Gray */ --heading-font: 'Merriweather', serif; --body-font: 'Lato', sans-serif; --container-width: 960px; } body { font-family: var(--body-font); line-height: 1.7; background-color: var(--background-color); color: var(--text-color); font-size: 16px; /* Base font size */ } .container { max-width: var(--container-width); margin: 0 auto; padding: 20px; overflow: hidden; /* Contains floats */ } header { background: var(--primary-color); color: #ffffff; padding: 20px 0; text-align: center; margin-bottom: 30px; } header h1 { font-family: var(--heading-font); font-size: 2.8em; margin-bottom: 10px; font-weight: 700; } header p { font-size: 1.2em; } h2 { font-family: var(--heading-font); color: var(--primary-color); font-size: 2.2em; margin-top: 40px; margin-bottom: 20px; border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; font-weight: 700; } h3 { font-family: var(--heading-font); color: var(--primary-color); font-size: 1.6em; margin-top: 30px; margin-bottom: 15px; font-weight: 700; } p { margin-bottom: 1.2em; text-align: justify; } ul, ol { margin-left: 30px; margin-bottom: 1.2em; } li { margin-bottom: 0.6em; } a { color: var(--primary-color); text-decoration: none; } a:hover { color: var(--secondary-color); text-decoration: underline; } img { max-width: 100%; /* Makes image responsive */ height: auto; display: block; margin: 30px auto; /* Center image */ border: 1px solid #ddd; /* Subtle border */ padding: 5px; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .img-description { text-align: center; font-style: italic; color: #555; margin-top: -15px; /* Pull description closer to image */ margin-bottom: 30px; font-size: 0.9em; } footer { background: #333; color: #fff; text-align: center; padding: 20px 0; margin-top: 40px; } footer p { text-align: center; margin-bottom: 0; font-size: 0.9em; } /* Responsive Design */ @media (max-width: 1000px) { .container { width: 90%; } } @media (max-width: 768px) { header h1 { font-size: 2.2em; } header p { font-size: 1.1em; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; } body { font-size: 15px; } } @media (max-width: 480px) { header h1 { font-size: 1.8em; } header p { font-size: 1em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } body { font-size: 14px; } ul, ol { margin-left: 20px; } }