/*
  *****~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*****

    Created by Jonas Kjeldmand Jensen
    February 2026

    "Playful Determinism" - Stylesheet

    This stylesheet provides the foundational styling for the Playful
    Determinism generative animation. It establishes a minimal, responsive
    layout that centers the canvas and adapts to the user's color scheme
    preference (light or dark mode).

    Key features:
    - CSS custom properties for theming (hue-based color system)
    - light-dark() function for automatic theme switching
    - Smooth transitions between theme changes
    - Viewport-fill canvas with proper aspect ratio handling

  *****~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*****
*/

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--black: hsl(var(--hue), 10%, 5%);
	--white: hsl(var(--hue), 10%, 95%);
	--trans-dur: 0.3s;
	color-scheme: light dark;
}
body {
	background-color: light-dark(var(--white), var(--black));
	color: light-dark(var(--black), var(--white));
	font: 16px / 1.5 sans-serif;
	display: grid;
	place-items: center;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
canvas {
	display: block;
	object-fit: contain;
	max-width: 100vw;
	max-height: 100vh;
}