/* ===== Responsive Adaptation ===== */ * { -webkit-tap-highlight-color: transparent; } /* Tablet */ @media screen and (max-width: 1024px) { .container { width: 90%; padding: 30px 20px; } } /* Mobile */ @media screen and (max-width: 768px) { .container { width: 95%; padding: 20px 15px; margin: 20px auto; } h1 { font-size: 24px; } p { font-size: 14px; } a { font-size: 14px; } b { font-size: 14px; } } /* Small Mobile */ @media screen and (max-width: 480px) { .container { width: 98%; padding: 15px 10px; border-radius: 8px; } h1 { font-size: 20px; } p, a, b { font-size: 13px; } } /* Landscape Mobile */ @media screen and (max-height: 400px) and (orientation: landscape) { .container { padding: 15px 30px; } } /* Dark Mode */ @media (prefers-color-scheme: dark) { body { background: #1a1a1a; } .container { background: #2d2d2d; } .container, .container p { color: #ccc; } a, b { color: #ff9e00; } }