:root
{
	--headerFontColor:   #29292b;
	--headerBackColor:   #a28a45;
	
	--postTitleColor:    #aaa696;
	--postDateColor:     #7c8186;
	
	--buttonHoverColor:  #957e41;
	--buttonActiveColor: #826f3b;
	
	--contentBackColor:  #1e1e1e;
	
	--postFontColor:     #a4a29d;
	--postBackColor:     #272a2d;
	--postHeadBorderColor: #3e4042;
	--postLinkColor:     #a28a45;
	--postLinkHovColor:  #dcc980;
	
	--tagBackColor:      #424A4D;
	--tagFontColor:      #9B9996;
	
	--indexHoverColor:   #424A4D;
	--indexActiveColor:  #323739;

	--codeBorderColor:   #3d494d;
	
	/* 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;
	
	--headerWeight: 500;
	--tabSize:      2;
	--borderRadius: .25rem;
	--lineHeight:   1.6;
}
html
{
	scroll-behavior: smooth;
    scrollbar-color: var(--postBackColor) var(--contentBackColor);
}
body
{
	background-color: var(--contentBackColor);
	margin: 0;
	min-height: 100vh;
	font-family: "Inter", Noto Sans, sans-serif;
}
header
{
	background-color: var(--headerBackColor);
	color:            var(--headerFontColor);
	display:          flex;
	flex-direction:   row;
}
header img
{
	width:  inherit;
	height: inherit;
}
header input
{
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: 1;
}
footer
{
	color: var(--postDateColor);
	font-size: .9rem;
	margin: .5rem 0 .5rem 1rem;
}
p
{
	margin: 0rem 0 1rem 0;
	line-height: var(--lineHeight);
}
h1
{
	margin: 0 -.5rem 0 -.5rem;
	padding: .2rem .5rem;
}
h2, h3, h4, h5, h6
{
	margin: 0 -.5rem 0 -.5rem;
	padding: .2rem .5rem;
}
.Section1, .Section2, .Section3, .Section4, .Section5, .Section6
{
	margin-bottom: 2rem;
}
:target
{
	scroll-margin-top: 1rem;
	background-color: var(--indexActiveColor);
	border-radius: var(--borderRadius);
}
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;}
a
{
	text-decoration: none;
	color: inherit;
}
pre
{
	margin: 0;
	tab-size: var(--tabSize);
	font-family: Liberation Mono, monospace;
}
blockquote
{
	background-color: #FFFFFF14;
	padding: 1em;
	width: fit-content;
	margin: .5rem 0 .5rem 0;
}
ul, ol
{
	padding: 0 0 0 1rem;
	margin: 0 1rem;
}
ul
{
	list-style-type: square;
	line-height: var(--lineHeight);
}
li
{
	line-height: var(--lineHeight);
	margin: .5rem 0;
}
.PRel
{
	position: relative;
}
.PAbs
{
	position: absolute;
}
.Cc {color: var(--comment);}
.Co {color: var(--operator);}
.Ck {color: var(--keyword);}
.Cd {color: var(--enclosure);}
.Ci {color: var(--int);}
.Ce {color: var(--enum);}
.Cf {color: var(--float);}
.Cs {color: var(--string);}
.CF {color: var(--function);}
.CT {color: var(--type);}
.Cp {color: var(--preproc);}
.CM {color: var(--macro);}
.CodeSpan
{
	background-color: var(--background);
	color: var(--text);
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
	border-color: var(--codeBorderColor);
	font-family: Liberation Mono, monospace;
	padding: .1rem 0.2rem;
}
.CodeBlock
{
	background-color: var(--background);
	color: var(--text);
	border-style: solid;
	border-width: 1px;
	border-radius: var(--borderRadius);
	border-color: var(--codeBorderColor);
	padding: 1rem;
	font-size: .9rem;
	overflow: auto;
	margin: .5rem 0 .5rem 0;
    scrollbar-color: var(--codeBorderColor) var(--background);
}
.Spacer
{
	flex-grow: 1;
}
.Title
{
	display: flex;
	flex-direction: row;
	font-size: 1.4rem;
	font-weight: bold;
	margin: auto .5rem auto .5rem;
}
.PageTitle
{
	margin: 0 0 0 .5rem;
}
.HeadButton
{
	color: var(--headerFontColor);
	font-size: 1.2rem;
	padding: 0.6rem 1rem;
}
.Button{}
.Button:active
{
	background-color: var(--buttonActiveColor);
}
.Icon
{
	width: 2rem;
	height: 2rem;
	padding: 0.4rem 0.4rem;
}
.IconBar
{
	display: flex;
}
.PanelButton
{
	border-radius:  var(--borderRadius);
	color:          var(--postFontColor);
	padding: .1rem 1rem;
	margin: .1rem 0;
}
.PanelButton:hover
{
	background-color: var(--indexHoverColor);
}
.SecListActive
{
	background-color: var(--indexActiveColor);
}
.Content
{
	display: flex;
	flex-direction: row;
	background-color: var(--contentBackColor);
}
.ContentNavPanel
{
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 2rem;
	background-color: var(--postBackColor);
	color: var(--postFontColor);
	border-radius: var(--borderRadius);
	padding: 0.5rem;
	margin: .5rem .5rem 0 0;
	line-height: var(--lineHeight);
	max-width: 20rem;
}
.NavSection
{
	display: flex;
	flex-direction: column;
	margin: 0 0 0 1rem;
}
.NavButton
{
	background-color: var(--headerBackColor);
	color: var(--headerFontColor);
	border-radius: .2rem;
	font-weight: bold;
	padding: .5rem 1rem;
	text-align: center;
	align-content: center;
}
.FootNav
{
	margin: .5rem;
	display: grid;
	grid-gap: .5rem;
	grid-template: "a" "b" "c";
}
.Post
{
	background-color: var(--postBackColor);
	color: var(--postFontColor);
	border-radius: var(--borderRadius);
	margin: .5rem;
	padding: .5rem 1rem 1rem 1rem;
}
.PostHeader
{
	border-color: var(--postHeadBorderColor);
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.PostFooter
{
	border-color: var(--postHeadBorderColor);
	border-top-style: solid;
	border-top-width: 1px;
	padding-top: 0.5rem;
	font-size: 0.9rem;
}
.PostTitle
{
	color: var(--postFontColor);
	font-size: 1.4rem;
	font-weight: var(--headerWeight);
	line-height: var(--lineHeight);
	margin: 1rem 0;
}
.PostTags
{
	display: flex;
	flex-flow: wrap;
	margin: .5rem 0;
}
.PostTag
{
	background-color: var(--tagBackColor);
	color: var(--tagFontColor);
	border-radius: var(--borderRadius);
	min-width: fit-content;
	margin: .1rem .1rem .1rem .1rem;
	padding: .1rem .4rem;
	font-size: .9rem;
}
.PostDate
{
	color: var(--postDateColor);
	font-size: 0.8rem;
	margin: .5rem 0;
}
.PostContent
{
	margin: 1rem 0rem 2rem 0rem;
}
.PostContent img
{
	max-width: 100%;
	height: auto;
}
.PostContent video
{
	max-width: 100%;
	height: auto;
}
.Post a
{
	color: var(--postLinkColor);
}
.Post a:hover
{
	color: var(--postLinkHovColor);
}
.PostColumn
{
	display: inline-block;
	vertical-align: top;
	padding: 0 1rem 0 1rem;
}
.PanelContent
{
	margin: 1rem 0rem
}
.MobMenu
{
	color: var(--headerFontColor);
	background-color: var(--headerBackColor);
	position: absolute;
	border-top-style: solid;
	border-top-width: 1px;
	width: 100%;
	border-color: var(--buttonActiveColor);
	display: flex;
	flex-direction: column;
}
.MNone
{
	display: none;
}
.MInline
{
	display: inline;
}
.MenuButton
{
	color: var(--headerFontColor);
	font-size: 1.2rem;
	padding: 0.6rem 1rem;
}
.Sensor
{
	z-index: 2;
	cursor: grab;
	touch-action: pan-y pinch-zoom;
}
.GalMain
{
	display: inline-flex;
	flex-direction: column;
	user-select: none;
	width: 100%;
}
.GalWin
{
	display: flex;
	border-radius: .25rem;
	overflow: clip;
	position: relative;
	width: fit-content;
	margin: auto;
}
.GalCont
{
	display: flex;
	transition-property: left;
	transition-timing-function: ease-out;
	position: relative;
	transition-property: transform;
}
.GalCont img
{
	max-width: 100%;
	height: auto;
}
.GalHid
{
	display: none;
}
.GalRel
{
	position: relative;
	z-index: 1;
}
.GalAbs
{
	position: absolute;
}
.GalBar
{
	display: flex;
	margin: auto;
}
.GalInd
{
	height: .25rem;
	width: .25rem;
	border-radius: 1rem;
	border-style: solid;
	border-color: var(--postDateColor);
	border-width: 1px;
	margin: .5rem;
}
.GalIndAt
{
	background-color: var(--postDateColor); 
}
.TurnMain
{
	display: inline-flex;
	max-width: 100%;
	user-select: none;
	border-radius: .25rem;
	border-width: 1px;
	flex-direction: column;
	overflow: clip;
	position: relative;
	cursor: grab;
}
.TurnWin
{
	position: relative;
	display: flex;
}
.TurnFrame
{
	max-width: 100%;
	height: auto;
	position: absolute;
	opacity: 0;
}
.TurnVis
{
	position: relative;
	opacity: 1;
}
.TurnSym
{
	position: absolute;
	z-index: 1;
	background-image: url("UI_Turn.svg");
	background-size: cover;
	width: 4rem;
	height: 2rem;
	background-repeat: no-repeat;
	opacity: .5;
	transition-property: opacity;
	transition-duration: 500ms;
	left: 1rem;
	top: 1rem;
}
.PostLane
{
	width: 100%;
}
.IndexDesc
{
	color: var(--postFontColor);
	margin: .5rem;
	background-color: var(--postBackColor);
	padding: .5rem 1rem;
	border-radius: .4rem;
}
.Index
{
	margin: .5rem;
	color: var(--postFontColor);
	background-color: var(--postBackColor);
	border-radius: var(--borderRadius);
	overflow: clip;
	height: 5rem;
	display: flex;
}
.Index:hover
{
	background-color: var(--tagBackColor);
}
.Index:active
{
	background-color: var(--indexActiveColor);
}
.IndexThumb
{
	background-color: var(--headerBackColor);
	background-size: cover;
	background-position-y: center;
	min-width: 6rem;
}
.IndexHead
{
	font-size: 1.2rem;
	margin: .5rem;
	padding: 0.25rem 1rem;
	color: var(--headerFontColor);
	background-color: var(--headerBackColor);
	border-radius: var(--borderRadius);
}
.IndexContent
{
	padding: .5rem 1rem .5rem 1rem;
}
.AboutImg
{
	max-width: unset;
}
/* Desktop mode */
@media screen and (min-width: 70em)
{
	.IndexArea
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.Index
	{
		height: 4rem;
	}
	.Button:hover
	{
		background-color: var(--buttonHoverColor);
	}
	.PostLane
	{
		max-width: 60rem;
	}
	.DNone
	{
		display: none;
	}
	.DFlex
	{
		display: flex;
	}
	.DInline
	{
		display: inline;
	}
	.ContentMargin
	{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		flex-basis: 0;
	}
	.PostHeader
	{
		margin: 0 1rem;
	}
	.PostTitleContent
	{
		display: grid;
		grid-template-columns: 1.5fr 1fr;
	}
	.PostContent
	{
		margin: 1rem 6rem 2rem 6rem;
	}
	.PanelContent
	{
		margin: 1rem 6rem
	}
	.FootNav
	{
		grid-template: "a b c" auto / 1fr 1fr 1fr;
	}
	:root
	{
		--tabSize: 4;
	}
	.AboutImg
	{
		max-width: unset;
		margin-top: 1rem;
	}
}
@font-face
{
	font-family:  'Inter';
	font-style:   normal;
	font-weight:  100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html
{
	visibility: visible;
}