:root {
	--border-thickness:2px;


	/*@media (prefers-color-scheme: light) 
	{ Default or Light */
		--banner-color: #E8E8E8 ;/*** silver azure;**/
		--accent-color: DarkOrange;
		--active-Nav-fore-color: DarkOrange;
		
		--base-color:#FAFAFA;
		--hover-fore-color: gold;
		--hover-back-color: var(--base-color);
		--text-color: darkblue;

		h1{		color:#585858; }
		h2{		color:#585858; }


/* To light
		.link:link { color: lightskyblue; }
		.link:visited { color: skyblue; }
		.link:hover { color: yellow; }
 */



/* 
a:active { color: #ff4040; text-decoration:none; font-weight:normal; }
*/


	 



	@media (prefers-color-scheme: dark)
	{
		--banner-color: #000088 ;/*** silver azure;**/
		--accent-color: orange;
		--active-Nav-fore-color: orange;
		
		--base-color: #000020;
		--hover-fore-color: yellow;
		--hover-back-color: var(--base-color);
		--text-color: ivory;

		h1{		color:ivory; 	}
		h2{		color:mintcream; 	}

.link:link { color: lightskyblue; }
.link:visited { color: skyblue; }
.link:hover { color: yellow; }

	}
	




	
	
}

*{
padding:0;
margin:0;
}


body{
	font-family: Arial, Helvetica, sans‑serif;
						/* Roboto ,font:Georgia; firfox doesnt recognise */


	letter-spacing:0.1em;
	line-height:1.5; /*1.6;*/
 
	min-height:100vh;
	min-height:100dvh;
	}
	


@media screen and (max-width: 900px) {
	body{
		background-color:var(--base-color);
		color:var(--text-color);
		display:grid;
		grid-template-rows:auto 1fr auto;
		grid-template-areas:
				"header"
				"main"
				"footer"	;
	 }
 
	main{
		padding:0rem;
		padding-top:1rem;
		
		display:grid;
		grid-template-columns:1fr;
		grid-template-areas:
		"column1"
		"column2";
		background-color:var(--base-color);
		color: var(--text-color);
		}
	
	.FactsLeftColumn
	{
		grid-area:column1;
		background-color:var(--facts-left-color);
		padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
		padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
	}

	.FactsRightColumn
	{
		grid-area:column2;
		background-color:var(--facts-right-color);
		padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
		padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
	}


	.eyeCandy {
		grid-area:column2;
		display: none;
		width:40%;
	}
}


@media screen and (min-width: 900px) {
	body {
		color:var(--text-color);
		display:grid;
		grid-template-rows:auto 1fr auto;
		grid-template-areas:
				"header"
				"main"
				"footer"	;
		 }


	main{

		padding:0rem;
		padding-top:1rem;
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-areas:
		"column1 column2";
		background-color:var(--base-color);
		color: var(--text-color);
	}


	.FactsLeftColumn
	{
		grid-area:column1;
		background-color:var(--facts-left-color);
		padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
		padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
	}

	.FactsRightColumn
	{
		grid-area:column2;
		background-color:var(--facts-right-color);
		
		padding-top:2.5rem;
		
		padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
		padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
		 /*clamp(1rem, 0.33rem + 2.67vw, 3rem)*/
	}


	.eyeCandy {
		grid-area:column2;
		display: visible;
			}
}




 



 
 
 
 
header{ grid-area:header;
		background-color:var(--banner-color);
		color:var(--accent-color);

		display: content;
		position: sticky;
		top:0px;

		font-weight:Bolder;
		font-size: 	clamp(2rem, 1.67rem + 1.33vw, 3rem);
		height: 	clamp(5.5rem, 4.58rem + 3.67vw, 8.25rem);
					/*clamp(6rem, 5rem + 4vw, 9rem);*/
					/*clamp(5rem, 4.17rem + 3.33vw, 7.5rem);*/
 
		border-top-style:solid;
		border-top-color:var(--banner-color);
		border-top-width:clamp(0.5rem, 0.42rem + 0.33vw, 0.75rem);

		border-bottom-style:solid;
		border-bottom-color:var(--accent-color);
		border-bottom-width:var(--border-thickness);
		}


.headTitle{
		margin-left: clamp(1.5rem, 1rem + 2vw, 3rem);
		display: block;
		}


/****** NAVIGATION *****/

header nav{ 	grid-area:nav;
 		display: inline-block;
		position:sticky;
		left: clamp(0.5rem, 0.17rem + 1.33vw, 1.5rem); /**** 0.5 **/
		top: 	 clamp(3rem, 2.5rem + 2vw, 4.5rem);
		line-height:clamp(2rem, 1.67rem + 1.33vw, 3rem);
		font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) ;
		
	}
	
header nav ul { list-style: none; }
header nav ul li { display: inline-block; }
header nav ul li a {
				line-height:clamp(2rem, 1.67rem + 1.33vw, 3rem);
				display: inline-block;
				text-decoration: none;
				color:var(--active-Nav-fore-color);			
				padding-top:0rem;
				
				margin-left: 0rem;
				margin-right:0rem;
				padding-left: clamp(0.5rem, 0.17rem + 1.33vw, 1.5rem);
				padding-right:clamp(0.5rem, 0.17rem + 1.33vw, 1.5rem);
			}


header nav ul li a:hover {
			display: content;
			background-color: var(--hover-back-color);
			color:var(--hover-fore-color);

/*			border-bottom-color:red;
			border-bottom-style:solid;
			border-bottom-width: 0px;

			border-top-color:var(--accent-color);
			border-top-style:solid;
			border-top-width: 0;/*var(--border-thickness);*/
*/
			line-height:2rem+1px;
			}


header .activeNav {
			background-color:var(--base-color);
			color:var(--active-Nav-fore-color);
			display: inline;

			border-left-color: var(--accent-color);
			border-left-style: solid;
			border-left-width: var(--border-thickness);

			border-right-color: var(--accent-color);
			border-right-style: solid;
			border-right-width: var(--border-thickness);

			border-top-color: var(--accent-color);
			border-top-style: solid;
			border-top-width: var(--border-thickness);

	
			border-bottom-color: var(--base-color);
			border-bottom-style: solid;
			border-bottom-width: var(--border-thickness)*2;
 
	}



 
/* Footer is kosha */
footer{	
		grid-area:footer;

		font-size: 1.25rem ;
		line-height:2rem;
		background-color:var(--banner-color);
		color: var(--text-color);
		text-align: center;
		padding-bottom: 	0.25rem;
		margin-left:2rem;
		margin-right:2rem;
		position: 	sticky;
		bottom: 	0;
		width: 		100%;
		
		border-top-style:solid;
		border-top-color:var(--accent-color);
		border-top-width:var(--border-thickness);

		margin:		0px;
	}
/*
footer a { color:var(--active-Nav-fore-color);}
*/


footer nav{ 	 
 		display: inline-block;
		position:sticky;
		<!-- line-height:clamp(1.5rem, 1.25rem + 1vw, 2.25rem) ; -->
		<!-- font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) ; -->
		
	}
	
footer nav ul { list-style: none; }
footer nav ul li { display: inline-block; 
				padding-left: 1rem;
				padding-right: 1rem;
				margin-left: 0.5rem;
				margin-right:0.5rem;

				}
footer nav ul li a {
				display: inline-block;
				text-decoration: none;
				color:var(--active-Nav-fore-color);			
				padding-top:0rem;
				padding-bottom:0.25rem;
				margin-left: 0rem;
				margin-right:0rem;
				padding-left: 0rem;
				padding-right: 0rem;
			}


footer nav ul li a:hover {
			display: inline;
			background-color: var(--hover-back-color);
			color:var(--hover-fore-color);

/*			border-bottom-color:red;
			border-bottom-style:solid;
			border-bottom-width: 0px;
*/
			border-top-color:var(--base-color);
			border-top-style:solid;
			border-top-width: 10px; 

			}


footer .activeNav {
			line-height:2rem+1px;

			background-color: var(--base-color);
			color:var(--active-Nav-fore-color);
			display: inline;

			border-left-color: var(--accent-color);
			border-left-style: solid;
			border-left-width: var(--border-thickness);

			border-right-color: var(--accent-color);
			border-right-style: solid;
			border-right-width: var(--border-thickness);

			border-bottom-color: var(--accent-color);
			border-bottom-style: solid;
			border-bottom-width: var(--border-thickness);

	
			border-top-color: var(--base-color);
			border-top-style: solid;
			border-top-width: 10px;
 
	}




 responsive-img {
width: 40%;
height: auto;
display: block;
}




/***  Details and Summary ***/
	details {
		padding-bottom:1rem;
		}

	details summary{
		padding-left:0rem;
		font-size: 1rem;      /* Make it bigger */
		}
		

	details[open] summary{
		padding-left:0rem;
		font-size: 1rem;      /* Make it bigger */
		font-weight:bolder;
		}
		
	void{
		list-style: none; /* Removes default marker in some browsers */
		cursor: pointer;
		}

	summary::marker {
		padding-left:1rem;
		color: var(--accent-color);       /* Change marker color */
		content: "▶ ";         /* Custom symbol (▶ for closed) */
		}

	details[open] summary::marker {
		padding-left:2rem;
		font-size: 1rem; 
		content: "▼ ";         /* Down arrow when open */
		color: var(--accent-color);
		}


	details p {
		padding-top:0.5rem;
		padding-left:1.25rem;
		padding-bottom:1rem;
		}


.indentUL
{
	padding-left:1rem;
	
}

.indentUL_plus1
{
	padding-left:3rem;
	
}




.contactDetails{
		padding-top:1rem;
		}



h1{		font-size: 2rem; 
		}
 

h2{		font-size: 1.5rem; 
		}

.space2L{
	line-height:2rem;
	
}

.LegalSection{
	padding-top:9rem;
	display:block;	
	
}

.SkipLinkTop{
	display:block;
	padding-top:2rem;
}