:root {
	--user-color: #a3c400;
	--user-avatar-url: url(/img/avatar.webp);
	--user-banner-url: url(/img/banner.jpg);
	--user-banner-width: 54rem;
	--user-banner-height: 18rem;
}

/* Resets */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: system-ui, sans-serif;
	color: #292f33;
	background-color: #f5f8fa;
	text-rendering: optimizeLegibility;
	accent-color: var(--user-color, #1da1f2);
	--site-max-w: 55.625rem;
}

a {
	color: var(--user-color, #1da1f2);
	text-decoration: none;
}

a:is(:hover, :focus) {
	text-decoration: underline;
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important; /* Fix for https://github.com/twbs/bootstrap/issues/25686 */
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Header */
header {
	position: relative;
	margin-bottom: 0.6875rem;
	min-height: 22.5rem;
	display: grid;
	grid-template-columns: max(1rem, (100vw - var(--site-max-w)) / 2) 1fr max(1rem, (100vw - var(--site-max-w)) / 2);
	grid-template-rows: 2.875rem 1fr 3.75rem;
	background-image: var(--user-banner-url);
	background-color: #f5f8fa;
	background-position: center;
	background-size: var(--user-banner-width, 100%) var(--user-banner-height, auto);
	border-bottom: 0.0625rem solid #e1e8ed;
}

header::after {
	content: '';
	grid-column: 1 / 4;
	grid-row: 3 / 4;
	background-color: #fff;
	border-top: 0.0625rem solid #e1e8ed;
}

.tweets-title {
	position: relative;
	z-index: 1;
	grid-column: 2 / 3;
	grid-row: 3 / 4;
	padding-block: 0.75rem;
	padding-left: 2.875rem;
	font-size: 1.125rem;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 0.875rem;
	line-height: 1.125rem;
	color: #66757f;
}

.tweets-title a {
	display: inline-flex;
	align-items: center;
	margin-block: auto;
	color: #292f33;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tweets-title .tweet-avatar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin-block: auto;
	margin-right: 0.625rem;
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 0.5rem;
	font-weight: normal;
	background-color: #f5f8fa;
	border-radius: 0.25rem;
}

@media only screen and (min-width: 77.25rem) {
	body {
		--site-max-w: 74.375rem;
	}

	.tweets-title {
		padding-left: 13.5rem;
	}

	.tweets-title .tweet-avatar {
		width: 12.5rem;
		height: 12.5rem;
		border: 0.3125rem solid #fff;
		border-radius: 0.75rem;
		box-shadow: 0 0.0625rem 0.0625rem rgba(136,153,166,0.15);
		transform: translateY(-25%);
	}
}

.tweets-nav {
	content: '';
	grid-column: 1 / 4;
	grid-row: 1 / 2;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	list-style: none;
	background-color: #fff;
	padding-inline: max(1rem, (100vw - var(--site-max-w)) / 2);
	border-bottom: 0.0625rem solid rgba(0,0,0,0.15);
}

.tweets-nav li {
	display: flex;
	font-size: 0;
}

.tweets-nav a {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 1.0625rem 0.875rem 0.25rem 0.25rem;
	color: #66757f;
	font-size: 0.8125rem;
	line-height: 1;
	font-weight: bold;
	transition: color ease-in-out 0.15s;
	accent-color: currentColor;
}

.tweets-nav a:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.3125rem;
	background-color: #1da1f2;
	transform: translateY(100%);
	transition: transform ease-in-out 0.15s;
}

.tweets-nav a:is(:hover, :focus):after {
	transform: translateY(0);
}

.tweets-nav a:is(:hover, :focus) {
	color: #1da1f2;
	text-decoration: none;
}

/* Search */
.tweets-search:not([id]) {
	padding: 0.9375rem 0.9375rem 0.75rem;
	background-color: #fff;
	border: 0.0625rem solid #e1e8ed;
	border-radius:0 0 0.3125rem 0.3125rem;
}

#search .pagefind-ui__result {
	border: none;
	padding: 0;
}

#search .pagefind-ui__result-inner {
	margin-top: 0;
}

#search .pagefind-ui__result-title {
	font-size: 0.875rem;
	line-height: 1.203125rem;
}

#search .pagefind-ui__result-excerpt {
	margin: 0;
	font-size: 1rem;
	line-height: 1.375rem;
	word-wrap: break-word;
	white-space: pre-wrap;
}

#search .pagefind-ui__result-link::before {
	content: '';
	background-size: cover;
	background-image: var(--user-avatar-url);
}

/* Main */
main {
	max-width: 38rem;
	padding-inline: 0.625rem;
	margin: auto;
}

main h2 {
	margin-top: 0.6875rem;
	margin-bottom: -0.0625rem;
	padding: 0.9375rem 0.9375rem 0.75rem;
	color: unset;
	font-size: 1.125rem;
	line-height: 1;
	font-weight: 500;
	background-color: #fff;
	border: 0.0625rem solid #e1e8ed;
	border-radius: 0.3125rem 0.3125rem 0 0;
}

main h2 a {
	color: unset;
}

main > is-land + div {
	margin-top: 0.6875rem;
}

#shared,
.tweets-primary-count {
	border-radius: 0.3125rem;
}

.tweets-primary-count + is-land {
	display: block;
	min-height: 8.575rem;
	overflow: hidden;
}

/* Footer */
footer {
	max-width: 38rem;
	margin-inline: auto;
	padding-inline: 0.625rem;
	margin-block: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

/* Tweet */
#search .pagefind-ui__result,
.tweet {
	position: relative;
	padding: 0.5625rem 0.75rem 0.5625rem 4.375rem;
	list-style: none;
	background-color: #fff;
	border: 0.0625rem solid #e1e8ed;
	min-height: 4.25rem;
}

#search .pagefind-ui__result {
	margin-inline: -0.9375rem;
	border-bottom: none;
	border-inline: none;
}

.tweets .tweet:last-child {
	border-radius: 0 0 0.3125rem 0.3125rem;
}

.tweets .tweet:only-child {
	border-radius: 0.3125rem;
}

.tweet:not(:last-child) {
	margin-bottom: -0.0625rem;
}

.tweet:is(:hover, :focus-within) {
	background-color: #f5f8fa;
}

#search .pagefind-ui__result-link::before,
.tag-avatar {
	position: absolute;
	top: 0.5625rem;
	left: 0.75rem;
	display: block;
	width: 3rem;
	height: 3rem;
	color: unset;
	font-size: 0.75rem;
	background-color: #f5f8fa;
	border-radius: 0.3125rem;
	overflow: hidden;
}

.tag-avatar .tweet-avatar {
	display: block;
	width: 100%;
	height: auto;
}

.tweet-text {
	font-size: 1rem;
	line-height: 1.375rem;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.tweet-medias {
	display: flex;
	flex-wrap: wrap;
	margin-block: 0.6875rem;
	gap: 0.6875rem;
}

.tweet-medias > * {
	flex-grow: 1;
	flex-shrink: 1;
	width: calc(50% - 0.6875rem);
	aspect-ratio: 506 / 296;
	background-color: #f5f8fa;
	border-radius: 0.3125rem;
	background-color: rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.tweet-medias > *:not(:has(img)):not(.u-video) {
	padding: 0.6875rem;
	color: unset;
	font-size: 1rem;
	line-height: 1.375rem;
}

.tweet-medias > :only-child {
	width: 100%;
}

.tweet-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tweet-metadata {
	display: flex;
	gap: 0.25rem;
	color: #66757f;
	font-size: 0.8125rem;
	line-height: 1.125rem;
	margin-top: 0.34375rem;
}

.tweet-metadata a {
	color: unset;
}

.tag-icon.u-url,
.tag-icon img {
	display: none;
}

.tweet .tag-lite.dt-published {
	display: inline;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.tweet .tag-naked:first-child ~ .tag-retweet::before,
.tweet .tag-lite:not(:is(.sr-only, .tag-avatar, .tag-retweet))::before {
	content: '\00b7';
	margin-right: 0.25rem;
}

.tweet :is(.tag-retweet, .tag-favorite) {
	white-space: nowrap;
	filter: grayscale(1);
	transition: filter ease-in-out 0.15s;
}

.tweet :is(.tag-retweet, .tag-favorite):hover {
	filter: grayscale(0);
}

/* Other stuff */
main > h2 ~ :is(ol, h3, p:not(:last-of-type)),
.lo {
	position: relative;
	padding: 0.5625rem 0.75rem;
	list-style: none;
	background-color: #fff;
	border: 0.0625rem solid #e1e8ed;
	margin-bottom: -0.0625rem;
}

.lo {
	border-radius:0.3125rem;
}

.lo-c:not(:first-child) {
	margin-top: 1rem;
}

main > h2 ~ p:not(:last-of-type) {
	border-radius:0 0 0.3125rem 0.3125rem;
}

main > h2 + .lo {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

main h4 {
	margin-bottom: 0.5rem;
}

main ol {
	list-style-position: inside;
}

main ol:empty {
	display: none;
}

main ol:-moz-only-whitespace {
	display: none;
}

main > p:last-of-type {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}