*{
	--background: #CCC;
	--foreground: rgba(255, 255, 255, 0.5);
	--color: #222;
/*	--accent1: maroon;*/
	--accent_text: var(--background);
	font-family: "Helvetica";
	
	/* --variant: 64;
	--red: 0;
	--green: 0;
	--blue: 128; */
	--accent1: rgb(var(--red), var(--green), var(--blue));
	--accent2: rgb(calc(var(--red) + var(--variant)), calc(var(--green) + var(--variant)), calc(var(--blue) + var(--variant)));
}
/* html{
	border-left: 4px solid var(--accent1);
} */
.background{
	color: var(--color);
	background: var(--background);
}
.background svg *{
	fill: var(--color);
	stroke: var(--color);
}
.foreground, .child_foreground > *, .grand_foreground > * > *{
	color: var(--color);
	background: var(--foreground);
}
.accent1{
	color: var(--accent2);
}
.accent2{
	color: var(--accent_text);
	background: var(--accent1);
}
svg.accent1 *, .accent1 svg *{
	fill: var(--accent2);
	stroke: var(--accent2);
}
svg.accent2 *, .accent2 svg *{
	fill: var(--accent_text);
	stroke: var(--accent_text);
}
.shadow1, .child_shadow1 > *, .grand_shadow1 > * > *{
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}
.shadow_inset1, .child_shadow_inset1 > *{
	box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5);
}
.shadow2, .child_shadow2 > *{
	box-shadow: 6px 6px 4px rgba(0, 0, 0, .05), -6px -6px 4px rgba(255, 255, 255, .5);
}
.shadow_inset2, .child_shadow2_inset2 > *{
	box-shadow: inset 6px 6px 4px rgba(0, 0, 0, .05), inset -6px -6px 4px rgba(255, 255, 255, .5);
}
@media (prefers-color-scheme: dark){
	*{
		--background: #222;
		--foreground: rgba(255, 255, 255, 0.05);
		--color: #DDD;
		--accent_text: var(--color);
	}
	.shadow2, .child_shadow2 > *{
		box-shadow: 6px 6px 4px rgba(0, 0, 0, .1), -6px -6px 4px rgba(255, 255, 255, .05);
	}
	.shadow_inset2, .child_shadow_inset2 > *{
		box-shadow: inset 6px 6px 4px rgba(0, 0, 0, .1), inset -6px -6px 4px rgba(255, 255, 255, .05);
	}
}
@media print{
	*{
		--background: #FFF !important;
	}
	html{
		font-size: 6px;
	}
	input, textarea{
		border: 1px solid gray;
	}
	::placeholder{
		color: transparent;
	}
}
.hover_accent2:hover,
.child_hover_accent2 > *:hover{
	color: var(--accent_text);
	background: var(--accent1);
}
svg.hover_accent2:hover *,
.hover_accent2:hover svg *,
svg.child_hover_accent2:hover > *,
.child_hover_accent2:hover svg > *{
	fill: var(--accent_text);
	stroke: var(--accent_text);
}
.hover_foreground:hover,
.child_hover_foreground > *:hover,
.grand_hover_foreground > * > *:hover{
	background: var(--foreground);
}
.accent2 .hover_foreground:hover,
.accent2 .child_hover_foreground > *:hover,
.accent2 .grand_hover_foreground > * > *:hover{
	background: var(--accent2);
}
*[onclick]{
	cursor: pointer;
}
.left{
	text-align: left;
}
.table_line{
	border-collapse: collapse;
}
.table_line, .table_line th, .table_line td{
	border: 1px solid gray;
}
.column{
	gap: 0;
	column-width: 128rem;
}
.column > *{
	break-inside: avoid;
}
.fit_grid1{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, auto));
}
.fit_grid2{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(32rem, auto));
}