:root {
	--border-radius: 10px;
	--main-pattern: linear-gradient(315deg, transparent 75%, #d45d55 0)-10px 0,
    				linear-gradient(45deg, transparent 75%, #d45d55 0)-10px 0,
    				linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,
    				linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;
    				background-size: 20px 20px;

	--header-background:
		linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
		linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
		linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
		linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
		linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
		linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
	--header-background-color: #131313;
	--header-background-size: 20px 20px;
}

html
{
	height: 100%;
}

body
{
	width: 820px;
	height: 100%;
	margin: 5px auto;
	background:
		linear-gradient(to right,#888 0%,#fff 30%,#fff 70%,#888 100%),
		url('./icon.gif'),
		url('./icon.png');
	background-repeat:
		no-repeat,
		no-repeat,
		repeat;
	background-blend-mode:
		multiply,
		normal,
		normal;
	background-color: #555;
}

a
{
    color: #d70;
    text-decoration: none;
}

a:hover
{
	color: #ff0;
}

div.header
{
	margin: 20px 0px 30px 0px;
	border-radius: var(--border-radius);

	background: var(--header-background);
	background-color: var(--header-background-color);
	background-size: var(--header-background-size);
}

div.header a
{
	padding: 2px 10px;
	border: 2px solid #5cf;
	border-radius: var(--border-radius);
	background-color: #000;
}

div.header h1
{
	display: inline;
	margin: 0px 50px;
	background: var(--main-pattern);
}

div.header h1 a
{
	padding: 4px 20px;
	border: 6px solid #ee0;
}

div.heading
{
	margin: 10px 0px;
	padding: 4px 0px;
	background-color: #113366;
	border-radius: var(--border-radius);
}

div.heading h2
{
	display: inline;
	margin: 0px 0px 0px 10px;
	color: #ddd;
}

div.content
{
	background-color:rgba(30, 30, 30, 0.9);
	border-radius: var(--border-radius);
}

div.text
{
    color: #ccc;
	padding: 0px 10px;
    height: auto;
}

input
{
	width: 50px;
	padding: 4px;
	margin: 0px 5px;
	border: 2px solid #000;
	color: #eee;
	background-color: #000;
}

input:focus
{
	background-color: #910;
}

input:hover
{
	border: 2px solid #731;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

button
{
	padding: 4px;
	border: 2px solid black;
	color: #f73;
	background-color: #000;
	cursor: pointer;
	width: 100px;
}

button:hover
{
	border: 2px solid #731;
}

canvas
{
	margin: 10px 0px;
	background: #000;
}

textarea
{
	margin: 10px 0px;
	left: 10px;
	background: #000;
	width: 800px;
	color: #ccc;
}