/* Squishy Dig's own few pages. One typeface, the game's colours, nothing fetched from anyone else. */
@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka-SemiBold.ttf") format("truetype"); font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: "Fredoka", ui-rounded, system-ui, sans-serif; color: #1c1438; background: #5b4fe6; padding: 6vmin 5vmin; }
a { color: inherit; }
main { background: #fff5db; border: 5px solid #1c1438; border-radius: 44px; max-width: 980px; margin: 0 auto; padding: 44px 48px; }
h1 { font-weight: 400; margin: 0 0 24px; }
h1 .a { color: #6c2c9a; } h1 .b { color: #f47c62; }
p { margin: 0 0 18px; }
.small { font-size: 16px; color: #5b4fe6; margin: 26px 0 0; }
.small a + a { margin-left: 14px; }

/* the front page: one still, the name, one sentence */
body.front { display: flex; align-items: center; justify-content: center; }
.front main { width: 100%; margin: 0; display: flex; gap: 48px; align-items: center; }
.front img { display: block; width: 250px; height: auto; border: 4px solid #1c1438; border-radius: 30px; flex: none; }
.front h1 { font-size: clamp(56px, 11vw, 104px); line-height: 0.92; }
.front p { font-size: clamp(19px, 2.6vw, 25px); line-height: 1.36; }
.front p.small { font-size: 16px; }

/* a page of words: narrower, and a lighter hand so a long page reads */
.words main { max-width: 760px; }
.words h1 { font-size: clamp(34px, 6vw, 48px); line-height: 1.05; }
.words h2 { font-size: 22px; font-weight: 400; color: #5b4fe6; margin: 30px 0 10px; }
.words p, .words li { font-size: 18px; line-height: 1.5; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-weight: 500; }
.words ul { margin: 0 0 18px; padding-left: 1.1em; }
.words li + li { margin-top: 5px; }
.words .lede { font-family: "Fredoka", ui-rounded, system-ui, sans-serif; font-size: 21px; line-height: 1.4; }
.words .home { font-size: 17px; color: #6c2c9a; display: inline-block; margin-bottom: 18px; }

@media (max-width: 720px) {
	main { padding: 30px 26px; }
	.front main { flex-direction: column; gap: 28px; text-align: center; }
	.front img { width: 210px; }
}