* {
	box-sizing: border-box;
	margin: 0;
	font-family: sans-serif;
	line-height: 1.5;

	/* ripping off masto */
	--border-color: #313144;
	--background: #181821;
	--background2: #20202c;
	--foreground: #fff;
	--foreground2: #c4c4de;
	--links: #9494ff;
}

body {
	max-width: 80ch;
	padding-bottom: 100vh; /* don't jump around when collapsing people near the bottom */
	margin: 1em auto;
	background: var(--background);
	color: var(--foreground);
}

.acct {
	margin-top: .75em;
	margin-bottom: .75em;
	border: 1px solid var(--border-color);
	background: var(--background2);
}

.acct__header {
	display: flex;
	align-items: center;

	background: var(--background2);
	position: sticky;
	top: 0;

	border-bottom: 1px solid var(--border-color);
	margin-bottom: -1px;

	cursor: pointer;
	user-select: none;
}

.acct__header .acct__username {
	margin-left: 1em;

	/* Mimic the default <details> style. */
	display: list-item;
	list-style: disclosure-closed inside;
}

.acct[open] .acct__header .acct__username {
	list-style: disclosure-open inside;
}

.acct__counts {
	margin-left: auto;
	margin-right: 1ch;
}

.avatar {
	width:  3em;
	height: 3em;
	border: 1px solid var(--border-color);
	margin: -1px;
	background: var(--background2);
}

.avatar-reblog {
	margin-right: 8px;
	border-radius: 8px;
}

pre {
	white-space: pre-wrap;
}

.toot {
	background: var(--background);
	border: 1px solid var(--border-color);
	/* padding: .2em 1em; */
	padding: 0;
	overflow: auto;
	margin: .75em;
}

.toot__body {
	margin: .2em 1em;
}

.toot__spoiler {
	cursor: pointer;
	display: list-item inline;
	list-style: disclosure-closed inside;
	margin-left: 1em;
}

.toot__spoiler_open {
	list-style: disclosure-open inside;
}


.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.flex-basis-0 { flex-basis: 0; }
.flex-column { flex-direction: column; }
.flex-align-center { align-items: center; }

a { color: var(--links); }

.px-1em {
	padding-left: 1em;
	padding-right: 1em;
}
.pr-1em { padding-right: 1em; }
.py-025em {
	padding-top: .25em;
	padding-bottom: .25em;
}
.pt-1em { padding-top: 1em; }

.mb-05em { margin-bottom: .5em; }

.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-bottom.border-sunk { margin-bottom: -1px; }

.fg2 { color: var(--foreground2); }

/* This class is already defined by, well, Material Icons.
 * I'm just making some small changes. */
.material-icons {
	font-size: inherit !important;
	line-height: inherit !important;
	user-select: none;
	vertical-align: bottom;
}

.link-stealth { text-decoration: none; }
.link-stealth:hover { text-decoration: underline; }

hr { border: 1px solid var(--border-color); }

.text-center { text-align: center; }
.text-right { text-align: right; }

.cursor-pointer { cursor: pointer; }

.form-label {
	display: block;
	font-size: .8rem;
}

.mw-40ch {
	max-width: 40ch;
	margin: auto;
}
.w-100 { width: 100%; }

img { max-width: 100%; }