/* Basic reset for margin and padding */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Add space below h1 headings */ h1 { margin-bottom: 20px; } body { font-family: Arial, sans-serif; display: flex; min-height: 100vh; } /* Sidebar Styling (no changes needed for sidebar links) */ #sidebar { background-color: var(--sidebar-background); padding: 20px; position: relative; height: 100vh; min-width: 150px; max-width: 300px; width: auto; overflow-x: hidden; } #sidebar h2 { font-size: 24px; margin-bottom: 10px; margin-top: 25px; color: var(--text-color); /* Heading text color */ } #sidebar ul { list-style: none; padding-left: 0; overflow-y: auto; max-height: calc(100vh - 50px); } #sidebar ul li { margin: 10px 0; } #sidebar ul li a { display: block; padding: 10px; text-decoration: none; color: var(--link-color); /* Link color for light mode */ transition: background-color 0.1s ease, color 0.3s ease; } /* Hover effect for sidebar links */ #sidebar ul li a:hover { background-color: var(--link-color); color: var(--sidebar-background); } /* Main Content Styling */ #content { flex: 1; padding: 20px 20px 20px 40px; } /* Specific styling for links inside the main content */ #content a { color: blue; /* Default unvisited link color in light mode */ } #content a:visited { color: purple; /* Default visited link color in light mode */ } /* Dark Mode Styling for URLs in Main Content */ body.dark #content a { color: #ffa500; /* Bright orange for unvisited URLs in dark mode */ } body.dark #content a:visited { color: #008080; /* Darker turquoise for visited URLs in dark mode */ } /* Toggle Button (Hamburger Menu) */ #toggleButton { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: rgba(244, 244, 244, 0.95); font-size: 24px; background: none; border: none; cursor: pointer; color: var(--link-color); z-index: 300; text-align: left; padding-left: 10px; } /* Mobile View (Curtain Style Sidebar) */ @media (max-width: 768px) { body { flex-direction: column; } #sidebar { display: none; position: fixed; top: 50px; left: 0; background-color: rgba(244, 244, 244, 0.95); height: calc(100vh - 50px); padding: 20px; transform: translateY(-100%); width: 100%; z-index: 200; transition: transform 0.3s ease; overflow-y: auto; } #sidebar.active { display: block; transform: translateY(0); } #sidebar h2 { margin-top: 60px; margin-left: 10px; } #toggleButton { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 50px; z-index: 300; background-color: rgba(244, 244, 244, 0.95); color: var(--link-color); padding-left: 10px; text-align: left; } #content { margin-top: 50px; } } /* ===== Dark Mode Styles ===== */ /* Define default (light mode) color variables */ :root { --background-color: #ffffff; --text-color: #333333; --sidebar-background: #f4f4f4; --link-color: #333333; } /* Dark Mode Variables (when 'dark' class is applied to ) */ body.dark { --background-color: #222222; --text-color: #f1f1f1; --sidebar-background: #333333; --link-color: #f1f1f1; } body { background-color: var(--background-color); color: var(--text-color); } /* Dark Mode Sidebar */ body.dark #sidebar { background-color: rgba(51, 51, 51, 0.95); color: var(--text-color); } body.dark #sidebar ul li a:hover { background-color: var(--link-color); color: var(--sidebar-background); } /* Dark Mode: Make the hamburger icon white */ body.dark #toggleButton { background-color: rgba(51, 51, 51, 0.95); color: white; } /* Dark Mode Toggle Button */ #darkModeToggle { margin-top: 20px; padding: 10px; background-color: var(--link-color); color: var(--sidebar-background); border: none; cursor: pointer; } #darkModeToggle:hover { background-color: var(--sidebar-background); color: var(--link-color); }