html {
	background: #222;
	color: #ddd;
	height: 100%;
}
body {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;	
}
a {
	text-decoration: none;
}
a:visited , a:active , a:link {
	color: #ddd;
}
header {
	padding: 0.5em;
}
footer {
	padding: 1em;
}
.content, p {
	text-align: justify;
}
/* header */
header {
	display: flex;
	justify-content: space-between;
	align-items: anchor-center;
	border-bottom: 1px #444 solid;
	/* sticky */
	background: #222;
	position: sticky;
	top: 0;
	z-index: 9;
}
header #brand {
	display: flex;
	align-items: anchor-center;
}	
header #brand img {
	margin-left: 5px;
	max-width: 50px;
	height: auto;
}
header #brand b {
	font-size: x-large;
}
.about {
	font-size: small;
	background: #444;
	width: 3em;
	height: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* post */
.cat-btn::before {
	content: "| ";
	font-weight: bolder;
	color: red;
}


.related-posts {
    display: flex;
    flex-direction: column;
    gap: 5pt;
    border-block: 1pt dashed;
    padding-block: 5pt;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	padding-top: 1em;	
}
.tag-list a {
	padding: 5px;
	border: #ddd solid 1pt;
	font-size: smaller;
}

/* main */
main {
	padding-block: 1em;
	width: 95vw;
	margin-inline: auto;
}
#home-cat {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5em;
	padding-bottom: 1em;
	/* border: #ddd solid; */
	justify-items: center;
}
#home-cat div {
	border: #ddd solid 1pt;
	width: 100%;
	text-align: center;
	padding-block: 1em;
}

/* archive */
.post-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
}
@media (min-width: 768px) {
	header {
		padding-inline: 7em;
		padding-block: 0.3em;
	}
	.post-list {
		grid-template-columns: repeat(4, 1fr); 	}
	main {
		max-width: 80vw;
	}
}
.post-list div {
	padding: 5px;
	border-right: 4px #444 solid;
	align-content: center;
}
.cat-btn i {
	font-size: xx-small;
}
/* pagination */
#paginate {
	padding-block: 1em;
	justify-self: center;
}
#paginate a {
	padding-inline: 1em;
}
#paginate a.current {
	color: #444;
	pointer-events: none;
}

/* footer */
footer {
	justify-items: anchor-center;
	border-top: 1px #444 solid;
}
.cat-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.cat-list :not(:first-child)::before {
	content: "|";
	color: red;
	padding-inline-start: 2px;
}
#copyright , #copyright a {
	padding-top: 1em;
	font-size: xx-small;
	color: #444 !important;
}