:root
{
	--headerFontColor:   #29292b;
	--headerBackColor:   #a28a45;
	--postTitleColor:    #aaa696;
	--postDateColor:     #7c8186;
	--buttonBorderColor: #626056;
	--buttonHoverColor:  #957e41;
	--buttonActiveColor: #826f3b;
	--contentBackColor:  #1e1e1e;
	--postFontColor:     #a4a29d;
	--postBackColor:     #272a2d;
	--postHeadBorderColor: #3e4042;
	--postLinkColor:     #a28a45;
	--postLinkHovColor:  #dcc980;
	--tagBackColor:      #53534e;
	--tagFontColor:      #afab9d;
	--codeBorderColor:   #3d494d;
	--tagBackColor:      #424A4D;
	--tagFontColor:      #9B9996;
	--postBackTint:      #FFFFFF0A;
	/* Syntax Colors */
	--text:              #C3B8AEFF;
	--token:             #438978FF;
	--token2:            #43897880;
	--enclosure:         #9C9C9CFF;
	--operator:          #D77967FF;
	--comment:           #4AA784FF;
	--commentTag:        #8CB8C5FF;
	--user:              #AFBC7DFF;
	--preproc:           #DE66A7FF;
	--string:            #99C36AFF;
	--background:        #2C3538FF;
	--overlay:           #00000015;
	--margin:            #23292BFF;
	--annotation:        #637b82FF;
	--int:               #64BDA0FF;
	--float:             #67BABFFF;
	--bool:              #67B667FF;
	--enum:              #739DBEFF;
	--keyword:           #A196D7FF;
	--type:              #C1B75DFF;
	--union:             #7BA4C5FF;
	--function:          #C49D65FF;
	--macro:             #6192DAFF;
	--cursor:            #438978FF;
	--cursorMacro:       #C95064FF;
	--cursorline:        #23292BFF;
	--todo:              #C95064FF;
	--note:              #AEAB6DFF;
	--scroll:            #AAF9FF1D;
	--temp:              #FF00FFFF;
	
	--indent0: 0;
	--indent1: .75rem;
	--indent2: 1.5rem;
	--indent3: 2.25rem;
	--indent4: 3rem;
	--indent5: 3.75rem;
	--indent6: 4.5rem;
	
	--headerWeight: 500;
	
	--tabSize: 2;
	
	--borderRadius: .25rem;

	--lineHeight: 1.6;
}
html
{
	scroll-behavior: smooth;
}
body
{
	background-color: var(--contentBackColor);
	font-family: Liberation Sans;
	margin: 0;
	min-height: 100vh;
	color: var(--postFontColor);
}
header
{
	background-color: var(--headerBackColor);
	color:            var(--headerFontColor);
	font-weight: bold;
	font-size: 1.5rem;
	text-align: center;
}
footer
{
	color: var(--postDateColor);
	font-size: .9rem;
	margin: .5rem 0 .5rem 1rem;
}
p
{
	margin: 1rem 0 1rem 0;
	line-height: var(--lineHeight);
}
h1, h2, h3, h4, h5, h6
{
	margin: 0;
}
h1{font-size: 1.3rem;}
h2{font-size: 1.2rem;}
h3{font-size: 1.1rem;}
h4{font-size: 1rem;}
h5{font-size: 1rem;}
h6{font-size: 1rem;}
.Section1{margin: 0 var(--indent1);}
.Section2{margin: 0 var(--indent2);}
.Section3{padding: 0 var(--indent3);}
.Section4{padding: 0 var(--indent4);}
.Section5{padding: 0 var(--indent5);}
.Section6{padding: 0 var(--indent6);}
a
{
	text-decoration: none;
	color: var(--postLinkColor);
}
a:hover
{
	color: var(--postLinkHovColor);
}
ul, ol
{
	padding: 0 0 0 2rem;
}
ul
{
	list-style-type: square;
}
.Buttons
{
	display: flex;
	flex-direction: row;
	margin: .5rem;
}
.Button
{
	color: var(--headerFontColor);
	background-color: var(--headerBackColor);
	border-radius: var(--borderRadius);
	font-weight: bold;
	padding: .1rem .25rem;
	margin: 0 .5rem 0 0;
}
.Button:hover
{
	color: var(--headerFontColor);
	background-color: var(--buttonHoverColor);
}
.Button:active
{
	color: var(--headerFontColor);
	background-color: var(--buttonActiveColor);
}
.Margin
{
}
.Page
{
	max-width: 60rem;
	margin: .5rem;
	background-color: var(--postBackColor);
	border-radius: var(--borderRadius);
	overflow: clip;
	line-height: var(--lineHeight);
}
.Section
{
	margin: 1rem .5rem;
}
.Cell
{
	padding: 0 .5rem;
}
.Skills
{
	font-size: 0.9rem;
	display: flex;
	flex-flow: row wrap;
}
.Summary
{
}
.SumCol
{
	margin: 1rem 0;
}
.About
{
}
.Entry
{
}
.Tint
{
	background-color: var(--postBackTint);
}
.Thumb
{
	width: 10rem;
	height: fit-content;
}
.EntryInfo
{
	padding: .5rem 1rem;
	display: flex;
	flex-direction: column;
}
.EntryBody
{
	padding: .5rem;
}
.SubInfo
{
	color: var(--postDateColor);
	font-style: italic;
}
.Keywords
{
	display: flex;
	flex-flow: wrap;
	height: fit-content;
	font-size: 0.9rem;
}
.Keyword
{
	background-color: var(--tagBackColor);
	color: var(--tagFontColor);
	border-radius: var(--borderRadius);
	margin: .1rem;
	padding: 0.1rem 0.4rem 0.1rem 0.4rem;
	width: fit-content;
}
.Content ul
{
	padding: 0 0 0 1.5rem;
}
.MiniEntry
{
	display: flex;
	flex-direction: row;
	margin: .5rem;
}
.MiniEntry img
{
	width: 3.5rem;
	height: fit-content;
}
.MiniWork
{
	margin: .5rem .5rem .5rem 0;
	padding: 0 0 0 .5rem
}
.MiniInfo
{
	padding: 0 .3rem;
}
#sumA
{
	grid-area: a;
}
#sumB
{
	grid-area: b;
}
#sumC
{
	grid-area: c;
	margin: .5rem 0 0 0;
}
.LetterHead
{
	margin: 2rem 4rem;
	display: grid;
	grid-template: none/1fr 1fr;
	width: 50%;
}
.LetterBody
{
	margin: 1rem 6rem;
}
/* Desktop mode*/
@media screen and (min-width: 60em)
{
	body
	{
		display: grid;
		grid-template: none / 1fr auto 1fr;		
		padding: 1rem 0;
	}
	.Section
	{
		margin: 1rem 2rem;
	}
	.About
	{
		display: grid;
		grid-template: none / 1fr 4fr 2fr;
	}
}
/* Destop or print*/
@media screen and (min-width: 60em), print
{
	.Page
	{
		margin: 0;
	}
	.Buttons
	{
		margin: .5rem 0;
	}
	.Summary
	{
		display: grid;
		grid-template: "a b""c c";
		margin: 0 2rem;
	}
	.SumCol
	{
		margin: 0;
	}
	.Skills
	{
		display: grid;
		grid-template: repeat(6,1fr) / 1fr 1fr 1fr;
		grid-auto-flow: column;
	}
	.Entry
	{
		display: grid;
		grid-template-columns: 16rem auto;
	}
	.Content ul
	{
		padding: unset;
	}
}
html
{
	visibility: visible;
	background-color: var(--contentBackColor);
}
/* Print mode*/
@media print
{
	:root
	{
		font-size: 10pt;
	}
	html, body
	{
		background-color: var(--postBackColor);
	}
	.Buttons
	{
		display: none;
	}
	.Entry
	{
		display: grid;
		grid-template-columns: 14rem auto;
		break-inside: avoid;
	}
	.Page
	{
		background-color: unset;
		max-width: unset;
		margin: 0;
		border-radius: unset;
		overflow: unset;
	}
	.Section
	{
		margin: 1rem;
	}
	.About
	{
		display: grid;
		grid-template: none / 1fr 4fr 2fr;
	}
	.PageBr
	{
		break-before: page;
	}
}
@page
{
	margin: 0;
	size: a4 portrait;
}