:root {
		--bg-color: #0f172a;
		--card-bg: #1e293b;
		--text-color: #f8fafc;
		--text-muted: #94a3b8;
		--accent-color: #38bdf8;
		--accent-hover: #0284c7;
	}

	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	body {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background-color: var(--bg-color);
		color: var(--text-color);
		line-height: 1.6;
		padding-bottom: 50px;
	}

	header {
		background-color: rgba(15, 23, 42, 0.9);
		position: sticky;
		top: 0;
		backdrop-filter: blur(8px);
		border-bottom: 1px solid #334155;
		z-index: 100;
	}

	nav {
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
	}
	
	.logo-container {
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}

	.logo {
		font-weight: bold;
		font-size: 1.2rem;
		color: var(--accent-color);
	}
	
	.nav-logo {
		height: 38px;
		width: 38px;
	}

	.nav-links {
		list-style: none;
		display: flex;
		gap: 1.5rem;
	}

	.nav-links a {
		color: var(--text-muted);
		text-decoration: none;
		transition: color 0.2s;
	}

	.nav-links a:hover {
		color: var(--accent-color);
	}

	/* Container */
	.container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 2rem;
	}

	section {
		margin-bottom: 4rem;
	}

	h2 {
		font-size: 1.8rem;
		color: var(--accent-color);
		margin-bottom: 1.5rem;
		border-bottom: 2px solid #334155;
		padding-bottom: 0.5rem;
	}

	/* Hero Section */
	.hero {
		padding: 3rem 0;
	}

	.hero h1 {
		font-size: 2.5rem;
		margin-bottom: 0.5rem;
	}

	.hero p {
		font-size: 1.2rem;
		color: var(--text-muted);
	}

	/* About Section */
	.skills-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 1rem;
		list-style: none;
	}

	.skills-list li {
		background-color: #334155;
		color: var(--accent-color);
		padding: 0.3rem 0.8rem;
		border-radius: 15px;
		font-size: 0.9rem;
	}

	/* Blog Section */
	.blog-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 1.5rem;
	}

	.blog-card {
		background-color: var(--card-bg);
		border: 1px solid #334155;
		border-radius: 8px;
		padding: 1.5rem;
		transition: transform 0.2s, border-color 0.2s;
	}

	.blog-card:hover {
		transform: translateY(-4px);
		border-color: var(--accent-color);
	}

	.blog-date {
		font-size: 0.85rem;
		color: var(--text-muted);
		margin-bottom: 0.5rem;
	}

	.blog-card h3 {
		margin-bottom: 0.5rem;
	}

	.blog-card p {
		color: var(--text-muted);
		font-size: 0.95rem;
		margin-bottom: 1rem;
	}

	.read-more {
		color: var(--accent-color);
		text-decoration: none;
		font-weight: bold;
		font-size: 0.9rem;
	}

	/* Footer */
	footer {
		text-align: center;
		color: var(--text-muted);
		font-size: 0.9rem;
		margin-top: 2rem;
	}

	footer a {
		color: var(--accent-color);
		text-decoration: none;
	}