@font-face {
	font-family: "Public Sans";
	font-weight: 100;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-Thin.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 200;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-ExtraLight.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 300;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-Light.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 400;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-Regular.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 500;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-Medium.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 600;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-SemiBold.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 700;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-Bold.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 800;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-ExtraBold.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 900;
	font-style: normal;
	src: url("/assets/font/PublicSans/PublicSans-Black.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 100;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-ThinItalic.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 200;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-ExtraLightItalic.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 300;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-LightItalic.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 400;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-RegularItalic.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 500;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-MediumItalic.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 600;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-SemiBoldItalic.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 700;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-BoldItalic.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 800;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-ExtraBoldItalic.woff2");
}

@font-face {
	font-family: "Public Sans";
	font-weight: 900;
	font-style: italic;
	src: url("/assets/font/PublicSans/PublicSans-BlackItalic.woff2");
}

:root {
	--bg: #FFF;
	--bg-r1: #FAFAFA;
	--bg-r2: #EEE;

	--fg: #000;
	--fg-r1: #444;
	--fg-r2: #888;
	--fg-r3: #CCC;
}

body {
	background-color: var(--bg);
	color: var(--fg);
	max-width: 60ch;
	margin: 0 auto;
	padding: 0 1rem;
	font-family: "Public Sans", sans-serif;
}

h1, h2, h3 {
	font-weight: normal;
}

main {
	margin: 1rem 0;
}

blockquote {
	border: 1px solid var(--fg-r3);
	background: var(--bg);
	margin: 0;
	padding: 1rem;
	border-radius: 4px;
	border-left-width: 6px;
}

header {
	margin: 1rem 0;
}

a {
	color: unset;
}

a:hover {
	text-decoration: none;
}

hr {
	border: 0.5px solid var(--fg-r3);
	width: 100%;
	margin: 0;
}

div.coc {
	margin: 1rem 0;
}

input[type=text], input[type=password], input[type=number], input[type=submit], label, textarea {
	display: block;
	box-sizing: border-box;
	margin: 0.25rem 0;
}

input[type=text], input[type=password], input[type=number], textarea {
	background: var(--bg);
	width: 100%;
}

button, input[type=text], input[type=password], input[type=number], input[type=submit], textarea {
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	border: 1px solid var(--fg-r3);
	color: unset;
	font-size: unset;
	font-family: unset;
}

button.red {
	background: #C02;
	color: #FFF;
	border-color: #F34;
}

button.red:hover {
	background: #A00;
	color: #FFF;
	border-color: #C02;
}

.notice-private {
	background: var(--bg-r1);
	border-radius: 4px;
	border: 1px solid var(--fg-r3);
	padding: 0.25rem 0.5rem;
	box-sizing: border-box;
}

label {
	font-size: 0.9rem;
	margin-top: 1rem;
}

div.checkbox > label {
	display: inline;
	margin: 0;
	vertical-align: middle;
}

div.checkbox > input {
	margin: 0;
	vertical-align: middle;
}

div.submit {
	display: flex;
	justify-content: end;
	gap: 1rem;
	margin: 1rem 0;
	align-items: center;
}

form #password-help {
	color: var(--fg-r1);
}

button, input[type=submit] {
	background: var(--bg-r1);
}

button:hover, input[type=submit]:hover {
	background: var(--bg-r2);
	border-color: var(--fg-r3);
}

header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

header > a {
	font-weight: bold;
}

header nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

header > nav > ul {
	display: flex;
	flex-direction: row;
	margin: 0;
	gap: 0.5rem;
}

header > nav > ul > li {
	list-style: none;
}

header a, .thread-link {
	color: unset;
	text-decoration: none;
}

header a:hover {
	text-decoration: underline;
}

.thread-link:hover {
	background: var(--bg-r1);
	outline: 1px solid var(--fg-r3);
	border-radius: 4px;
	margin: -0.25rem -0.5rem;
	padding: 0.25rem 0.5rem;
}

.thread-list {
	display:flex;
	flex-direction: column;
	gap: 0.7rem;
}

.thread-date {
	display:flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.thread-date span {
	font-size: 0.8rem;
	flex-shrink: 0;
	color: var(--fg-r2);
}

.thread-link {
	display:flex;
	flex-direction: column;
}

.thread-author {
	font-size: 0.8rem;
	color: var(--fg-r2);
}

.sort {
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
	margin: 1rem 0;
	align-items: end;
}

.row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.post {
	border: 1px solid var(--fg-r3);
	border-radius: 4px;
	margin: 1rem 0;
}

.post-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.25rem 1rem;
	background: var(--bg-r1);
	border-bottom: 1px solid var(--fg-r3);
	border-radius: 4px 4px 0 0;
}

.post-time {
	color: #999;
	text-decoration: none;
}

.post-content {
	padding: 1rem;
}

.post-content :last-child {
	margin-bottom: 0;
}

.post-content :first-child {
	margin-top: 0;
}

.edit-preview {
	padding: 1rem;
	border: 1px dashed var(--fg-r3);
	border-radius: 8px;
}

.edit-preview :first-child {
	margin-top: 0;
}

.edit-preview :last-child {
	margin-bottom: 0;
}

.mod-log {
	border: 1px solid var(--fg-r3);
	border-radius: 4px;
	padding: 0;
}

.mod-log code {
	font-family: unset;
	font-variant-numeric: tabular-nums;
	color: var(--fg-r1);
	font-size: 0.8rem;
	display: block;
	float: right;
}

.mod-log li {
	list-style: none;
	padding: 0.25rem 0.5rem;
	border-bottom: 1px solid var(--fg-r3);
}

.mod-log li:last-child {
	border-bottom: none;
}

.mod-log li:nth-child(even) {
	background-color: var(--bg-r1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000;
		--bg-r1: #111;
		--bg-r2: #222;

		--fg: #FFF;
		--fg-r1: #CCC;
		--fg-r2: #AAA;
		--fg-r3: #333;
	}
}

@media (pointer:coarse) {
	button, input[type=text], input[type=password], input[type=number], input[type=submit], textarea {
		padding: 0.5rem 1rem;
	}
}