:root
{
	--solarizedBase03: #002b36;
	--solarizedBase02: #073642;
	--solarizedBase01: #586e75;
	--solarizedBase00: #657b83;
	--solarizedBase0: #839496;
	--solarizedBase1: #93a1a1;
	--solarizedBase2: #eee8d5;
	--solarizedBase3: #fdf6e3;
	--solarizedYellow: #b58900;
	--solarizedOrange: #cb4b16;
	--solarizedRed: #dc322f;
	--solarizedMagenta: #d33682;
	--solarizedViolet: #6c71c4;
	--solarizedBlue: #268bd2;
	--solarizedCyan: #2aa198;
	--solarizedGreen: #859900;
}





html, body { width: 100%; height: 100%; }

body { position: relative; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

.renderCanvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.splineCanvas { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.controlPoint { position: absolute; width: 7px; height: 7px; margin-left: -5px; margin-top: -5px; border: solid 1px red; top : 100px; left: 100px; cursor: pointer; z-index: 1; }

.splineInfo { position: absolute; top: 16px; right: 16px; width: 400px; color: var(--solarizedBase3); box-sizing: border-box; background-color: rgba(256, 256, 256, 0.1); padding: 16px; }
.splineInfo h2 { font-size: 110%; font-weight: bold; text-decoration: underline; }

.propertyList { display: flex; flex-wrap: wrap; line-height: 1.4em; }
.propertyList dt { width: 40%; color: var(--solarizedBase1); }
.propertyList dd { margin-left: auto; width: 60%; text-align: right; }