/* Import Google Fonts: Poppins (body) and Montserrat (headings) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Poppins:wght@300;400;500;700&display=swap'); /* Theme variables: default = light; toggled by setting data-theme="dark" on */ :root { --bg: #ffffff; --text: #002549; --muted: #6b7280; --accent: #29C6FF; --header-bg: rgba(255,255,255,0.5); --footer-bg: rgba(255,255,255,0.03); } [data-theme="dark"] { --bg: #002549; --text: #ffffff; --muted: #cbd6e1; --accent: #29C6FF; --header-bg: transparent; --footer-bg: transparent; background-color: #002549; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Use Poppins as the primary UI font, fall back to system fonts */ body { font-family: 'Poppins', Arial, system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", sans-serif; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg); color: var(--text); transition: background-color 220ms ease, color 220ms ease; } header { color: var(--text); padding: 1rem 1rem; display: flex; align-items: center; font-size: 0px; font-weight: bold; font-family: 'Poppins'; border-bottom: .1px solid #29c6ff; height: 60px; } .logo { /* width: 50px; */ height: 99%px; /* background-color: #fff; */ margin-right: 1rem; } /* Make logo image show a pointer to indicate it's clickable (used by the toggle script) */ .logo img { cursor: pointer; } main { flex: 1; padding: 2rem; } /* Tagline: stacked layout (image above text), responsive and capped image size */ .tagline { display: flex; flex-direction: column; /* always stack image above text */ align-items: center; gap: 1rem; max-width: 900px; margin: 0 auto; padding: 1rem; text-align: center; color: var(--text); margin-top: 1rem; } .tagline img { /* Increase image size a little more while keeping smooth scaling and a reasonable cap */ /* New values: min ~264px -> 290px, preferred ~36vw -> 38vw, max 432px -> 480px */ width: clamp(290px, 38vw, 480px); max-width: 480px; /* absolute cap (increased slightly) */ max-height: 45vh; height: auto; display: block; object-fit: contain; transition: width 220ms ease, transform 180ms ease; } .tagline p { margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.8rem); /* slightly larger: responsive but bounded */ line-height: 1.3; color: var(--text); } @media (max-width: 600px) { .tagline { padding: 0.75rem; } } footer { color: var(--text); padding: 1rem 2rem; text-align: center; position: relative; /* allow absolutely-positioned controls inside footer */ } footer a { text-decoration: none; margin: 0 1rem; font-size: 12px; font-family: 'Montserrat', 'Poppins', Arial, sans-serif; color: var(--text); } footer a:hover { color: #29C6FF; /* text-decoration: underline; */ } /* Theme toggle button inside the footer (lower-left) */ .theme-toggle { position: absolute; left: 12px; bottom: 12px; background: transparent; border: 1px solid rgba(255,255,255,0.08); color: var(--text); padding: 6px 8px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .theme-toggle:focus { outline: 2px solid var(--accent); outline-offset: 2px; }