*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
	/* Colors */
	--color-bg: #1e1e2e;
	--color-text: #cdd6f4;
	--color-muted: #a6adc8;
	--color-accent: #b4befe;
	--color-accent-dark: #b4befe;
	--color-border: #313244;
	--color-hover: #313244;
	--color-code-bg: #11111b;
	--color-card-bg: #11111b;
	--color-shadow: rgba(0,0,0,0.1);
	--color-shadow-hover: rgba(0,0,0,0.15);
	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	/* Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-full: 9999px;
	/* Font sizes */
	--text-sm: 1rem;
	--text-base: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;
	--text-3xl: 2.5rem;
	/* Layout */
	--max-width: 1000px;
}

body.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--color-bg);
}

/* Make main flexible */
.main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem;
}


/** Intro */
.intro {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-xs) var(--space-md);
}

.intro-header {
	text-align: center;
	margin-bottom: var(--space-md);
    color: var(--color-text);
}

.intro-title {
	font-size: var(--text-3xl);
	font-weight: bold;
	margin-bottom: var(--space-sm);
}

.intro-subtitle {
	font-size: var(--text-base);
	color: var(--color-muted);
}

.intro-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

@media (min-width: 1024px) {
	.intro-layout {
		flex-direction: row;
		align-items: flex-start;
	}
}

.intro-profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	flex: 1;
}

.profile-image {
	width: 128px;
	height: 128px;
	overflow: hidden;
	border-radius: var(--radius-full);
	border: 2px solid var(--color-shadow-hover);
	box-shadow: 0 4px 6px var(--color-shadow);
}

.profile-image img {
	width: 100%;
	height: 100%;
}

.tech-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	text-align: center;
}

.tech-item {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	/* border-radius: ; */
	font-weight: 500;
	color: var(--color-muted);
	background-color: var(--color-card-bg);
	transition: background-color 0.2s ease;
}

.tech-item:hover {
	background-color: var(--color-hover);
}

/** navigation */

.main-nav {
	width: 100%;
	text-align: center;
	padding: var(--space-sm) 0;
    background-color: var(--color-code-bg);
	border-bottom: 1px solid var(--color-border);
}

.nav-link {
	margin: 0 var(--space-md);
	font-weight: 500;
	color: var(--color-muted);
	position: relative;
	text-decoration: none;
	transition: color 0.2s ease;
}

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

.nav-link.active {
	color: var(--color-accent-dark);
}

/** footer */

.footer {
  padding: 2rem 1rem;
  background: var(--color-code-bg);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: center;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.social-links {
  margin-top: 0.5rem;
}

.social-links a {
  margin: 0 0.75rem;
  color: var(--color-accent);
  text-decoration: none;
}

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


/** blog */

.blog-container {
	width: 100%;
	padding: var(--space-lg) var(--space-md);
}

.post-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.post-card {
	background-color: var(--color-card-bg);
	padding: var(--space-sm);
	margin: var(--space-sm) auto;
	max-width: var(--max-width);
	box-shadow: 0 1px 4px var(--color-shadow);
	transition: box-shadow 0.2s ease;
}

.post-card:hover {
	box-shadow: 0 4px 12px var(--color-shadow-hover);
}

.post-title {
	font-size: var(--space-lg);
	font-weight: bold;
	color: var(--color-text);
	margin-bottom: var(--space-md);
	transition: color 0.2s ease;
}

.post-link:hover .post-title {
	color: var(--color-accent);
}

.post-desc {
	font-size: var(--text-base);
	line-height: 1.75rem;
	color: var(--color-muted);
}

.post-num-comments {
	font-size: var(--text-sm);
	color: var(--color-muted);
	margin-top: var(--space-sm);
	color: var(--color-muted);
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

.page-button {
	background-color: var(--color-code-bg);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	color: var(--color-text);
	text-decoration: none;
	font-weight: 500;
	transition: background 0.2s ease;
}

.page-button:hover {
	background-color: var(--color-bg);
}

.page-button.disabled {
	background-color: var(--color-card-bg);
	color: var(--color-muted);
	cursor: not-allowed;
}

.page-label {
	color: var(--color-text);
}

/** post */

.post-article {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  color: var(--color-text);
  width: 100%;
}

/** comment section */
.comment-section {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
}

.comment-section h2 {
	font-size: var(--text-xl);
	margin-bottom: 1rem;
	color: var(--color-text);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.comment-form input,
.comment-form textarea {
	background-color: var(--color-card-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-sm);
	font-size: var(--text-base);
}

.comment-form button {
	align-self: flex-start;
	background-color: var(--color-accent);
	color: var(--color-bg);
	border: none;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.comment-form button:hover {
	background-color: var(--color-accent-dark);
}


/** markdown */

article {
	flex: 1;
	padding: 0 var(--space-md);
	color: var(--color-text);
}

h1 {
	font-size: var(--text-3xl);
	font-weight: bold;
	margin-bottom: var(--space-md);
}

h2 {
	font-size: var(--text-xl);
	margin-top: var(--space-lg);
	margin-bottom: 0.75rem;
}

p {
	font-size: 1.var(--space-md);
	line-height: 1.75rem;
	margin-bottom: var(--space-md);
}

code {
	background-color: var(--color-code-bg);
	/* padding: var(--radius-sm) var(--space-sm); */
	border-radius: var(--radius-sm);
    max-width: 100%;
}

pre {
    background: var(--color-code-bg);
    padding: var(--space-md);
    overflow-x: auto;
    max-width: 100%;
    border-radius: var(--space-sm);
}

article img {
	max-width: 100%;
	height: auto;
	margin: var(--space-md) 0;
	border-radius: var(--space-sm);
}

img {
    max-width: 100%
}