:root
{
	--PrimaryColor: 237, 113, 11;
	--FocusColor: 85, 153, 238;
	
	--BackgroundColor: 44, 45, 50;
	--BackgroundFrontColor: 50, 51, 57;
	--BorderColor: 64, 66, 72;
	--TextColor: 223, 224, 226;
	--TextColorSecondary: 196, 197, 201;
	--LinkColor: 123, 176, 245;
	
	--ScrollbarColor: 44, 45, 50;
	--ScrollbarThumbColor: 113, 114, 122;
	--ScrollbarThumbColorHover: 128, 130, 139;
	
	--TransitionSpeed: .2s;
	--BorderSize: 2px;
	
	--NoteColor: rgb(230, 233, 190);
}



:focus-visible
{
	outline-color: rgb(var(--FocusColor));
}



::-webkit-scrollbar
{
	width: 16px;
	height: 16px;
	background: rgb(var(--ScrollbarColor));
}



::-webkit-scrollbar-corner
{
	background: rgb(var(--ScrollbarColor));
}



::-webkit-scrollbar-thumb
{
	background: rgb(var(--ScrollbarThumbColor));
	border: 4px solid rgb(var(--ScrollbarColor));
	border-radius: 8px;
}



::-webkit-scrollbar-thumb:hover
{
	background: rgb(var(--ScrollbarThumbColorHover));
}



body
{
	margin: 0;
	background: rgb(var(--BackgroundColor));
	color: rgb(var(--TextColor));
	font-family: sans-serif;
}



code
{
	font-family: monospace, monospace;
    padding: 0 2px;
    border-radius: 4px;
    background: rgb(0 0 0 / 16%);
    border: 1px solid rgb(255 255 255 / 10%);
}



a:any-link
{
	color: rgb(var(--LinkColor));
	text-decoration: none;
}



a:hover
{
	text-decoration: underline;
}



#GlobalTooltip
{
	opacity: 0;
	position: fixed;
	justify-self: anchor-center;
	top: 0;
	padding: 6px 8px;
	background-color: rgb(var(--BackgroundColor), .75);
	border: var(--BorderSize) solid rgb(var(--BorderColor));
	border-radius: 8px;
	color: var(--TextColor);
	text-align: center;
	font-size: 1.25em;
	box-shadow: 0 0 6px 2px #00000060;
	transition: top var(--TransitionSpeed), opacity var(--TransitionSpeed);
	pointer-events: none;
	user-select: none;
	z-index: 1000;
}




#GlobalTooltip.Visible
{
	top: 16px;
	opacity: 1;
}



.Section
{
	padding: 3em 2.5em;
}



.MaxWidth
{
	max-width: 1680px;
	margin: 0 auto;
}



.DoubleGap
{
	gap: 1em;
}



.RoundLink
{
	overflow: visible;
	border-radius: 50%;
    outline-offset: 2px;
}



#Header
{
	background: linear-gradient(#000000cc, rgb(var(--BackgroundColor))), url(Images/Header-Background.png);
}



.Icon
{
	pointer-events: none;
	user-select: none;
}



#Header h1
{
	margin: 0;
    color: rgb(var(--PrimaryColor));
}



#Header span
{
	color: rgb(var(--TextColorSecondary));
}



#Main > :first-child
{
	margin-top: 0;
}



#Main h1
{
	line-height: 1em;
	margin: 1.25em 0 .75em;
    padding-bottom: .5em;
    text-align: center;
    border-bottom: var(--BorderSize) solid rgb(var(--BorderColor));
}



#Projects
{
	display: grid;
	gap: 2em;
	column-gap: 2em;
	grid-template-columns: repeat(auto-fill, minmax(clamp((100% / 2) - 1rem, 32rem, 100%), 1fr));
	margin: 1.5em 0;
}



#Projects > block
{
	border: var(--BorderSize) solid rgb(var(--BorderColor));
    border-radius: 12px;
    min-height: 420px;
	overflow: hidden;
	position: relative;
	display: flex;
    align-items: flex-end;
	background: rgb(var(--BackgroundFrontColor));
}



#Projects > block > img
{
	opacity: .25;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity .5s;
	user-select: none;
	pointer-events: none;
}



#Projects > block .Description
{
	background: rgb(24, 24, 24, .7);
	padding: .5em 0 1.5em;
	padding-inline-start: 1.75em;
	margin-inline-end: 2em;
	box-shadow: 0px 0px 48px 64px rgb(24, 24, 24, .7);
	max-width: 620px;
	display: flex;
    flex-direction: column;
	z-index: 1;
}



#Projects > block h2
{
	margin: 0;
}



.Button
{
	background: rgb(var(--BackgroundColor));
	padding: 8px;
	border: var(--BorderSize) solid rgb(var(--BorderColor));
	border-radius: 6px;
	opacity: .85;
	font-weight: bold;
	width: fit-content;
	color: white !important;
}



.Note
{
	border: var(--BorderSize) solid rgb(from var(--NoteColor) r g b / 12%);
	background: rgb(from var(--NoteColor) r g b / 6%);
    padding: 6px 8px;
    border-radius: 6px;
}



.Note:before
{
	content: 'Note: ';
	color: rgb(from var(--NoteColor) r g b / 80%);
	font-size: 1.2em;
}