/*Style for Minko.World: Light mode.*/

:root
{
	--BG: #B9D8F0;
	--sideBanner: url("bgmargin.png");
	--divider: url("divider.png");
	--navBarBG: #F1ECDD;
	--navBarColor: #372C0C;
	--navBarBorderColor: #E3D099;
	--leafBG: rgb(240,255,245);
	--leafColor: rgb(6,36,12);
	--leafTitle: black;
	--navBarLinkColor: hsl(120,25%,25%);
	--navBarBG: hsl(120,5%,95%);
	--navBarLinkHoverBG: hsl(120,5%,85%);
	--navBarLinkHoverColor: hsl(120,25%,25%);
	--navBarLinkActiveColor: hsl(120,25%,25%);
	--navBarLinkActiveBG: hsl(120,5%,75%);
	--navBarLinkVisitedColor: hsl(120,25%,25%);
	--footerColor: black;
	--titleGlow: 0 0 0 rgb(255,255,255,0);
}

[data-theme="dark"]
{
	--BG: #152633;
	--navBarBG: #2C240F;
	--navBarColor: #EEE4C6;
	--navBarBorderColor: #E3D099;
	--leafBG: rgb(24,25,24);
	--leafColor: rgb(60,255,120);
	--leafTitle: white;
	--navBarLinkColor: hsl(120,25%,80%);
	--navBarBG: hsl(120,5%,20%);
	--navBarLinkHoverBG: hsl(120,8%,20%);
	--navBarLinkHoverColor: hsl(120,25%,85%);
	--navBarLinkActiveColor: hsl(120,25%,85%);
	--navBarLinkActiveBG: hsl(120,5%,15%);
	--navBarLinkVisitedColor: hsl(120,25%,75%);
	--footerColor: white;
	--titleGlow: 0 0 3px rgb(255,255,255);
}

/*Autumn is a WIP... */
[data-theme="autumn"]
{
	--BG: #5986B3;
	--sideBanner: url("bgmargin-autumn.png");
	--divider: url("divider-autumn.png");
	--leafTitle: hsl(20,67%, 33%);
	--footerColor: purple;
	--titleGlow: 0 0 3px rgb(255,200,127);
}

/*Wow you really like looking around at the internal machinery don't ya? Cool! (8 */

body
{
	background-color: var(--BG);
	padding-left: 16%;
	padding-right: 16%;
	background-image: var(--sideBanner), var(--sideBanner);
	background-repeat: repeat-y, repeat-y;
	background-position: left top, right top;
}
.divider
{
	height: 44px;
	border: none;
	background-image: var(--divider);
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: center;
}


@media (max-width: 960px)
{
	body
	{
		padding-left: 64px;
		padding-right: 2px;
	}
}


.Title
{
	text-shadow: var(--titleGlow);
}


.NavBar a
{
	/* Remove default link styling */
	text-decoration: none;
	color: var(--navBarLinkColor);

	/* Button appearance */
	display: inline-block;
	padding: 0.25em;
	background-color: var(--navBarBG);
	border: 0.2em outset hsl(120,45%,65%);
	border-radius: 1.0em;
	font-weight: bold;
	text-align: center;

	/* Smooth transitions */
	transition: all 0.25s ease;
}


.NavBar a:hover
{
	background-color: var(--navBarLinkHoverBG);
	color: var(--navBarLinkHoverColor);
	border-style: inset; /* Creates a "pressed" effect */
	transform: translateY(0.05em); /* Subtle press down effect */
	border-radius: 0.5em;
}


.NavBar a:active
{
	border-style: inset;
	color: var(--navBarLinkActiveColor);
	background-color: --navBarLinkActiveBG);
	border-radius: 0.0em;
}


.NavBar a:visited
{
	color: var(--navBarLinkVisitedColor);
}


.NavBar
{
	background-color: var(--navBarBG);
	color: var(--navBarColor);
	font-size: 14pt;
	border-style: outset;
	border-width: 0.25em;
	border-radius: 0.50em;
	border-color: var(--navBarBorderColor);
	padding: 1em;
	margin: 0.5em;
}

a
{
	color: hsl(120,67%,33%);
	font-weight: bold;
}

a:hover
{
	color: hsl(120,67%,67%);
	font-weight: bold;
}

a:active
{
	color: hsl(120,33%,67%);
	font-weight: bold;
}

a:visited
{
	color: hsl(130,15%,50%);
	font-weight: bold;
}


.Big
{
	font-size:2.0em;
}


.leaf
{
	background-color: var(--leafBG);
	color: var(--leafColor);
	font-size: 14pt;
	border-style: outset;
	border-width: 0.25em;
	border-radius: 0.50em;
	border-color: #B3E5D6;
	padding-left: 17%;
	padding-right: 17%;
	padding: 1em;
	margin: 0.5em;
	margin-bottom: 1.5em;
}

@media (max-width: 960px)
{
	.leaf
	{
		padding-left: 64px;
		padding-right: 2px;
	}
}


hr
{
	margin: 1.5em 0;
}


.info
{
	border-style: none none solid none;
	border-radius: 5px;
	border-color: #B3E5D6;
	width: fit-content;
	margin-bottom: 1em;
}


.leaftitle
{
	font-size:1.25em;
	color: var(--leafTitle);
}


.leafinfo
{
	font-size:0.67em;
	font-family: monospace;
	color: var(--leafTitle);
}

.footer
{
	color: var(--footerColor);
	font-size: 0.9em;
	margin: auto;
	width: fit-content;
	font-family: sans, monospace;
}


.monitor td, .monitor tr
{
	border-style: solid;
	border-color: rgb(144,144,144);
	border-width: 1px;
	border-radius: 6px;
	padding: 0.50em;
	text-align: center;
}