body {
	max-width: 50%;
	background-image: url("assets/wallpaper.png");
	background-position: left center;
	background-repeat: no-repeat;
}

h1 {
	display: flex;
	gap: 15px;
}

.blog-icon {
	width: 40px;
	height: 40px;
}

#blog-posts {
	margin-left: 55px; /* 40px icon + 15px gap */
}

#blog-posts:has(.blog-post-full) {
	margin-left: 0;
	margin-top: 20px;
}

.post-header {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	margin-bottom: 20px;
}

.post-icon {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}

.title-stripe-wrapper {
	flex: 1;
}

.title-stripe-wrapper h2 {
	margin: 0 0 10px 0;
	font-size: 1.8em;
}

.stripe-bar {
	width: 100%;
	height: 10px;
	background-image: url('assets/stripe_pattern.png');
	background-repeat: repeat-x;
	background-size: 40px 40px;
	animation: moveStripe 1.5s linear infinite;
	transition: opacity 0.2s ease;
}

body:has(a:hover) .stripe-bar {
	opacity: 0.8;
}

.blog-post-full::before {
	display: none;
}

@keyframes moveStripe {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 40px 0;
	}
}

@media (max-width: 1024px) {
	body {
		max-width: 100%;
	}
}