@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;700&display=swap');
:root { color-scheme: dark; font-family: Barlow, system-ui, sans-serif; background: #111b29; color: #f6f8fc; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; }
main { width: min(680px, calc(100% - 36px)); padding-block: 24px; text-align: center; }
h1 { margin: 0 0 24px; font-size: clamp(30px, 5vw, 48px); }
nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
a { display: grid; place-items: center; min-height: 124px; padding: 10px; color: inherit; background: #1b2a3a; border: 1px solid #405165; border-radius: 20px; text-decoration: none; font-size: clamp(20px, 3vw, 30px); font-weight: 700; }
a:hover, a:focus-visible { background: #25394a; outline: 3px solid #a3ff5f; outline-offset: -3px; }