body
{
	/* Compiler-modificable properties */
	--BodyBackColor:rgb(24, 26, 27);
	--BodyTextColor:white;
	color:var(--BodyTextColor);
    background-color:var(--BodyBackColor);
	font-family: 'PT Sans', sans-serif;

	--CategoriesBackColor:rgb(20, 20, 20);
	--CategoriesWidth:300px;
	--CategoriesHeight:700px;
	--CategoryTextColor:var(--BodyTextColor);
	--CategoryTextHover:rgb(80, 80, 100);
	--CategoryListSymbol:"-";
	
	--CategoryScrollHandleColor:#888;
	--CategoryScrollHandleColorHover:#555;
	
	--GlobalPadding:25px 150px 250px 25px;
	--ElementSpacingTop:20px;
	--ElementSpacingLeft:10px;
	
	--TitleColor:var(--BodyTextColor);
	--TitleBack:var(--BodyBackColor);
	--TitleSize:32px;
	--TextColor:rgb(200, 200, 200);
	--TextBack:var(--BodyBackColor);
	--TextSize:16px;
	--CodeColor:rgb(200, 195, 188);
	--CodeBack:rgb(14, 16, 17);
	--CodeSize:14px;
	/*-----------------------------------*/
}

/* Custom list */
ul
{
   list-style: none;
   margin-left: 0;
   padding-left: 2em;
   text-indent: 0.5em;
   list-style-type: var(--CategoryListSymbol);
}
li { padding-top:5px; }

/* Custom hyperlinks */
a 
{
	color: var(--CategoryTextColor);
	transition: 0.2s;
	text-decoration-thickness: 1px;
}
a:hover
{
	color:var(--CategoryTextHover);
}

/* Custom scroll bar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--CategoriesBackColor); }
::-webkit-scrollbar-thumb { background: var(--CategoryScrollHandleColor); }
::-webkit-scrollbar-thumb:hover { background: var(--CategoryScrollHandleColorHover); }

/* The very top header */
.ProductTitle
{
	font-size:28px;
	padding:25px 15px 0 20px;
}

/* App root */
._app 
{
    display: flex;
	margin:auto;
    padding:var(--GlobalPadding);
}

/* Sidebar navigation */
._sidebar 
{
	background-color: var(--CategoriesBackColor);
	flex-grow: 0;
	flex-shrink: 0;
	display: block;
	width: var(--CategoriesWidth);
	height:var(--CategoriesHeight);
	overflow-y: scroll;
	overflow-x: hidden;
}

/* Selected page container */
._container 
{
    flex-grow: 1;
    min-width: 0;
	margin-left:15px;
}

/* Custom defined styles */

.Title
{
	margin-top:var(--ElementSpacingTop);
	margin-left:var(--ElementSpacingLeft);
	font-weight:bold;
	font-size:var(--TitleSize);
	color:var(--TitleColor);
	background-color:var(--TitleBack);
}

.Text
{
	margin-top:var(--ElementSpacingTop);
	margin-left:var(--ElementSpacingLeft);
	font-weight:normal;
	font-size:var(--TextSize);
	color:var(--TextColor);
	background-color:var(--TextBack);
}

.Code
{
	margin-top:var(--ElementSpacingTop);
	margin-left:var(--ElementSpacingLeft);
	border: 1px solid #e1e1e8;
	padding: 8px;
	font-weight:normal;
	font-size:var(--CodeSize);
	color:var(--CodeColor);
	background-color:var(--CodeBack);
}

.CodeType { color:rgb(93, 185, 245); }
.CodeComment { color:rgb(255, 130, 88); }
.CodeKeyword { color:rgb(190, 127, 250); }
.CodeString { color:rgb(114, 237, 114); }