/* ============================================================ style.css — all the visual styling for the page. CSS works by selecting HTML elements and setting properties. ============================================================ */ /* Custom properties ("CSS variables") defined on :root, the element. Defining colors once here means we change them in one place, not everywhere. */ :root { --bg: #0e0e10; --surface: #18181b; --border: #2f2f35; --text: #efeff1; --text-muted: #adadb8; --accent: #9147ff; /* Twitch purple */ } /* The universal selector (*) applies to every element. border-box makes width include padding + border, which is far more intuitive. */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); /* A font "stack": the browser uses the first one available on the system. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; } /* Centers the content column and stops it stretching too wide on big screens. "margin: 0 auto" = no vertical margin, automatic (equal) horizontal margins. */ .page { max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; } h1 { font-size: 1.6rem; margin: 0 0 4px; } .subtitle { margin: 0 0 24px; color: var(--text-muted); font-size: 0.95rem; } /* ===== Stream player ===== The classic responsive-video trick: the wrapper has no height of its own, but padding-top of 56.25% (9 ÷ 16) forces a 16:9 box that scales with width. The iframe is then absolutely positioned to fill that box exactly. */ .video-wrapper { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden; /* clips the iframe corners to match the rounded box */ } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; /* iframes have an ugly default border */ } /* ===== Comments ===== */ .comments { margin-top: 32px; } h2 { font-size: 1.15rem; margin: 0 0 12px; } /* Strip the default bullets and indentation from the