@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root { --ink:#28345c; --purple:#7454d8; --yellow:#ffd75e; --pink:#ff8faf; --mint:#89dfc6; --sky:#9ddcf3; --paper:#fffdf7; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:#f6f1ff; font-family:Nunito,sans-serif; }
.cloud { position:fixed; width:130px; height:40px; background:#fff; opacity:.72; border-radius:40px; z-index:-1; } .cloud:before,.cloud:after { content:""; position:absolute; border-radius:50%; background:#fff; } .cloud:before { width:57px; height:57px; left:22px; top:-27px; } .cloud:after { width:42px; height:42px; right:18px; top:-18px; } .one { top:135px; left:5%; } .two { top:295px; right:6%; transform:scale(.7); }
header { max-width:1120px; padding:20px 28px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; } .logo { color:var(--purple); font:800 28px/1 'Baloo 2',cursive; text-decoration:none; } .logo i { font-style:normal; color:#f4a63a; }
nav { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; } nav a { color:var(--ink); text-decoration:none; font-weight:800; font-size:14px; padding:8px 13px; border-radius:99px; } nav a:hover,nav a.active { background:white; color:var(--purple); }
.wrap { max-width:1050px; margin:auto; padding:22px 28px 60px; } .hero { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:30px; min-height:440px; }
.tag { display:inline-block; color:#76541d; background:var(--yellow); padding:7px 14px; border-radius:99px; font-size:13px; font-weight:800; } h1,h2,h3 { font-family:'Baloo 2',cursive; margin:0; } h1 { font-size:clamp(48px,7vw,76px); line-height:.93; letter-spacing:-2px; } h1 span { color:var(--purple); } .intro { max-width:520px; font-size:19px; line-height:1.45; margin:18px 0 25px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; color:var(--ink); background:var(--yellow); border:0; box-shadow:0 5px 0 #dfaf2e; border-radius:18px; padding:13px 21px; font:800 18px Nunito,sans-serif; text-decoration:none; cursor:pointer; transition:transform .12s,box-shadow .12s; } .button:hover { transform:translateY(2px); box-shadow:0 3px 0 #dfaf2e; } .button.purple { color:white; background:var(--purple); box-shadow:0 5px 0 #523aaf; } .button.purple:hover { box-shadow:0 3px 0 #523aaf; }
.character { width:min(340px,100%); aspect-ratio:1; margin:auto; position:relative; background:var(--mint); border-radius:47% 53% 46% 54% / 44% 41% 59% 56%; border:7px solid white; box-shadow:0 11px 0 #62bba2; } .character:before { content:''; position:absolute; width:150px; height:125px; border:8px solid #28345c; border-top:0; border-radius:0 0 80px 80px; left:88px; top:112px; } .character:after { content:'•  •'; white-space:pre; letter-spacing:24px; position:absolute; font-size:40px; left:109px; top:66px; color:#28345c; }
.leaf { position:absolute; width:64px; height:35px; border-radius:64px 0; background:#74bf67; transform:rotate(28deg); } .leaf.a { left:-27px; bottom:68px; } .leaf.b { right:-21px; top:56px; transform:rotate(145deg); }
.section-title { text-align:center; margin:10px 0 25px; font-size:42px; line-height:1; } .section-title span { color:var(--purple); }
.path { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .path-card { min-height:210px; padding:24px; background:var(--card,#fff); border:4px solid white; border-radius:28px; box-shadow:0 7px 0 #d9d2ed; text-decoration:none; color:var(--ink); } .path-card:hover { transform:rotate(-1deg) translateY(-4px); } .path-card .emoji { font-size:56px; } .path-card h2 { font-size:30px; line-height:1; margin:8px 0 5px; } .path-card p { margin:0; font-size:14px; line-height:1.35; }
.page-head { text-align:center; padding:25px 0 19px; } .page-head h1 { font-size:52px; } .page-head p { margin:4px auto 0; font-size:17px; max-width:560px; }
.word-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .word-card { min-height:205px; text-align:center; padding:15px; border:4px solid white; border-radius:27px; background:var(--card,#fff); box-shadow:0 7px 0 #d9d2ed; } .picture { font-size:71px; line-height:1.12; } .word { font:800 36px/1 'Baloo 2',cursive; letter-spacing:1px; } .sound { margin-top:8px; border:0; color:white; background:var(--purple); border-radius:99px; padding:9px 14px; font:800 14px Nunito,sans-serif; cursor:pointer; } .sound:focus-visible,.button:focus-visible { outline:4px solid var(--pink); outline-offset:3px; }
.game { max-width:680px; margin:auto; background:white; border:5px solid #e5dafa; border-radius:32px; padding:28px; text-align:center; box-shadow:0 8px 0 #d9d2ed; } .game .picture { font-size:105px; } .game h2 { font-size:35px; line-height:1.05; } .choices { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0; } .choice { padding:14px 5px; color:var(--ink); background:#f0eaff; border:0; border-radius:16px; font:800 23px 'Baloo 2',cursive; cursor:pointer; } .choice:hover { background:var(--yellow); } .result { height:28px; font-weight:800; font-size:18px; } .stars { color:#efa72f; letter-spacing:4px; }
.grownup { max-width:700px; padding:31px; margin:auto; background:#fffdf7; border-radius:30px; box-shadow:0 7px 0 #d9d2ed; } .grownup h2 { font-size:35px; line-height:1; } .grownup p,.grownup li { font-size:16px; line-height:1.5; } footer { text-align:center; padding:22px; color:#69708d; font-weight:700; font-size:13px; }
@media(max-width:700px) { header { padding:15px 16px; flex-direction:column; } .wrap { padding:15px 16px 45px; } .hero { grid-template-columns:1fr; text-align:center; min-height:0; } .intro { margin-inline:auto; } .character { max-width:250px; order:-1; } .character:before { transform:scale(.72); transform-origin:top left; left:71px; top:87px; } .character:after { transform:scale(.72); transform-origin:top left; left:84px; top:51px; } .path,.word-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .word-card { min-height:181px; } .page-head h1 { font-size:43px; } .choices { grid-template-columns:1fr; } }