@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Oxygen+Mono&display=swap');

:root {
	/* palette */
	  /* greys */
	--p-black:        #333333;
	--p-grey0:        #414141;
	--p-grey1:        #4a4a4a;
	--p-grey2:        #4f4f4f;
	--p-grey3:        #5c5c5c;
	--p-grey4:        #5f5f5f;
	--p-white:        #e7e7e7;
	  /* rainbow */
	--p-red:          #faa; /* == light red */
	--p-orange:       #fa7;
	--p-yellow:       #ffa; /* == light-orange */
	--p-teal:         #7fa;
	--p-green:        #af7;
	--p-blue:         #7af;
	--p-purple:       #a7f;
	--p-pink:         #f7a;
	  /* light rainbow */
	--p-light-red:    #faa;
	--p-light-blue:   #aaf;
	--p-light-green:  #afa;
	--p-light-orange: #ffa; /* == yellow */
	--p-light-purple: #faf;
	--p-light-blue:   #aff;

	/* colours */
	--c-bg:            var(--p-black);
	--c-panel-bg:      var(--p-grey0);
	--c-panel-border:  var(--p-grey2);
	--c-panel2-bg:     var(--p-grey1);
	--c-panel2-border: var(--p-grey3);
	--c-panel3-bg:     var(--p-grey2);
	--c-panel3-border: var(--p-grey4);
	--c-fg:            var(--p-white);
	--c-nsfw-border:   var(--p-orange);
	--c-link:          var(--p-blue);
	--c-link-hover:    var(--p-light-blue);
	--c-accent:        var(--p-light-green);
	--c-notify-ok:     var(--p-light-green);
	--c-notify-error:  var(--p-light-red);

	/* text */
	--t-font: 'Onest', Arial, serif;
	--t-post-font: Garamond, 'Times New Roman', var(--t-font);
	--t-mono-font: 'Oxygen Mono', monospace;
	--t-h-font: 'Oxygen Mono', var(--t-post-font);
	--t-font-weight: 400;
	--t-font-style: normal;
	--t-font-size: 20px;

	/* layout */
	--l-body-padding: 16px;
	--l-body-gap: 12px;
	--l-body-width: 75vw;
	--l-border-width: 2px;
	--l-border-style: solid;
	--l-border-radius: 0px;
}

html {
	padding: 0;
	offset: 0;
	margin: 0;

	width: 100vw;
	overflow-x: hidden;

	display: flex;
	flex-direction: column;
	align-items: center;

	background-color: var(--c-bg);
	color: var(--c-fg);

	font-family: var(--t-font);
	font-weight: var(--t-font-weight);
	font-style: var(--t-font-style);
	font-size: var(--t-font-size);
}

body {
	padding: var(--l-body-padding) 0 var(--l-body-padding) 0;
	offset: 0;
	margin: 0;
	width: var(--l-body-width);
}

header {
	padding-bottom: var(--l-body-padding);
}

footer {
	padding-top: var(--l-body-padding);
}

main {
	padding: var(--l-body-padding);
	background-color: var(--c-panel-bg);
	border: var(--l-border-width) var(--l-border-style) var(--c-panel-border);
	border-radius: var(--l-border-radius);

	display: flex;
	flex-direction: column;
	gap: var(--l-body-gap);
}

form {
	display: flex;
	flex-direction: column;
	gap: var(--l-body-gap);
}

button:hover {
	cursor: pointer;
}

input,
textarea,
button {
	background-color: var(--c-panel-bg);
	color: var(--c-fg);

	border: var(--l-border-width) var(--l-border-style) var(--c-accent);
	border-radius: var(--l-border-radius);
	padding: 6px;

	font-family: var(--t-font);
}

input:hover,
textarea:hover,
button:hover {
	border-color: var(--c-fg);
}

input:focus,
textarea:focus,
button:focus {
	background-color: var(--c-accent);
	color: var(--c-bg);
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

h1, header, footer {
	font-family: var(--t-h-font);
}

a {
	color: var(--c-link);
	transition: 0.15s linear color;
}

a:hover {
	color: var(--c-link-hover);
}

hr {
	width: 100%;
}

pre {
	font-family: var(--t-mono-font);
}

.post {
	border: none;
	border-left: var(--l-border-width) var(--l-border-style) var(--c-fg);
}

.post>pre {
	font-family: var(--t-post-font);
}

.post + .post,
.notification + .notification {
	margin-top: 18px;
}

form:not(.form-inline),
#recent-posts,
#pinned-posts {
	padding: 16px 24px 16px 24px;
	background-color: var(--c-panel2-bg);
	border: var(--l-border-width) var(--l-border-style) var(--c-panel2-border);
	border-radius: var(--l-border-radius);
}

#errors:empty {
	display: none;
	visibility: hidden;
}

#errors {
	display: flex;
	flex-direction: column;
	gap: var(--l-body-gap);
}

#errors>p {
	background-color: var(--c-panel3-bg);
	border: var(--l-border-width) var(--l-border-style) var(--c-panel3-border);
	border-radius: var(--l-border-radius);

	padding: 8px;
	width: calc(100% - 16px);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

#errors>p>button {
	border-color: inherit;
	flex-grow: 0;
}

#errors>p>button:hover {
	border-color: var(--c-fg);
}

#errors>p>span {
	flex-grow: 1;
}

#errors>p.ok {
	border-color: var(--c-notify-ok);
}

#errors>p.error {
	border-color: var(--c-notify-error);
}