body {
	color: hsl(0, 0%, 15%);
	background-color: hsl(0, 0%, 95%);
	margin: 0;
}

@media (prefers-contrast: more) {
	body {
		color: black;
		background-color: white;
	}
}

img, video {
	max-width: 100%;
	display: block;
}

article {
	border: solid;
	margin: 0.25em;
	padding: 0.25em;
}

header {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: 1fr 100px auto;
	grid-column-gap: 1em;
	grid-row-gap: 0;
}
header > img:nth-child(1) { grid-area: 1 / 1 / 2 / 3; margin-bottom: 1em; }
header > img:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
header > p:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
header > p:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
header > img:nth-child(2), header > p { margin-left: 1em }

.post {
	display: grid;
	grid-template-columns: 80px 1fr;
	grid-template-rows: 1em auto auto auto;
	grid-column-gap: 0.5em;
	grid-row-gap: 0.5em;
}
.userIcon { grid-area: 1 / 1 / 3 / 2; }
.author { grid-area: 1 / 2 / 2 / 3; }
.datetime { grid-area: 2 / 2 / 3 / 3; }
.text { grid-area: 3 / 1 / 4 / 3; }
.embed { grid-area: 4 / 1 / 5 / 3; }