*
{
	box-sizing:			border-box;
}

body, html
{
	margin: 0;
	background:	#222;
}

body
{
	padding:	1em;
}

@keyframes rotate-bg-color {
  0% {
    background-color: #000;
  }
  50% {
    background-color: #fff;
  }
  100% {
    background-color: #000;
  }
}

#canvas,
#canvas_target_weighted,
#canvas_weighted,
#canvas2,
#canvas3,
#canvas4,
#canvas_apply,
#canvas_gradient_square,
#canvas_gradient_square_offset,
#canvas_target
{
	display:			inline-block;
	background:
					linear-gradient(17deg, rgb(255 0 0 / 100%), transparent 70.71%),
    				linear-gradient(127deg, rgb(0 255 0 / 100%), transparent 70.71%),
    				linear-gradient(236deg, rgb(0 0 255 / 100%), transparent 70.71%);

	background:			#f0f;

	animation: rotate-bg-color 7s infinite;

	padding:			0px;
	box-shadow:			1px 1px 2px hsla(0,0%,0%,0.45);
	margin:				0;
	image-rendering: pixelated;
}

#canvas2,
#canvas3,
#canvas4
{
	width:				100%;
	height:				16px;
}
#canvas_gradient_square
{
	display:			block;
	width:				256px;
	height:				256px;
}
#canvas_gradient_square_offset
{
	display:			block;
	width:				16px;
	height:				256px;
}

#canvas,
#canvas_weighted,
#canvas_apply,
#canvas_target_weighted,
#canvas_target
{
	max-height:			50vmin;
	max-width:			100%;
}


#about {
	display:none;
	left:0;
	margin:0 7%;
	padding:0 1ex;
	position:fixed;
	text-align:left;
	top:10%;

	font-family:		'Tahoma';
	border-spacing:		0;
	border:				1px solid #ddd;
	background:			#fff;
	border-radius:		0.1em;
	font-size:			1.2em;
	box-shadow:
				3px 3px 6px 4px hsla(0,0%,0%,0.25),
				3px 3px 20px 15px hsla(0,0%,0%,0.5),
				3px 3px 200px 150px hsla(0,0%,0%,0.75);
	}

	#about:target {
		opacity: 0.95;
		display:block;
		z-index: 1;

	}


table
{
	font-family:		'Tahoma';
	border-spacing:		0;
	border:				1px solid #ddd;
	background:			#fff;

	margin:				0.2em;
	border-radius:		0.1em;
	font-size:			0.6em;
	box-shadow:			1px 1px 2px #000;
	box-shadow:			1px 1px 2px hsla(0,0%,0%,0.45);
}

td
{
	vertical-align:		top;
	overflow:			auto;
	background:			#f0f0f0;
	border-top:			1px solid #f8f8f8;
	border-left:		1px solid #f4f4f4;
	border-right:		1px solid #ececec;
	border-bottom:		1px solid #e8e8e8;
	padding:			1px 5px;
}

th
{
	font-weight:		400;
	text-align:			center;
	padding:			1px 4px;
	background:			#e0e0e0;
	border-top:			1px solid #e8e8e8;
	border-left:		1px solid #e4e4e4;
	border-right:		1px solid #dcdcdc;
	border-bottom:		1px solid #d8d8d8;
}
.cent
{
	margin:				auto;
}

.fleft
{
	float:				left;
}
.fright
{
	float:				right;
}
.clr
{
	clear:				both;
}

.center {
	display: grid;
	place-items: center;
}


#textarea
{
	margin-left:		320px;
	font-family:		"Courier New";
	font-size:			10pt;
	line-height: 		0.72em;
}

#textarea2
{
	margin-left:		320px;
	font-family:		"Courier New";
	font-size:			10pt;
	line-height: 		0.72em;
}

input[type="file"]
{
	max-width:			15em;
	width: 100%;
}