:root
{
	--mainBGColor: rgb(180,200,225);
	--mainTextColor: rgb(50,25,0);

	--leafBorderColor: rgb(0,200,75);
	--leafBGColor: rgb(160,180,205);
	--leafTextColor: black;

	--linkBGColor: rgb(160,180,205);
	--linkBorderColor: rgb(225,195,0);
	--linkTextColor: black;

	--activeLinkBGColor: rgb(0,127,255);
	--activeLinkBorderColor: rgb(225,195,0);
	--activeLinkTextColor: black;
	
	--surveyAnswerBorderColor: #0080FF80;
}



body
{
	background-color: var(--mainBGColor);
	color: var(--mainTextColor);
}



#topbar
{
	border-color: var(--leafBorderColor);
	background-color: var(--leafBGColor);
	color:var(--leafTextColor);
	border-style: outset;
	border-width: 4px;
	border-radius: 0 0 2em 2em;
	margin: 0 2em 2em 2em;
	padding:1em 2em 1em 2em;
}



.button-link
{
	text-decoration: none;
	color: hsl(120,25%,25%);

	display: inline-block;
	padding: 0.5em;
	background-color: hsl(200,75%,95%);
	border: 0.2em outset hsl(120,45%,65%);
	border-radius: 1.0em 0;
	font-weight: bold;
	text-align: center;

	transition: all 0.3s ease;
}


.button-link:hover
{
	background-color: hsl(120,35%,85%);
	border-style: inset; /* Creates a "pressed" effect */
	transform: translateY(0.05em); /* Subtle press down effect */
	border-radius: 0 1.0em;
}


.button-link:active
{
	border-style: inset;
	background-color: hsl(120,25%,75%);
}



.leaf
{
	border-color: var(--leafBorderColor);
	background-color: var(--leafBGColor);
	color:var(--leafTextColor);
}



div.leaf
{
	border-style: outset;
	border-width: 4px;
	border-radius: 2.0em;
	margin: 3em 4em 3em 4em;
	padding:1em 2em 1em 2em;
}


table tr:nth-child(even)
{
	background-color:hsl(200,20%,100%);
}



table tr:nth-child(odd)
{
	background-color:hsl(140,20%,85%);
}


table
{
	border-spacing: 0.25em 0.75em;
}

td
{
	border: 1px var(--leafBorderColor) outset;
}



.smol
{
	font-size: 0.75em;
	font-style: italic;
}



.question
{
	text-align: right;
	width:33%;
	max-width: 33%;
}



.answers
{
	text-align: left;
	width:33%;
	max-width:33%;
}


label
{
	display: block;
	padding:0.25em;
	margin: 0.25em 0 0.25em 0;
	border-style: solid;
	border-width: 1px;
	border-radius: 0.25em;
	border-color: var(--surveyAnswerBorderColor);
	cursor: pointer;
	transition: all 0.3s ease;
}

label:hover, label:has(input:checked)
{
	background: var(--surveyAnswerBorderColor);
	border-radius: 2em;
}

input[type=radio],
input[type=checkbox]
{
	background: #ff0000;
	color: #ff0000;
}