blog-post[hidden] {
	display: none;
}

blog-post {
	display: block;
}

blog-post + blog-post {
	margin-top: 2em;
}

@layer post-tags {
	post-tag > a {
		position: relative;
		text-decoration: none;
		color: inherit;
		padding: .2em;
		padding-left: 1.2em;
		transition: all .3s;
	}

	post-tag > a::before, post-tag > a::after {
		z-index: -1;
		display: block;
		content: '';
		border-radius: .2em;
		top: .4em;
		left: .2em;
		width: .6em;
		height: .6em;
		position: absolute;
		background: var(--color);
		transition: all .3s;
	}

	post-tag > a:hover {
		color: white;
	}

	post-tag > a:hover::before {
		display: block;
		content: '';
		border-radius: .2em;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		background: var(--color);
	}

	post-tag > a:hover::after {
		background: color-mix(in srgb, var(--color) 60%, white);
	}
}