:root
{
	--console-border: Gainsboro;
	--console-border-weight: 15px;
	--border-style-1: solid;
	--border-style-2: solid;
	--console-width: 900px;
	--console-height: 75vh;
	--console-input-height: 60px;
	--console-padding: 10px;
	--console-color-green: lawngreen;
	--console-color-blue: aqua;
	--console-color-white: whitesmoke;
	--console-color-orange: orange;
	--console-color-yellow: gold;
	--console-color-red: red;
	--console-color-black: black;
	--console-color-pink: hotpink;
	--console-color-cmd: hotpink;
	--console-color-code: brown;
	--console-color-sub-title: orange;
	--console-color-documentation: gold;
}
span.warning
{
	background-color: var(--console-color-black);
	color: var(--console-color-red);
	display: inline-block;
	padding: 3px;	
}
ul > li::marker {content: '- ';}
ul {margin-left: 20px; padding: 10px;}
ol {margin-left: 45px; padding: 10px;}
ul.color-display {background-color: black; padding: 10px;}
ul.color-display > li > span.text-black{background-color: white;}
ul.color-display > li > span {display: inline-block; padding: 3px;}
ul.games-list > li {flex-basis: 25%;}
ul.games-list{display: flex; flex-wrap: wrap;}
span.sub-title {color: var(--console-color-sub-title); font-weight: bold;}
span.title {display: block;	margin-top: 10px;}
.docs {color: var(--console-color-documentation) !important; text-transform: uppercase;}
span.cmd + ul > li {margin-left: 20px;}
span.cmd
{
	font-weight: bold;
	color: var(--console-color-cmd);
	text-transform: uppercase;
}
p {max-width: 85%; margin: 10px 0;}
p.help {width: 75%;}
p {margin-bottom: 40px;}
p.compact {margin: 0;}
body {background-color:white;}
button
{
	padding: 20px;
	/* font-size: 20px; */
	display: block;
	margin: 20px auto;
	cursor: pointer;
	color: var(--console-color-black);
	font-size: 2rem;
	border-radius: 10px;
}

.hide {display: none;}
.text-white {color: var(--console-color-white) !important;}
.text-green {color:  var(--console-color-green) !important;}
.text-yellow {color: var(--console-color-yellow) !important;}
.text-orange {color: var(--console-color-orange) !important;}
.text-blue {color: var(--console-color-blue) !important;}
.text-red {color: var(--console-color-red) !important;}
.text-black {color: var(--console-color-black) !important;}
.text-pink {color: var(--console-color-pink) !important;}

.bg-white {background-color: var(--console-color-white) !important;}
.bg-green {background-color:  var(--console-color-green) !important;}
.bg-yellow {background-color: var(--console-color-yellow) !important;}
.bg-orange {background-color: var(--console-color-orange) !important;}
.bg-blue {background-color: var(--console-color-blue) !important;}
.bg-red {background-color: var(--console-color-red) !important;}
.bg-black {background-color: var(--console-color-black) !important;}
.bg-pink {background-color: var(--console-color-pink) !important;}

.cmd-white {color: var(--console-color-white) !important;}
.cmd-green {color:  var(--console-color-green) !important;}
.cmd-yellow {color: var(--console-color-yellow) !important;}
.cmd-orange {color: var(--console-color-orange) !important;}
.cmd-blue {color: var(--console-color-blue) !important;}
.cmd-red {color: var(--console-color-red) !important;}
.cmd-black {color: var(--console-color-black) !important;}
.cmd-pink {color: var(--console-color-pink) !important;}