index.html

:root { --primary-color: #2c3e50; --secondary-color: #3498db; --accent-color: #e74c3c; --light-color: #ecf0f1; --dark-color: #2c3e50; --success-color: #27ae60; }

• { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f5f5; color: #333; line-height: 1.6; transition: all 0.3s ease; } /* Dark Mode */ body.dark-mode { background-color: #1a1a1a; color: #f0f0f0; } header { background-color: var(--primary-color); color: white; padding: 1rem 0; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .main-content { display: flex; flex-wrap: wrap; margin: 30px 0; } .content-section { flex: 0 0 70%; padding-right: 30px; } .sidebar { flex: 0 0 30%; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .dark-mode .sidebar { background-color: #2c2c2c; } h1, h2, h3 { color: var(--primary-color); margin-bottom: 15px; } .dark-mode h1, .dark-mode h2, .dark-mode h3 { color: var(--light-color); } h1 { font-size: 2.2rem; border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; display: inline-block; } h2 { font-size: 1.8rem; margin-top: 30px; color: var(--accent-color); } h3 { font-size: 1.4rem; margin-top: 20px; color: var(--secondary-color); } .section { background-color: white; padding: 25px; margin-bottom: 30px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }