:root { --primary-color: #1a1a1a; --secondary-color: #4a4a4a; --accent-color-gold: #D4AF37; --accent-color-indigo: #4B0082; --background-color: #ffffff; --spacing-unit: 1.5rem; } body { font-family: 'Arial', sans-serif; line-height: 1.6; margin: 0; padding: 0; color: var(--primary-color); background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(75,0,130,0.1)); } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } .header { text-align: center; padding: var(--spacing-unit); background: linear-gradient(to right, var(--accent-color-gold), var(--accent-color-indigo)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2rem; } .main-title { font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem; } .highlights { background: rgba(255,255,255,0.9); padding: 2rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 2rem; } .section { margin-bottom: 3rem; padding: 2rem; background: rgba(255,255,255,0.9); border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .section-title { color: var(--accent-color-indigo); font-size: 1.8rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--accent-color-gold); padding-bottom: 0.5rem; } .feature-list { list-style: none; padding: 0; } .feature-list li { margin-bottom: 1rem; padding-left: 2rem; position: relative; } .feature-list li::before { content: "✨"; position: absolute; left: 0; } .emoji { font-size: 1.2em; margin-right: 0.5rem; } .highlight-box { background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(75,0,130,0.1)); padding: 1.5rem; border-radius: 8px; margin: 1rem 0; } .copyright { text-align: center; padding: 2rem; color: var(--secondary-color); font-size: 0.9rem; } @media (max-width: 768px) { .container { padding: 1rem; } .main-title { font-size: 2rem; } .section { padding: 1rem; } .section-title { font-size: 1.5rem; } } @media (max-width: 480px) { .main-title { font-size: 1.8rem; } .section { margin-bottom: 2rem; } }