:root {
  		--darkest-blue: #03045eff;
		--darker-blue: #023e8aff;
		--medium-blue: #0077b6ff;
		--blue-green: #0096c7ff;
		--turquoise-blue: #00b4d8ff;
		--aqua-blue: #48cae4ff;
		--frosted-blue: #90e0efff;
		--frosted-blue-2: #ade8f4ff;
		--cyan-blue: #caf0f8ff;
		--white: #FFFFFF;
		--medium-green: #2A9D8F;
	}

	body {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 16px;
		background-color: var(--white);
		min-height: 100vh;
		display: flex;
		flex-direction: column;		
	}

	.css-nav-div {
		width: 95% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: flex;
		flex-wrap: wrap;

		gap: 5px;				
	}

	.css-nav {
		color:var(--medium-blue);
	}

	.css-dot {
		color:var(--medium-green, #000000);
	}

	hr {
		border: 0;
		border-top: 1px solid var(--medium-blue);
	}

	.css-article-hr {
		border: 0;
		width: 90%;
		margin-left: auto;
		margin-right: auto;		
		border-top: 1px solid var(--medium-green, #000000) !important;		
	}	

	.css-paragraph-class {
		width: 90%;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;	
		margin-bottom: 0px;	
	}

	/*.css-site-note-class {
		background: linear-gradient(
			135deg,
			var(--medium-blue) 0%,
			var(--medium-blue) 55%,
			var(--blue-green) 85%,
			var(--aqua-blue) 100%
		);

		color: white;

		padding: 15px;


		backdrop-filter: blur(8px);

		box-shadow:
			0 10px 30px rgba(3, 4, 94, 0.30);

		border: 1px solid rgba(255, 255, 255, 0.20);
		font-size:14px;
		width: 95%;
		margin-left: auto;
		margin-right: auto;	
		margin-top: auto;						
		margin-bottom: 3px;						
	}	*/

	.css-popup-overlay {
		position: fixed;
		inset: 0;
		display: none;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.65);
		backdrop-filter: blur(5px);
		z-index: 9999;
	}

	.css-popup-window {
		width: max(400px, 80%);
		margin: 0 auto;
		background: linear-gradient(
			135deg,
			var(--medium-blue) 0%,
			var(--medium-blue) 55%,
			var(--blue-green) 85%,
			var(--aqua-blue) 100%
		);

		color: var(--white);
		padding: 30px;
		border-radius: 20px;
		box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
		text-align: left;
	}	

	.css-site-note-class {
		background: linear-gradient(
			135deg,
			var(--medium-blue) 0%,
			var(--medium-blue) 55%,
			var(--blue-green) 85%,
			var(--aqua-blue) 100%
		);

		color: white;
		padding: 15px;
		border-radius: 20px;
		width: 95%;
		margin: 3px auto;
	}

	.css-site-note-class summary {
		cursor: pointer;
		font-weight: 600;
		font-size: 16px;
		padding: 5px 0;
		user-select: none;
	}

	.css-site-note-class summary:hover {
		text-decoration: underline;
	}

	.css-site-note-content {
		margin-top: 15px;
		line-height: 1.6;
	}

	.css-nav-hr {
		border: 0;
		width: 95%;
		margin-left: auto;
		margin-right: auto;		
		border-top: 1px solid var(--medium-blue);	
	}		

	.css-article-title {
		margin-left:35px;
		text-align:center;
	}

	.css-article-quote {
		margin-left:35px;
	}	

	.header-container {
		display: flex;
		align-items: center;  /* vertical centering */
		gap: 10px;
		width: 95%;
		margin-left: auto;
		margin-right: auto;			
	}	

	.header-container img {
		max-width: 100px;
		height: auto;
		flex-shrink: 0;
	}	

	.header-font {
		color:var(--darker-blue);
		font-family: Montserrat;
		font-size: 28px;
		font-weight:bold;
	}

	.slogan-font {
		color:var(--darker-blue);
		font-family: "Open Sans";
		font-size: 20px;
		text-align:left;
	}


	.header-style {
		color:var(--medium-blue);
		font-family: Verdana;
		font-size: 18px;
		margin-left:5px;
		margin-right:5px;
		margin-top:15px;
	}


	a	{
		outline: none;
		text-decoration: underline;
		color:var(--medium-blue);
		font-size: 18px;
	}



	.body-p {
		margin-left:15px;
		margin-right:75px;
		color:#FFFFFF;
		font-size:16px;
		font-family: Verdana;
	}

	.article-title-font 
	{
		font-size:20px;
		color: #000000;
		font-size:Verdana;
		font-weight:bold;
		text-align:center;
		text-decoration: underline;
	}

	.article-sub-title-font 
	{
		font-size:20px;
		color: #000000;
		font-size:Verdana;
		font-weight:bold;
		text-decoration: underline;
	
	}


	@media (min-width: 2700px) {
		.css-popup-window {
			width: 800px;
		}
	}


	@media (max-width: 768px) {
		.css-popup-overlay {
			justify-content: flex-start;
			align-items: flex-start;
			overflow-y: auto;
			padding: 10px;
		}

		.css-popup-window {
			width: 85%;
			margin: 0;
			max-height: calc(100vh - 20px);
			overflow-y: auto;
		}
	}