body { margin: 0; font-family: 'Roboto', sans-serif; background-color: #121212; /* Slightly darker background */ color: #e0e0e0; /* Lighter text for better contrast */ line-height: 1.7; font-size: 16px; } .container { max-width: 900px; margin: 0 auto; padding: 0 20px; } /* Header */ header { background-color: #1e1e1e; padding: 25px 0; text-align: center; border-bottom: 1px solid #333; } header .logo { max-width: 70px; /* Adjusted size */ margin-bottom: 10px; vertical-align: middle; } header h1 { color: #ffffff; margin: 0 0 0 15px; font-size: 2.8em; display: inline-block; vertical-align: middle; } /* Navigation */ nav { background-color: #282828; padding: 15px 0; text-align: center; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #333; } nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { display: inline-block; margin: 0 15px; } nav ul li a { color: #569cd6; text-decoration: none; font-size: 1.1em; padding: 5px 10px; border-radius: 4px; transition: background-color 0.3s ease; } nav ul li a:hover, nav ul li a.active { background-color: #333; text-decoration: none; } /* Main Content */ main { padding: 30px 0; } section { background-color: #1e1e1e; padding: 25px; margin-bottom: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } h2 { color: #ffffff; border-bottom: 2px solid #569cd6; /* Accent border */ padding-bottom: 10px; margin-top: 0; /* Removed default margin-top for consistency inside sections */ margin-bottom: 20px; font-size: 2em; } p { margin-bottom: 18px; color: #c0c0c0; /* Slightly softer than main text for paragraphs */ } /* Code Blocks */ pre { background-color: #2c2c2c; /* Slightly different shade for pre */ padding: 20px; overflow-x: auto; font-family: 'Source Code Pro', monospace; color: #dcdcdc; border-radius: 6px; border: 1px solid #383838; font-size: 0.95em; } code { /* Inline code */ color: #acacac; font-family: 'Source Code Pro', monospace; background-color: #2c2c2c; padding: 3px 6px; border-radius: 4px; font-size: 0.9em; } pre code { /* Code inside pre, reset some properties */ padding: 0; background-color: transparent; font-size: inherit; /* Inherit font size from pre */ } a { color: #569cd6; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #79b8f3; /* Lighter shade on hover */ text-decoration: underline; } /* Image Gallery */ .image-gallery { text-align: center; margin-bottom: 20px; } .image-gallery img { max-width: calc(50% - 20px); /* Display two images per row on larger screens */ height: auto; border: 2px solid #444; border-radius: 6px; margin: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .image-gallery img:hover { transform: scale(1.03); box-shadow: 0 0 15px rgba(86, 156, 214, 0.5); } /* For smaller screens, stack images */ @media (max-width: 768px) { .image-gallery img { max-width: calc(100% - 20px); /* Full width on smaller screens */ } } /* Goals and Projections Section (previously .notes) */ .goals-projections { background-color: #232323; /* Slightly different background */ padding: 25px; margin: 30px 0; border-radius: 8px; border-left: 5px solid #569cd6; /* Accent border */ } .goals-projections h2 { margin-top: 0; border-bottom: none; /* Remove border as section already distinct */ } .goals-projections p { color: #b0b0b0; } .goals-projections strong { color: #ffffff; /* Make strong tags stand out more */ } /* Task List Styling */ ul.task-list { /* Added a class for better targeting */ list-style: none; padding-left: 0; } ul.task-list li.task-list-item { margin-bottom: 12px; /* Increased spacing */ padding-left: 25px; /* Indent for custom bullet */ position: relative; font-size: 1.05em; } ul.task-list li.task-list-item::before { content: ""; /* Remove default bullet to use checkbox */ position: absolute; left: 0; top: 5px; /* Adjust alignment with text */ /* Custom checkbox styling can be done here if not using input[type=checkbox] */ } .task-list-item input[type="checkbox"] { margin-right: 12px; vertical-align: middle; transform: scale(1.2); /* Slightly larger checkboxes */ cursor: not-allowed; /* Since they are disabled */ } /* Footer */ footer { background-color: #1e1e1e; padding: 25px 0; text-align: center; color: #808080; margin-top: 40px; border-top: 1px solid #333; font-size: 0.9em; } /* Contact Section (styling for items within .contact-section if needed) */ .contact-section { text-align: center; /* This was in .contact before */ } .contact-section p { margin-bottom: 10px; }