@font-face {
	font-family: 'Orbitron';
	src: url('/wp-content/themes/astra-child/assets/fonts/Orbitron-Variable.woff2') format('woff2');
	font-weight: 400 900;
}
@font-face {
	font-family: 'OpenDyslexic';
	src: url('/wp-content/themes/astra-child/assets/fonts/OpenDyslexic-Regular.woff2') format('woff2');
}
:root {
	--bg: #151515;
	--surface: #191c20;
	--surface-2: #21242a;
	--steel-hi: #737b87;
	--steel-lo: #4b515b;
	--red: #e0263c;
	--gold: #e7c62b;
	--text: #e9e7e4;
	--muted: #a3a09c;
	--soa: #9b8cd9;
	--pylon: #ff3b4e;
	--zone: #50c662;
	--trap: #3d6bff;
	--ball: #ffe14d;
	--hurl: #5ab4ff;
	--font: 'Orbitron', Arial, Helvetica, sans-serif;
}
html[data-site-font="arial"]    { --font: Arial, Helvetica, sans-serif; }
html[data-site-font="comic"]    { --font: 'Comic Sans MS', 'Comic Sans', cursive; }
html[data-site-font="times"]    { --font: 'Times New Roman', Times, serif; }
html[data-site-font="dyslexic"] { --font: 'OpenDyslexic', Arial, sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 14px/1.6 var(--font); padding: 4px 2px 16px; }

.layout { max-width: 700px; margin: 0 auto; }
.plan { width: 100%; }
.plan svg { display: block; width: 100%; height: auto; }
.plan svg text { font-family: var(--font); }