/* Mise en page sobre et sombre : le canevas est la pièce principale. */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #161616;
	color: #ddd;
	font-family: system-ui, sans-serif;
	line-height: 1.5;
}

header, main, footer {
	max-width: 840px;
	margin: 0 auto;
	padding: 0 20px;
}

header {
	padding-top: 24px;
}

h1 {
	margin: 0 0 8px;
}

h2 {
	font-size: 1.05rem;
	margin-bottom: 4px;
}

a {
	color: #6bd6d6;
}

/* Le canevas p5 est inséré dans ce conteneur ; sur petit écran il est
   réduit par le CSS, et p5 recalcule mouseX/mouseY en conséquence. */
#croquis {
	margin: 16px 0;
}

#croquis canvas {
	max-width: 100%;
	height: auto !important;
	display: block;
	border: 1px solid #333;
}

.colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0 32px;
}

kbd {
	background: #2a2a2a;
	border: 1px solid #444;
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 0 6px;
	font-family: inherit;
}

footer {
	padding: 24px 20px;
	color: #888;
}

footer a {
	color: #888;
}