:root { --bg-color: #fff; --text-color: #000; --border-color: #000; --info-color: #333; --remarks-color: #666; }

* { box-sizing: border-box; }

body { font-family: "PT Serif", Georgia, "Times New Roman", serif; font-display: optional; margin: 8px; background-color: var(--bg-color); color: var(--text-color); }

a, a:visited { color: inherit; }

.cover-wrapper { height: 100vh; width: 100%; overflow: hidden; }

.cover { object-fit: cover; object-position: 90% center; height: 100%; width: 100%; }

.about-illustration { max-width: 100%; width: 400px; }

.post-columns { display: flex; flex-direction: row; flex-flow: wrap; margin: 0 auto; width: 1000px; max-width: 100vw; }

.main-column { flex: 1 1 450px; max-width: 600px; }

.main-column > * { margin: 72px 16px 16px; }

.main-column > *:last-child { margin-bottom: 72px; }

.title { margin: 24px 0 8px; }

.date { font-size: 14px; }

.author { margin: 8px 0; font-family: Verdana, Arial, sans-serif; font-size: 12px; }

.other-column { flex: 1 0 300px; max-width: 400px; }

.posts { margin: 72px 16px; border-left: 1px solid var(--border-color); padding: 16px 0; }

.main-column-wide { width: 650px; max-width: 100%; }

.main-column-wide > * { margin: 72px 16px 16px; }

.main-column-wide > *:last-child { margin-bottom: 72px; }

.guestbook form { margin-bottom: 40px; }
.guestbook form > div { margin: 0.5rem 0; }
.guestbook input, .guestbook textarea { width: 100%; border: 1px solid #ccc; padding: 0.5em; font-size: 1rem; font-family: inherit; }
.guestbook textarea { height: 4rem; resize: none; }
.guestbook .error { color: red; display: none; }
.guestbook .info { color: var(--info-color); display: none; }
.guestbook .entry { margin: 24px 0; }
.guestbook .name-timestamp { display: flex; flex-direction: row; }
.guestbook .name-timestamp .name { flex: 1 0 auto; }
.guestbook .remarks { color: var(--remarks-color); margin: 6px 0; }
.guestbook button:hover { cursor: pointer; }
.guestbook .entry.deleted { opacity: 0.5; }
.guestbook .entry.needs-approval { background: #fff2be; }

@media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --text-color: #eee; --border-color: #eee; --info-color: #ccc; --remarks-color: #999; } }
h2 { margin-top: 40px; }