/* j-logo */
	#j-logo {
		position: absolute;
		top: 14px;
		right: 7px;
		color: #04b1ff;
		height: 32px;
		width: 32px;
		cursor: pointer;
		z-index: 1000;
		outline: none;
	}

	#j-logo svg {
		fill: currentColor;
		height: 100%;
		width: auto;
	}

	#j-logo:hover, #j-logo:focus {
		filter: drop-shadow(0px 0px 8px #222222);
	}
	
/*** page ***/
	html {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body {
		padding: 0px;
		border: 0px;
		margin: 0px;
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		overflow: hidden;
		background-color: #777777;
		box-shadow: 0px 0px 20px #333333 inset;
	}

/*** canvas ***/
	canvas {
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		overflow: hidden;
		pointer-events: none;
		user-select: none;
		z-index: 2;
	}

/*** message ***/
	#message {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		font-family: sans-serif;
		font-size: 30px;
		color: #555555;
		text-align: center;
		user-select: none;
		pointer-events: none;
		z-index: 1;
		width: 75vw;
	}

/*** controls ***/
	#controls {
		z-index: 3;
		position: fixed;
		top: 5px;
		left: 5px;
		height: 180px;
		width: 180px;
		overflow: hidden;
		border-radius: 10px;
		background-color: #888888;
		box-shadow: 0px 0px 2px #333333 inset;
		filter: drop-shadow(0px 0px 10px #333333);
		padding: 10px;
		cursor: -moz-grab;
		cursor: -webkit-grab;
		cursor: grab;
	}

	#controls[dragging] {
		cursor: -moz-grabbing;
		cursor: -webkit-grabbing;
		cursor: grabbing;
	}

	/* labels */
		#controls label {
			float: left;
			width: 60px;
			height: 60px;
			font-size: 12px;
			color: #555555;
			text-align: center;
			font-weight: bold;
			vertical-align: bottom;
			user-select: none;
			cursor: pointer;
		}

	/* buttons & select */
		#controls button, #controls select {
			height: 36px;
			width: 36px;
			margin: 0px 5px 0px 5px;
			border-radius: 100%;
			border: 0px;
			padding: 5px;
			background-color: transparent;
			cursor: pointer;
			outline: none;
			font-family: sans-serif;
			font-size: 15px;
			text-align: center;
		}

		#controls select {
			margin: 0px;
			height: 40px;
			width: 40px;
			margin: 0px 5px 0px 5px;
		}

		#controls button:hover, #controls select:hover {
			background-color: #777777;
		}

		#controls button[selected] {
			background-color: #aaaaaa;
			box-shadow: 0px 0px 20px #ffffff;
		}

		#controls button svg {
			user-select: none;
			pointer-events: none;
			height: 100%;
			width: auto;
			fill: currentColor;
		}

	/* tools */
		#controls button#mirror {
			color: #555555;
		}

		#controls button#prism {
			color: #ffff00;
		}

		#controls button#refractor {
			color: #00ffff;
		}

		#controls button#eraser {
			color: #ff00ff;
		}

		#controls button#block, #controls button#cursor {
			color: #111111;
		}

	/* colors */
		#controls[color="#ffffff"] button, #controls[color="#ffffff"] select {
			color: #ffffff;
		}

		#controls[color="#ff0000"] button, #controls[color="#ff0000"] select {
			color: #ff0000;
		}

		#controls[color="#00ff00"] button, #controls[color="#00ff00"] select {
			color: #00ff00;
		}

		#controls[color="#0000ff"] button, #controls[color="#0000ff"] select {
			color: #0000ff;
		}