/* Global Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
	background-color: #f5f7f9;
	color: #333;
	line-height: 1.6;
	font-size: 0.9rem; /* Decreased from 0.95rem */
	margin: 0;
	padding: 0;
	padding-top: 3rem; /* Default padding for content spacing */
	background-attachment: fixed;
	background-image: url('images/AI_generated.jpg');
	background-size: cover;
	background-position: center;
}


header {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	text-align: center;
	padding: 0.1 rem 0;
	background-color: #d8dee9;
	box-shadow: 0 0.8rem 1.2rem rgba(0, 0, 0, 0.4);
}

/* Section Titles */
.section-header h2 {
	font-size: 1.5rem; /* Decreased from 1.6rem */
	color: #2d5f73;
	margin-bottom: 0.625rem;
	text-align: center;
}

.dark-mode .section-header h2 {
	color: #ced8dd;
}

/* Section Content */
.section-content {
	font-size: 0.9rem; /* Decreased from 0.95rem */
	line-height: 1;
	color: #4a5a6a;
	margin-bottom: 1.25rem;
	align-self: center;
	width: 90%;
	margin: 0 auto;
	/* padding: 0 3.75rem; */
	background-color: rgba(225, 229, 233, 0.9); /* Slightly darker background with transparency */
	border-radius: 0.5rem; /* Rounded corners */
	box-shadow: 0 0.5rem 0.9rem rgba(65, 72, 91, 0.5); /* Big dark shadow */
	padding: 1.25rem;
}

.dark-mode .section-content {
	color: #b9cede;
	background-color: rgba(65, 72, 91, 0.9); /* Darker background with transparency */
	box-shadow: 0 0.5rem 0.9rem rgba(37, 41, 52, 0.5); /* Big dark shadow */
}

.dark-mode header {
	background-color: #2b2f37; /* Dark mode header */
}

.content-box {
	width: 95%;
	margin: 0 auto;
}

.dark-mode {
	background-color: #2e3440;
	color: #d8dee9;
}

#container {
	display: flex;
	flex-direction: row;
	border-radius: 0.5rem;
	width: 70%;
	@media (max-width: 768px) {
		width: 95%;
	}
	margin: 1.25rem auto;
	padding: 1.25rem;
}

#left-panel {
	flex: 3;
	padding: 1.25rem;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 0.5rem;
	align-items: center;
}

#right-panel {
	flex: 1;
	padding: 1.25rem;
	background-color: rgba(233, 239, 242, 0.95);
	border-radius: 0.5rem;
	margin-left: 0.25rem; /* Added space to the left of the panel */
	align-items: center;
}

@media (max-width: 768px) {
	#right-panel {
		margin-bottom: 0.5rem; /* Added space below the panel in media mode */
	}
}

.dark-mode #left-panel {
	background-color: rgba(59, 66, 82, 0.98);
}

.dark-mode #right-panel {
	background-color: rgba(67, 76, 94, 0.98);
}

h1 {
	font-size: 1.6rem; /* Decreased from 1.8rem */
	color: #2d5f73;
	margin: 0 0 0.625rem;
}

h2 {
	font-size: 1.3rem; /* Decreased from 1.4rem */
	color: #4f6d7a;
	margin: 1.25rem 0 0.625rem;
}

.dark-mode h1,
.dark-mode h2 {
	color: #ced8dd;
}

p {
	font-size: 0.9rem; /* Decreased from 0.95rem */
	line-height: 1.6;
	color: #4a5a6a;
	margin-bottom: 0.9375rem;
}

.dark-mode p {
	color: #b9cede;
}

a {
	color: #54a4c1;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.links a {
	display: block;
	margin: 0.3125rem 0;
	color: #54a4c1;
}

.links a:hover {
	text-decoration: underline;
}

ul {
	list-style-type: none;
	padding: 0;
}

ul li {
	margin: 0.625rem 0;
}

ul li a {
	color: #54a4c1;
	text-decoration: none;
}

ul li a:hover {
	text-decoration: underline;
}

#toggleModeButton {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	padding: 0.3125rem 0.625rem;
	font-size: 1rem; /* Decreased from 1.1rem */
	cursor: pointer;
	background-color: #6c9cba;
	color: white;
	border: none;
	border-radius: 0.3125rem;
}

@media (max-width: 768px) {
	#toggleModeButton {
		font-size: 0.7rem; /* Smaller font size on mobile */
		padding: 0.25rem 0.5rem; /* Smaller padding on mobile */
		top: 5rem; /* Adjust position to avoid covering other elements */
		right: 0.3125rem; /* Adjust position to avoid covering other elements */
	}
}

.dark-mode #toggleModeButton {
	background-color: #81a1c1;
}

.dark-mode #toggleModeButton:hover {
	background-color: #88c0d0;
}

/* Ensure content is not hidden under the fixed header */
body::before {
	content: '';
	display: block;
	height: 0.3125rem; /* Matches header's height + padding */
}

/* Responsive Design */
@media (max-width: 768px) {
	#container {
		flex-direction: column-reverse;
	}

	h1,
	h2 {
		font-size: 1.5rem;
		text-align: center;
		margin: 0 0 0.625rem;
	}

	.links a {
		display: inline-block;
		margin: 0.3125rem;
		font-size: 1.1rem;
	}
}

.link-wrapper {
	position: relative;
	display: inline-block;
}

.link-wrapper img {
	width: 1.5rem;
	height: 1.5rem;
	opacity: 0.8; /* Mask transparency */
	transition: opacity 0.3s ease;
}

.link-wrapper img:hover {
	opacity: 1; /* Full visibility on hover */
}

.tooltip {
	visibility: hidden;
	width: 9.375rem;
	background-color: black;
	color: white;
	text-align: center;
	border-radius: 0.25rem;
	padding: 0.3125rem;
	position: absolute;
	bottom: 1.875rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	font-size: 0.75rem; /* Decreased from 0.8125rem */
}

.link-wrapper:hover .tooltip {
	visibility: visible;
	opacity: 1;
}