@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideIn {
	from {
		transform: translateX(-10px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes bounceSubtle {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-2px);
	}
}

.gradient-bg {
	background: linear-gradient(135deg, #2f4f4f 0%, #386a6a 100%);
}

.glass-effect {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-item {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-item:hover {
	transform: translateX(4px);
	background: linear-gradient(
		90deg,
		rgba(47, 79, 79, 0.1) 0%,
		transparent 100%
	);
}

.sidebar-item.active {
	background: linear-gradient(
		90deg,
		rgba(47, 79, 79, 0.2) 0%,
		rgba(47, 79, 79, 0.05) 100%
	);
	border-right: 3px solid #2f4f4f;
}

/* Custom scrollbar styles */
.scrollbar-thin {
	scrollbar-width: thin;
}

.scrollbar-thumb-gray-300::-webkit-scrollbar-thumb {
	background-color: #d1d5db;
	border-radius: 0.375rem;
}

.scrollbar-track-gray-100::-webkit-scrollbar-track {
	background-color: #f3f4f6;
}

.hover\:scrollbar-thumb-gray-400:hover::-webkit-scrollbar-thumb {
	background-color: #9ca3af;
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: #f3f4f6;
	border-radius: 0.375rem;
}

::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 0.375rem;
}

::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

.content-section {
	scroll-margin-top: 100px;
}

.mobile-menu-overlay {
	backdrop-filter: blur(5px);
	background: rgba(0, 0, 0, 0.5);
}

.code-block {
	background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
	border: 1px solid #475569;
}

.highlight-box {
	background: linear-gradient(
		135deg,
		rgba(47, 79, 79, 0.1) 0%,
		rgba(56, 106, 106, 0.1) 100%
	);
	border-left: 4px solid #2f4f4f;
}