source ⟩ hypertext ⟩ public ⟩ media ⟩ media.css

:root {
	--background: #090111;
	--text: #fffbf0;
	--accent: oklch(from #cf00be calc(l + 0.35) c h);
}

body {
	font-family: var(--sans-serif);
}

h1 {
	color: var(--text);

	& i {
		color: var(--accent);
	}
}

.entry {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: "timestamp header" "timestamp review";

	margin-block: 2em;

	& time.timestamp {
		grid-area: timestamp;

		writing-mode: vertical-lr;

		color: oklch(from var(--accent) calc(l + 0.35) c h);
	}

	& h2.entry-head {
		display: grid;
		align-content: center;
		grid-template-columns: auto 1fr;
		grid-area: header;

		margin-block: 0;

		color: white;
		font-size: 1em;
		font-weight: normal;

		& a.rating-bullet {
			display: flex;
			align-items: center;
			justify-content: center;
			
			min-inline-size: 1.5rem;
			min-block-size: 1.5rem;

			font-size: 1.2em;
			font-weight: bold;
			text-align: center;

			background-color: var(--accent);
		}

		& div.work-title {
			display: flex;
			align-items: center;

			padding-inline-start: 1ch;

			background-color: color-mix(
				in srgb,
				var(--accent) 60%,
				transparent
			);
			border-block-start: 1px solid var(--accent);
			border-inline-end: 1px solid var(--accent);

			& b,
			& strong {
				color: inherit;
			}
		}
	}

	& .review {
		grid-area: review;

		padding: 1em;

		background-color: color-mix(in srgb, var(--accent) 25%, transparent);
		border: 1px solid var(--accent);
		border-block-start: none;

		& p {
			margin-block-start: 0;
		}

		& b,
		& a,
		& strong {
			color: oklch(from var(--accent) calc(l + 0.35) c h);
		}
	}
}

img.align-start {
	max-inline-size: 33%;
	margin-inline-end: 1em;
}

img.align-end {
	max-inline-size: 33%;
	margin-inline-start: 1em;
}

.rate11 {
	--accent: #cf00be;
}
.rate10 {
	--accent: #7c00cf;
}
.rate9 {
	--accent: #3b00df;
}
.rate8 {
	--accent: #00849b;
}
.rate7 {
	--accent: #007a2f;
}
.rate6 {
	--accent: #55a000;
}
.rate5 {
	--accent: #aa8b00;
}
.rate4 {
	--accent: #cf7c00;
}
.rate3 {
	--accent: #cf4200;
}
.rate2 {
	--accent: #db0700;
}
.rate1 {
	--accent: #790014;
}
.rate0 {
	--accent: #130002;
}