/* Basic resets and typography settings */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Arial', sans-serif;
	line-height: 1.6;
}

body {
	background: #fff;
	color: #333;
	font-size: 12px;
	padding: 20px;
}

/* Container styling */
.main-content {
	margin: 0 15px;
	padding: 20px;
}

/* Header styling */
header {
	text-align: center;
	margin-bottom: 40px;
}

header h1 {
	font-size: 2.5em;
	color: #2c3e50;
}

header p {
	font-size: 1.2em;
	color: #7f8c8d;
}

section p {
	font-size: 1.1em;
	margin-bottom: 20px;
}

/* List styling for Key Concepts */
ul {
	margin-left: 20px;
}

ul li {
	font-size: 1.1em;
	margin-bottom: 10px;
	color: #16a085;
}

/* Links and buttons */
a {
	color: #2980b9;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.next-link {
	display: inline-block;
	background-color: #2980b9;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
	margin-top: 20px;
	font-size: 1.2em;
}

.next-link:hover {
	background-color: #3498db;
}

/* Footer styles */
footer {
	text-align: center;
	margin-top: 40px;
	font-size: 0.9em;
}

.legend-container {
	margin-top: 40px;
	text-align: center;
}

img {
	max-width: 100%;
	height: auto;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* General body styling */
body {
	font-family: 'Arial', sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f7f9fc;
}

/* Sidebar Navigation */
.sidebar-nav {
	width: 250px;
	background-color: #2c3e50;
	padding: 20px;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	overflow-y: auto;
	z-index: 1000; /* Ensures sidebar stays above content */
}

ul.sidebar-nav li.class_active{
	background-color: #00dd22;
	
}

.sidebar-nav ul {
	list-style: none;
	padding: 0;
}

.sidebar-nav li {
	margin-bottom: 10px;
}

.sidebar-nav a {
	display: block;
	font-size: 14px;
	padding: 8px 4px;
	color: #ecf0f1;
	text-decoration: none;
	transition: background-color 0.3s ease;
	border-radius: 4px;
}

.sidebar-nav a:hover {
	background-color: #34495e;
}

.sidebar-nav a.class_active {
	background-color: #3498db; /* Active page indicator */
}

/* Main Content Area */
.main-content {
	padding: 20px;
	background-color: #fff;
	min-height: 100vh;
}

.main-content h1 {
	color: #34495e;
	font-size: 2em;
	margin-bottom: 20px;
}

.main-content p {
	color: #555;
	line-height: 1.8;
	font-size: 1.1em;
	margin-bottom: 20px;
}

/* Page Counter Styling */
.page-counter {
	text-align: center;
	font-size: 1.5em;
	color: #3498db;
	margin: 30px 0;
	padding: 20px;
	background-color: #ecf0f1;
	border-radius: 10px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.left-indent {
	padding-left: 40px;
}

ol, ul {
	padding-left: 40px;
}
/* Proponent Block Styling */
.proponent-block {
	background-color: #34495e; /* Dark background to match sidebar */
	color: #ecf0f1;			/* Light text for contrast */
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
}

.proponent-block h2 {
	margin: 0;
	font-size: 1.6em;
	color: #e67e22; /* Accent color for heading */
	margin-bottom: 10px;
}

.proponent-block p {
	font-size: 1em;
	line-height: 1.5;
	color: #bdc3c7; /* Softer text color for paragraph */
	margin: 0;
}

/* Adding some padding around the block to ensure spacing */
.sidebar-nav .proponent-block {
	padding: 15px;
	border-bottom: 1px solid #2c3e50; /* Bottom border to separate from navigation links */
}

#sidebar {
	position: fixed;
	width: 250px;
	height: 100%;
	background-color: #333;
	color: white;
	transition: 0.3s;
	padding: 20px;
}

#toggleBtn {
	position: fixed;
	left: 0;
	top: 0;
	background-color: #333;
	color: white;
	padding: 15px;
	border: none;
	cursor: pointer;
	z-index: 1000;
}

#toggleBtn:hover {
	background-color: #444;
}

@media (max-width: 768px) {
	#sidebar {
		width: 200px;
	}
}

.term {
	cursor: pointer;
	text-decoration: underline;
	position: relative;
}

.term:hover::after {
	content: attr(data-term);
	background: #f4f4f4;
	border: 1px solid #ccc;
	padding: 5px;
	position: absolute;
	left: 0;
	bottom: 100%;
	white-space: nowrap;
	z-index: 10;
	font-size: 14px;
}


body {
	background: #252525;
	font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-weight: 300; 
}

.container {
	width: 80%;
	margin: auto;
	padding: 20px;
	background-color: #fff;
}

h1 {
	font-size: 3em;
	font-weight: 70;
}

p { font-size: 1.2em; }

h1,h2,a,ul, table{ padding-bottom: 20px; }
	
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; }

footer {color:white;}
		
section img {
	display: block;
	max-width: 100%;
	margin: 20px auto;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.callout {
	background: #d8f3dc;
	border-left: 5px solid #81b29a;
	padding: 10px 15px;
	margin: 20px 0;
	border-radius: 10px;
}
:target {
	background-color: #f7fbff; /* Darker background to match dark mode */
	border-left: 4px solid #1e90ff; /* Blue border for highlighted section */
	padding-left: 10px;
}