/* Match programming language icon style for user-img-marquee images */

/* Small image for courses section */
.course-img-small {
	width: 38px;
	height: 38px;
	object-fit: cover;
	border-radius: 8px;
	margin-left: 8px;
	vertical-align: middle;
	box-shadow: 0 2px 8px #6a00f433;
}
html {
	scroll-behavior: smooth;
}
.user-img-marquee-img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid #6a00f4;
	box-shadow: 0 4px 16px #6a00f433;
	background: #fff;
	margin-left: 0;
	transition: box-shadow 0.3s, transform 0.3s;
}
.user-img-marquee-img:hover {
	box-shadow: 0 8px 32px #c084fc99, 0 0 0 2px #6a00f422;
	transform: scale(1.08) rotate(-2deg);
}
/* Full-page programming languages marquee */
.marquee-fullpage-container {
	width: 100vw;
	overflow: hidden;
	background: #12002f;
	padding: 22px 0 18px 0;
	box-shadow: 0 4px 32px #6a00f433;
	margin-bottom: 32px;
	position: relative;
	z-index: 10;
}
.marquee-fullpage {
	display: flex;
	align-items: center;
	gap: 60px;
	font-size: 2.2rem;
	font-weight: 800;
	color: #c084fc;
	white-space: nowrap;
	animation: marquee-move-full 18s linear infinite;
}
@keyframes marquee-move-full {
	0% { transform: translateX(100vw); }
	100% { transform: translateX(-100vw); }
}
.lang-icon-big {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 8px 32px rgba(106,0,244,0.22);
	margin-left: 40px;
	border: 6px solid #6a00f4;
	animation: hero-img-bounce-in 1.2s cubic-bezier(.77,0,.18,1) 0.4s both;
}

@keyframes hero-img-bounce-in {
	0% {
		opacity: 0;
		transform: translateX(120px) scale(0.7);
	}
	60% {
		opacity: 1;
		transform: translateX(-20px) scale(1.08);
	}
	80% {
		transform: translateX(10px) scale(0.98);
	}
	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}
.lang-icon-big:hover {
	transform: scale(1.13) rotate(-6deg);
	box-shadow: 0 4px 24px #6a00f4aa;
}
/* Featured Projects - Larger text and card, with animation */
.projects .project-list {
	gap: 2.5rem;
}
.project-card {
	font-size: 1.25rem;
	min-height: 180px;
	padding: 38px 32px;
	transition: transform 0.5s cubic-bezier(.77,0,.18,1), box-shadow 0.5s, background 0.5s;
	background: linear-gradient(135deg, #1a0036 60%, #2d0a4a 100%);
	border: 3px solid;
	border-image: linear-gradient(120deg, #c084fc 10%, #6a00f4 90%) 1;
	border-radius: 18px;
	box-shadow: 0 4px 32px #6a00f433, 0 0 0 2px #6a00f422;
	opacity: 0;
	animation-fill-mode: forwards;
}
.project-card:nth-child(1) {
	transform: translateX(-80px) scale(0.96) rotate(-2deg);
	animation: project-card-fadein-left 1.1s cubic-bezier(.77,0,.18,1) 0.2s forwards;
}
.project-card:nth-child(2) {
	transform: translateX(80px) scale(0.96) rotate(2deg);
	animation: project-card-fadein-right 1.1s cubic-bezier(.77,0,.18,1) 0.5s forwards;
}
.project-card:nth-child(3) {
	transform: translateY(80px) scale(0.96) rotate(-1deg);
	animation: project-card-fadein-bottom 1.1s cubic-bezier(.77,0,.18,1) 0.8s forwards;
}
@keyframes project-card-fadein-left {
	0% { opacity: 0; transform: translateX(-80px) scale(0.96) rotate(-2deg); }
	60% { opacity: 1; transform: translateX(10px) scale(1.04) rotate(1deg); }
	100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}
@keyframes project-card-fadein-right {
	0% { opacity: 0; transform: translateX(80px) scale(0.96) rotate(2deg); }
	60% { opacity: 1; transform: translateX(-10px) scale(1.04) rotate(-1deg); }
	100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}
@keyframes project-card-fadein-bottom {
	0% { opacity: 0; transform: translateY(80px) scale(0.96) rotate(-1deg); }
	60% { opacity: 1; transform: translateY(-10px) scale(1.04) rotate(1deg); }
	100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.project-card:hover {
	transform: scale(1.045) translateY(-8px) rotate(-1deg);
	box-shadow: 0 8px 48px #c084fc99, 0 0 16px 4px #6a00f4cc;
	border-color: #fff;
}
.projects h2 {
	font-size: 2.5rem;
}

/* Programming languages marquee */
.marquee-container {
	overflow: hidden;
	width: 100%;
	margin: 24px 0 0 0;
	background: #181028;
	border-radius: 12px;
	box-shadow: 0 2px 12px #6a00f41a;
	padding: 10px 0;
}
@keyframes marquee-move {
	0% { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}
.marquee .lang-icon {
	width: 38px;
	height: 38px;
	margin: 0 10px 0 0;
	vertical-align: middle;
}
/* Programming language icons */
.lang-icon {
	width: 28px;
	height: 28px;
	vertical-align: middle;
	margin-right: 7px;
	margin-bottom: 2px;
	border-radius: 6px;
	background: #fff1;
	box-shadow: 0 1px 4px rgba(106,0,244,0.10);
	object-fit: contain;
	transition: transform 0.2s;
}
.lang-icon:hover {
	transform: scale(1.13) rotate(-6deg);
	box-shadow: 0 2px 12px #c084fc44;
}
/* Hero section animations */
.hero-content {
	opacity: 0;
	transform: translateX(-60px);
	animation: slideInLeft 1.1s cubic-bezier(.77,0,.18,1) 0.2s forwards;
}
.hero-img {
	width: 600px;
	height: 600px;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 8px 32px rgba(106,0,244,0.22);
	margin-left: 40px;
	border: 18px solid #6a00f4;
	animation: hero-img-bounce-in 1.2s cubic-bezier(.77,0,.18,1) 0.4s both;
}
@keyframes slideInLeft {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes slideInRight {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
/* Dark/Light mode toggle button */
.mode-toggle {
	background: none;
	border: none;
	font-size: 1.7rem;
	cursor: pointer;
	margin-left: 2rem;
	color: #fff;
	transition: color 0.2s;
}
.mode-toggle:hover {
	color: #222;
}

/* Dark mode styles */
body.dark-mode {
	background: #181a1b;
	color: #e0e7ef;
}
.dark-mode .header {
	background: linear-gradient(120deg, #232526 0%, #414345 100%);
	color: #e0e7ef;
}
.dark-mode .navbar {
	color: #e0e7ef;
}
.dark-mode .nav-links a {
	color: #e0e7ef;
}
.dark-mode .nav-links a:hover {
	color: #4f8cff;
}
.dark-mode .logo {
	color: #fff;
}
.dark-mode .hero-content h1 {
	color: #fff;
}
.dark-mode .subtitle {
	color: #b5c7e6;
}
.dark-mode .btn {
	background: #4f8cff;
	color: #fff;
}
.dark-mode .btn:hover {
	background: #222;
	color: #fff;
}
.dark-mode .about, .dark-mode .projects, .dark-mode .contact {
	background: #232526;
	color: #e0e7ef;
	box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.dark-mode .project-card {
	background: #181a1b;
	color: #e0e7ef;
}
.dark-mode .footer {
	background: #181a1b;
	color: #b5c7e6;
}
.dark-mode .contact-form input, .dark-mode .contact-form textarea {
	background: #232526;
	color: #e0e7ef;
	border: 1px solid #414345;
}
/* Google Fonts */
body {
	font-family: 'Montserrat', Arial, sans-serif;
	margin: 0;
	background: #0a0a0a;
	color: #e0e0ff;
}

.header {
	background: linear-gradient(120deg, #6a00f4 0%, #0a0a0a 100%);
	color: #fff;
	padding-bottom: 40px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 8vw 0 8vw;
}
.logo {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 2px;
}
.nav-links {
	list-style: none;
	display: flex;
	gap: 2rem;
	margin: 0;
}
.nav-links a {
	color: #c084fc;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}
.nav-links a:hover {
	color: #fff;
}

.hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40px 8vw 0 8vw;
	flex-wrap: wrap;
}
.hero-content {
	max-width: 500px;
}
.hero-content h1 {
	font-size: 3rem;
	margin: 0 0 10px 0;
	font-weight: 700;
}
.subtitle {
	font-size: 1.3rem;
	margin-bottom: 24px;
	color: #e0e7ef;
}
.btn {
	background: #6a00f4;
	color: #fff;
	padding: 12px 32px;
	border: none;
	border-radius: 30px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s;
}
.btn:hover {
	background: #c084fc;
	color: #0a0a0a;
}
.hero-img {
	width: 220px;
	height: 220px;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 4px 24px rgba(106,0,244,0.18);
	border: 4px solid #6a00f4;
	margin-left: 40px;
}

main {
	padding: 40px 8vw;
}
.about, .projects, .contact {
	margin-bottom: 60px;
	background: #181028;
	border-radius: 18px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.04);
	padding: 32px;
}
.about h2, .projects h2, .contact h2 {
	margin-top: 0;
	color: #c084fc;
	font-size: 2rem;
}
.project-list {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}
.project-card {
	background: #12002f;
	border: 1.5px solid #6a00f4;
	border-radius: 12px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.04);
	padding: 24px;
	flex: 1 1 220px;
	min-width: 220px;
	max-width: 320px;
	margin-bottom: 16px;
}
.project-card h3 {
	margin-top: 0;
	color: #c084fc;
}
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 400px;
}
.contact-form input, .contact-form textarea {
	padding: 12px;
	border: 1px solid #e0e7ef;
	border-radius: 8px;
	font-size: 1rem;
	resize: none;
}
.contact-form button {
	align-self: flex-start;
}
.footer {
	text-align: center;
	padding: 24px 0;
	background: #12002f;
	color: #c084fc;
	font-size: 1rem;
	border-radius: 0 0 18px 18px;
	margin-top: 40px;
}
@media (max-width: 900px) {
	.hero {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero-img {
		margin: 32px 0 0 0;
	}
	.project-list {
		flex-direction: column;
	}
}