:root {
	/* Dark theme (default) */
	--bg-gradient-start: rgba(25, 25, 112, 0.8);
	--bg-gradient-end: rgba(75, 0, 130, 0.8);
	--card-bg: rgba(30, 30, 60, 0.85);
	--text-primary: #f5f5f5;
	--text-secondary: #E0E0E0;
	--border-color: rgba(100, 100, 150, 0.3);
	--navbar-bg: rgba(20, 20, 40, 0.95);
	--toggle-bg: rgba(75, 0, 130, 0.8);
	--link-color: #65f6b2;
	/* --link-color: #6495ED; */
	--link-hover: #87CEEB;
}

.light-theme {
	/* Light theme */
	--bg-gradient-start: rgba(248, 169, 226, 0.4);
	--bg-gradient-end: rgba(148, 184, 247, 0.6);
	--card-bg: rgba(255, 255, 255, 0.151);
	--text-primary: #333;
	--text-secondary: #666;
	--border-color: rgba(0, 0, 0, 0.2);
	--navbar-bg: rgba(255, 255, 255, 0.95);
	--toggle-bg: rgba(148, 184, 247, 0.6);
	--link-color: #dc68f4;
	--link-hover: #9639d0;
}

* {
	scroll-margin-top: 3.125rem;
}


.active {
	font-weight: 600;
	color: #4285f4;
	text-decoration: #8ddfee70 wavy underline;
}


.bg-custom-white {
	background: var(--card-bg);
}
.bg-custom-black {
	background: rgba(0, 0, 0, 0.185);
}

.parallax {
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.parallax-lake {
	background-image: url('img/cover.jpg');
	min-height: 400px;
}

.parallax-mandelbrot {
	background-image: url('img/mandelbrot.png');
	min-height: 300px;
}

.parallax-ripple {
	background-image: url('img/waves.png');
	min-height: 50px;
}

.parallax-ripple-inverse {
	background-image: url('img/waves2.png');
	min-height: 50px;
}

/* https://mdbootstrap.com/docs/standard/tools/design/gradients/ */
.bg-breathing {
	animation: background-gradient 12s;
	animation-iteration-count: infinite;
	backface-visibility: hidden;
	animation-timing-function: ease-in;

	background: linear-gradient(
		to bottom right,
		var(--bg-gradient-start),
		var(--bg-gradient-end)
	);
}

.text-animated {
	background-image: url(https://i.giphy.com/media/eJoZAwRN9OI5QjthIE/200w.gif) !important;
	background-size: repeat;
	color: rgba(232, 232, 240, 0.3); /* Lighter for dark theme */
	background-clip: text;
	-moz-background-clip: text;
	-webkit-background-clip: text;
}

.light-theme .text-animated {
	color: rgba(0, 0, 0, 0.26); /* Original light theme color */
}

/* Navbar theming */
.navbar {
	background-color: var(--navbar-bg) !important;
}

.navbar-brand {
	color: var(--text-primary) !important;
}

.nav-link {
	color: var(--text-secondary) !important;
}

.nav-link:hover, .nav-link.custom-active {
	color: var(--text-primary) !important;
}

/* Modern switch toggle styling */
.form-switch .form-check-input {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

.form-switch .form-check-input:checked {
	background-color: var(--toggle-bg);
	border-color: var(--toggle-bg);
}

.form-check-label {
	color: var(--text-primary);
	font-size: 0.9rem;
}

/* Text colors for theme awareness */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }

/* Apply theme colors to text elements */
p, h1, h2, h3, h4, h5, h6, i {
	color: var(--text-primary);
}

.lead, li {
	color: var(--text-secondary) !important;
}

/* Border colors for theme awareness */
.border-secondary { border-color: var(--border-color) !important; }

/* Link colors */
a {
	color: var(--link-color) !important;
}

a:hover {
	color: var(--link-hover) !important;
}

#about_me_p {
	text-align: justify;
}


@keyframes background-gradient {
	0%,
	100% {
		background-color: var(--bg-gradient-start);
	}

	25%,
	75% {
		background-color: var(--bg-gradient-end);
	}

	50% {
		background-color: var(--bg-gradient-end);
	}
}

.flex-even {
	flex: 1
}

/* Technology Icons Styling */
.tech-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.5rem 1rem;
	background: var(--card-bg);
	border-radius: 0.5rem;
	border: 2px solid var(--border-color);
	transition: all 0.3s ease;
	min-height: 180px;
}

.tech-icon:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-color: var(--link-color);
}

.tech-icon-svg {
	width: 64px;
	height: 64px;
	fill: var(--text-primary);
	transition: fill 0.3s ease;
}

.tech-icon:hover .tech-icon-svg {
	fill: var(--link-color);
}

.tech-icon-desc {
	margin: 0;
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-primary) !important;
	margin-top: 0.5rem;
}

.tech-icon-detail {
	font-size: 0.8rem;
	color: var(--text-secondary) !important;
}