:root {
	color-scheme: dark;
	--traveller-background: #101014;
	--traveller-surface: #19191e;
	--traveller-surface-raised: #211b31;
	--traveller-border: #34313b;
	--traveller-foreground: #f5f3f7;
	--traveller-muted: #aaa5b6;
	--traveller-coral: #ff7958;
	--traveller-coral-deep: #ff5864;
	--traveller-highlight: #ffe05a;
	--traveller-banner-start: rgba(29, 22, 44, .94);
	--traveller-banner-middle: rgba(29, 22, 44, .68);
	--traveller-banner-end: rgba(29, 22, 44, .16);
	--traveller-banner-stripe: rgba(255, 121, 88, .16);
	--traveller-header-panel: rgba(16, 16, 20, .82);
	--traveller-navigation-hover: #28232f;
	--traveller-comment-background: #201d25;
	--traveller-input-background: #121216;
	--traveller-placeholder: #827d8b;
	--traveller-inventory-background: #211b31;
}

body {
	background: var(--traveller-background) !important;
	color: var(--traveller-foreground);
	font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
}

.mainWrapper,
.screen-wrapper {
	width: min(1050px, calc(100% - 40px));
}

.profile-banner {
	position: relative;
	height: 270px;
	background-color: var(--traveller-surface-raised);
	background-size: cover;
	background-position: center;
	border-bottom: 4px solid var(--traveller-coral);
	box-shadow: none;
	isolation: isolate;
}

.profile-banner::before {
	position: absolute;
	inset: 0;
	content: '';
	background:
		linear-gradient(90deg, var(--traveller-banner-start) 0%, var(--traveller-banner-middle) 48%, var(--traveller-banner-end) 100%),
		repeating-linear-gradient(110deg, transparent 0 75px, var(--traveller-banner-stripe) 75px 118px);
	z-index: -1;
}

.profile-banner .mainWrapper {
	height: 100%;
}

.profile-header-info {
	top: auto;
	bottom: 28px;
	display: flex;
	align-items: flex-end;
	gap: 18px;
}

.profile-image {
	flex: 0 0 144px;
	width: 144px;
	height: 144px;
	border: 4px solid var(--traveller-foreground);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .36);
}

.profile-header-info p {
	margin: 0 0 2px;
	padding: 12px 18px;
	background: var(--traveller-header-panel);
	color: var(--traveller-muted);
	text-shadow: none;
}

.profile-header-info p .profile-header-name {
	color: var(--traveller-foreground);
	font-family: 'Space Grotesk', 'DM Sans', 'Segoe UI', sans-serif;
	font-size: 30px;
	font-weight: 700;
	text-shadow: none;
}

.profile-navigation {
	background: var(--traveller-surface);
	border-bottom: 1px solid var(--traveller-border);
	box-shadow: none;
}

.profile-navigation ul li a {
	border-right: 1px solid var(--traveller-border);
	color: var(--traveller-muted) !important;
	font-size: 14px;
	font-weight: 600;
	transition: color .18s ease, background-color .18s ease;
}

.profile-navigation ul li a:hover {
	background: var(--traveller-navigation-hover);
	color: var(--traveller-foreground) !important;
}

.profile-navigation ul li a:focus-visible,
.link:focus-visible,
.whiteBox a:focus-visible {
	outline: 2px solid var(--traveller-coral);
	outline-offset: 2px;
}

.whiteBox {
	padding: 20px;
	background: var(--traveller-surface);
	border: 1px solid var(--traveller-border);
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

.whiteBox p,
.whiteBox,
.whiteBox li {
	color: var(--traveller-muted);
}

.whiteBox p {
	font-size: 14px;
	line-height: 1.65;
}

.whiteBox p.box-header {
	margin: 0 0 10px;
	color: var(--traveller-foreground);
	font-family: 'Space Grotesk', 'DM Sans', 'Segoe UI', sans-serif;
	font-size: 19px;
	font-weight: 700;
}

.whiteBox a[href]:not([no_link]),
.link {
	color: var(--traveller-coral) !important;
}

.whiteBox a[href]:hover:not([no_link]),
.link:hover {
	color: var(--traveller-highlight) !important;
}

.whiteBox .spacer,
.profile-settings-item {
	border-color: var(--traveller-border);
}

.profile-message {
	margin-bottom: 12px;
	background: var(--traveller-surface);
	border: 1px solid var(--traveller-border);
	border-radius: 7px;
	box-shadow: none;
}

.profile-message-wrapper {
	color: var(--traveller-foreground);
}

.profile-message-body-cont p {
	color: var(--traveller-foreground);
}

.profile-message-comment {
	background: var(--traveller-comment-background);
	border-top: 1px solid var(--traveller-border);
	color: var(--traveller-muted);
}

.messageBox,
.whiteBox textarea,
.whiteBox input:not([type='submit']):not([type='button']) {
	max-width: 100%;
	background: var(--traveller-input-background);
	border: 1px solid var(--traveller-border);
	border-radius: 5px;
	color: var(--traveller-foreground);
}

.messageBox:focus,
.whiteBox textarea:focus,
.whiteBox input:focus {
	border-color: var(--traveller-coral);
	outline: none;
}

.messageBox::placeholder,
.whiteBox textarea::placeholder {
	color: var(--traveller-placeholder);
}

.blue-button,
.postMessageButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 16px;
	background: oklch(0.74 0.169 38);
	border: 0;
	border-radius: 6px;
	color: oklch(0.17 0.024 28) !important;
	font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.blue-button:hover,
.postMessageButton:hover {
	background: var(--traveller-highlight);
	color: oklch(0.17 0.024 28) !important;
	text-decoration: none;
}

.blue-button:focus-visible,
.postMessageButton:focus-visible {
	outline: 2px solid var(--traveller-highlight);
	outline-offset: 2px;
}

.profile-badge,
.inventory-item {
	border-radius: 5px;
}

.inventory-item-info {
	background: var(--traveller-inventory-background);
	border: 1px solid var(--traveller-border);
	color: var(--traveller-foreground);
}

.profile-forum-post,
.profile-settings-item {
	border-bottom-color: var(--traveller-border);
}

.profile-load-more {
	padding: 14px 0 20px;
}

.profile-load-more .link {
	font-weight: 600;
}

@media (max-width: 767px) {
	.mainWrapper,
	.screen-wrapper {
		width: calc(100% - 32px);
	}

	.profile-banner {
		height: 250px;
	}

	.profile-header-info {
		bottom: 16px;
		gap: 12px;
	}

	.profile-image {
		flex-basis: 96px;
		width: 96px;
		height: 96px;
	}

	.profile-header-info p {
		margin-bottom: 0;
		padding: 9px 12px;
	}

	.profile-header-info p .profile-header-name {
		font-size: 23px;
	}

	.mainWrapper[style] {
		margin-top: 16px !important;
	}

	.whiteBox {
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
	}
}