:root {
  --color-text: black;
  --color-back: grey;
  --color-bubble-bg: lightgrey;
  --color-bubble-hvr: darkgrey;
}

@media (prefers-color-scheme: dark) {
  :root {
	  --color-text: white;
	  --color-back: #202020;
	  --color-bubble-bg: #404040;
	  --color-bubble-hvr: #808080;
  }
}

body {
	background-color: var(--color-back);
}

div.center {
	top: 50%;
	left: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

a.main-link {
	color: var(--color-text);
	text-decoration: none;
	background-color: var(--color-bubble-bg);
	padding: .5em;
	border-radius: .5em;
}

a.main-link:hover {
	background-color: var(--color-bubble-hvr);
}

div.container {
	max-width: 1000px;
	margin: auto;
}

div.post {
	color: var(--color-text);
	font-family: monospace;
	background-color: var(--color-bubble-bg);
	padding: .5em;
	margin: .5em;
	margin-left: 1em;
	margin-right: 1em;
	border-radius: .5em;
	white-space: pre-wrap;
	max-width: 1000px;
}

div.post:first-of-type {
   margin-top: 1.5em;
}

.to-right {
	margin-left: auto;
	margin-right: 0;
	width: fit-content;
	display: block;
}