:root { --ink:#1b3145; --sky:#73d7f5; --cream:#fff8e8; --berry:#ff6e88; --lime:#aee678; --sun:#ffcf4e; --line:3px solid var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:linear-gradient(180deg,#bff1ff 0 31rem,#fff8e8 31rem); color:var(--ink); font-family:Nunito,sans-serif; font-size:16px; line-height:1.55; } a { color:inherit; text-decoration:none; } .nav, main, footer { width:min(1080px,calc(100% - 2rem)); margin:auto; } .nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; } .brand { font:700 1.35rem Fredoka,sans-serif; } nav { display:flex; flex-wrap:wrap; gap:.8rem; font-weight:800; } nav a { text-decoration:underline; text-underline-offset:4px; } .hero { min-height:32rem; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:2rem; padding:2.5rem clamp(1.25rem,5vw,4rem); border:var(--line); border-radius:2rem 2rem 0 0; background:linear-gradient(135deg,#73d7f5,#e0f9ff); overflow:hidden; } .eyebrow { margin:0 0 .5rem; color:#4e2877; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } h1,h2 { font-family:Fredoka,sans-serif; line-height:1; margin:.2rem 0 1rem; } h1 { font-size:clamp(3.4rem,9vw,7rem); letter-spacing:-.06em; } h2 { font-size:clamp(2rem,4vw,3.4rem); } .intro { max-width:31rem; font-size:1.2rem; font-weight:700; } .primary { display:inline-block; margin-top:.8rem; padding:.8rem 1.2rem; border:var(--line); border-radius:999px; background:var(--berry); box-shadow:4px 4px 0 var(--ink); font-weight:800; } .primary:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); } .hero-art { margin:0; text-align:center; } .hero-art img { width:min(100%,310px); filter:drop-shadow(0 15px 0 rgba(27,49,69,.18)); } figcaption { font-weight:800; } .play,.note { display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding:clamp(2rem,6vw,5rem); border:var(--line); border-top:0; background:var(--cream); } .play p,.note p { max-width:36rem; } ol { display:grid; gap:1rem; list-style:none; padding:0; margin:0; align-content:center; } ol li { display:flex; align-items:center; gap:1rem; padding:.85rem; border:var(--line); border-radius:1rem; background:#fff; font-weight:800; } ol span { display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:50%; background:var(--sun); font-family:Fredoka,sans-serif; } .game-shot { margin:0; padding:clamp(1.25rem,5vw,4rem); background:#4e2877; } .game-shot img { display:block; width:min(100%,760px); margin:auto; border:var(--line); border-radius:1.25rem; box-shadow:10px 10px 0 #2c1943; } .features { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:clamp(2rem,5vw,4rem); border:var(--line); border-top:0; background:var(--lime); } .features article { padding:1.25rem; border:var(--line); border-radius:1rem; background:#fff; } .features b { font:700 1.45rem Fredoka,sans-serif; } .features p { margin:.35rem 0 0; } .note { border-top:0; background:#ffefba; } footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem 0; font-weight:800; } @media (max-width:700px) { body { background:linear-gradient(180deg,#bff1ff 0 38rem,#fff8e8 38rem); } .nav,.hero,.play,.note,footer { display:flex; flex-direction:column; align-items:flex-start; } .hero { min-height:0; padding:2rem 1.35rem; } .hero-art { align-self:center; } .features { grid-template-columns:1fr; } }