/* ========================================================================== 1. Global Styles & Variables - These styles apply to the whole website. ========================================================================== */ /* The 'root' is the highest-level element (the tag). We can define variables here to reuse them later. */ :root { --primary-color: #0056b3; /* A nice, strong blue for links and highlights */ --text-color: #333333; /* A dark grey for text, easier on the eyes than pure black */ --background-color: #ffffff; /* White background */ --font-family: 'Helvetica Neue', Arial, sans-serif; /* A clean, modern font stack */ } body { font-family: var(--font-family); color: var(--text-color); background-color: var(--background-color); line-height: 1.6; /* Sets a comfortable spacing between lines of text */ margin: 0; padding: 0; } /* ========================================================================== 2. Layout Container - This centers your content on the page. ========================================================================== */ .container { max-width: 800px; /* The content will not get wider than 800 pixels */ margin: 0 auto; /* This is the trick to center the block: 0 margin on top/bottom, auto on left/right */ padding: 2rem; /* Adds some breathing room inside the container (2rem is twice the base font size) */ } /* ========================================================================== 3. Headings (h1, h2, h3) - Styles for your page titles and section headings. ========================================================================== */ h1, h2, h3 { line-height: 1.2; /* Tighter line spacing for headings looks better */ margin-top: 2rem; margin-bottom: 1rem; } h1 { font-size: 2.5rem; /* Large and impactful for the main page title */ } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } /* ========================================================================== 4. Paragraphs & Text Elements ========================================================================== */ p { /* Remove the browser's default top margin */ margin-top: 0; /* Use only margin-bottom for consistent spacing between paragraphs */ margin-bottom: 1rem; } strong { font-weight: bold; } mark { background-color: #fff3cd; /* A pleasant light yellow */ padding: 0.2rem; } /* ========================================================================== 5. Links & Navigation ========================================================================== */ a { color: var(--primary-color); text-decoration: none; /* Removes the default underline */ } a:hover { text-decoration: underline; /* Adds the underline back when you hover over a link */ } nav { border-bottom: 1px solid #eeeeee; padding-bottom: 1rem; margin-bottom: 2rem; } nav a { margin-right: 1.5rem; /* Adds space between the navigation links */ font-weight: bold; } /* ========================================================================== 6. Images & Floating ========================================================================== */ img { max-width: 100%; /* Ensures images never overflow their container */ height: auto; /* Maintains the image's aspect ratio when it scales */ } .float-left { float: left; margin-right: 1.5rem; /* Space on the right of the image */ margin-bottom: 1rem; /* Space below the image */ } .float-right { float: right; margin-left: 1.5rem; margin-bottom: 1rem; } /* Helper class to contain floated elements */ .clearfix::after { content: ""; display: table; clear: both; } /* FIX: New rule for your instruction images */ .instruction-image { /* This makes each image stretch to the full width of its container, ensuring they align perfectly. */ width: 100%; /* This ensures the image's height scales correctly with the width. */ height: auto; /* This adds a nice gap below each instruction image */ margin-bottom: 2rem; } /* ========================================================================== 10. Lists (Bulleted & Numbered) ========================================================================== */ ul, ol { /* This forces the list to respect the space of floated elements */ overflow: hidden; /* Indentation for the list */ padding-left: 2.5rem; /* Space below the entire list */ margin-bottom: 1rem; } li { /* Adds a small amount of space between each list item for readability */ margin-bottom: 0.5rem; }