Mastodon Modern by freeplay

	 //////////////////////////////////////////////////////////////////// 🦊
	//																	//
	//	!!! MAKE SURE TO ADD YOUR SERVER URL USING THE STEPS BELOW !!!	//
	//	1. Install the style											//
	//	2. Click the "Edit" in the left sidebar							//
	//	3. Click the "Settings" button in the left sidebar				//
	//	4. Paste your server's URL in the								//
	//		"Custom included sites" textbox like this:					//
	//  		*//DOMAIN HERE/*  										//
	//																	//
	 //////////////////////////////////////////////////////////////////// 

	 
@-moz-document domain("mastodon.coffee"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("indieweb.social"), domain("raru.re"), domain("ani.work") {
/* Update 1.4.0
- Fixed overflow / unable to scroll in left column
- Added underlines to links
- Changed the look of the profile fields
- Styled option toggles
- Notification tweaks
- Added edit icon next to edited posts
- Fixed interaction modal with cards that have long text
- Improved responsiveness / mobile layout
- More tweaks!! More fixes!!!

/* HOTFIX 1.4.2
- Fixed overflow in Media tab in Advanced View
- Other minor fixes
*/

/* ==UserStyle==
@name           Mastodon Modern
@version        1.4.2
@description    Gives Mastodon a nicer look :)
@updateURL      https://codeberg.org/Freeplay/UserStyles/raw/branch/main/mastodon/modern.user.css
@preprocessor   stylus

 -- AUTHOR STUFF --
@namespace      Freeplay
@author         Freeplay (https://freeplay.codeberg.page/)
@homepageURL    https://codeberg.org/Freeplay/UserStyles
@supportURL     https://codeberg.org/Freeplay/UserStyles/issues
==/UserStyle== */

#mastodon, .public-layout, .modal-layout { // Wrapped in this so it doesn't mess with other front ends the instance probably has
	responsiveW1 = 1320px
	responsiveW2 = 1175px
	mobileW = 895px
	
	transBounce1 = .2s cubic-bezier(0,0,0,1.1)
	
	media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder"
	
	fa() {
		font: normal normal normal 14px/1 FontAwesome;
		font-size: 14px;
		font-size: inherit;
		text-rendering: auto;
	}
	
	/:root {
		--tl-width 750px
		--radius 12px
		--radius-round 24px
		--hover-color rgba(170,170,170, 0.07)
		--elevated-color rgba(150,150,200,0.1)
		--border-color rgba(120,120,200, 0.2)
		--border-color-2 rgba(120,120,120, 1)
		--shadow 0 10px 40px -10px rgba(0,0,0,0.15)
		--shadow-low 0 8px 16px -10px rgba(0,0,0,0.4)
		--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
		--status-left-padding 15px
	}
	
	/.rtl {
		textarea, p {
			text-align right
			direction rtl
		}
	}
	
	a, button, label {
		user-select none
	}
	.button--block {
		font-weight 700
	}
	.unhandled-link {
		text-decoration underline
		text-underline-offset .2em
	}
	
	.compose-form__upload-thumbnail, .button,
	button:not(.column-header__button), video, input, iframe, .privacy-dropdown__dropdown, .react-toggle-track,
	.reply-indicator, .compose-form__warning {
		border-radius var(--radius) !important
	}
	button, .focusable, a, .media-gallery__item-thumbnail {
		&:focus-visible {
			box-shadow inset 0 0 0 2px #dc7b18
			outline 2px #dc7b18 solid
			outline-offset -2px
		}
	}
	*:not(.radio-button__input):not(input) {
		font-display swap !important
	}
	:not(.radio-button__input):not(input):not(span) {
		border-color var(--border-color) !important
	}
	@media (prefers-reduced-motion: no-preference) {
		.load-more, .setting-toggle, .column-header__back-button, .column-back-button,
		.trends__item, .story,
		.media-gallery__item, .column-link, select, .status-card, .audio-player, .account {
			transition transform .4s cubic-bezier(0,0,0,3) !important
			&:active {
				transform scale(.99)
				transition transform .4s cubic-bezier(0,0,0,1) !important
			}
		}
		.column-header__button, .column-header__buttons > .column-header__back-button,
		.react-toggle-track, .button, .icon-button, .floating-action-button {
			transition transform .4s cubic-bezier(0,0,0,4) !important
			&:active {
				transform scale(.95)
				transition transform .4s cubic-bezier(0,0,0,1) !important
			}
		}
		.status__content__spoiler-link {
			span {
				display inline-block
				transition transform .4s cubic-bezier(0,0,0,4) !important
			}

			&:active span {
				transition transform .4s cubic-bezier(0,0,0,1) !important
				transform translateY(1px)
			}
		}
	}
	.react-toggle-thumb {
		pointer-events: none
	}
	.account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img {
		border-radius 30% !important
	}
	.account,
	.detailed-status__action-bar,
	.column-header__collapsible-inner,
	.compose-form__buttons-wrapper,
	.audio-player, .box-widget input[type="email"], .box-widget input[type="password"], .box-widget input[type="text"], .box-widget textarea, .compose-form .spoiler-input__input, .compose-form__autosuggest-wrapper, .compose-form__poll-wrapper select, .report-dialog-modal__textarea, .search__input, .setting-text, .statuses-grid .detailed-status {
		border 0 !important
	}
	
	
	
	/.dropdown-menu {
		border-radius var(--radius)
	}
	/.dropdown-menu__container__list {
		overflow hidden auto
		border-radius var(--radius)
		margin-block -4px
		max-height 70vh
	}
	/.dropdown-menu__item {
		overflow hidden
		a {
			padding .7em 1em !important
			transition background-color .2s, color .2s
			min-width 150px
		}
	}
	/.dropdown-menu__separator {
		margin 0 !important
	}
	.interaction-modal {
		border-radius var(--radius)
		overflow-y auto
	}
	.interaction-modal__choices {
		gap 10px
		display flex
		flex-wrap wrap
		.interaction-modal__choices__choice {
			max-height 50vh
			overflow-y auto
			// background-color var(--elevated-color)
			border 1px solid var(--border-color)
			flex 1 0 270px 
			border-radius var(--radius)
			transition background .2s
			position relative
		}
	}
	
	
	// LEFT COLUMN
	@media (min-width responsiveW2) {
		.columns-area__panels__pane__inner {
			padding-top 30px
			box-sizing border-box
		}
	}
	.compose-panel {
		margin-top 0
		overflow-y auto
		margin-top -30px
		padding-top 30px
		padding-bottom 10px
		box-sizing border-box
		height 100vh
	}
	.search {
		&, /.search-popout {
			margin-inline 5px
			border-radius var(--radius)
		}
		label {
			// padding-inline 20px
			box-sizing border-box
		}
		input {
			border-radius var(--radius-round) !important
			padding-inline-start 20px !important
			padding-inline-end 40px !important
		}
		.search__icon > i {
			margin-inline 5px
		}
	}
	.compose__action-bar-dropdown {
		.icon-button {
			width auto !important
			height auto !important
			padding 8px
			i {
				// font-size 10px
			}
		}
	}
	
	.compose-form {
		// overflow hidden
		.reply-indicator {
			&__display-name {
				padding 0
			}
		}
		.compose-form__autosuggest-wrapper {
			// height 0
			// flex-grow 1
		}
		.compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea { 
			border-radius var(--radius) var(--radius) 0 0 !important
		}
		.compose-form__buttons-wrapper {
			border-radius 0 0 var(--radius) var(--radius) !important
		}
		.compose-form__publish-button-wrapper {
			overflow visible !important
			max-width 100%
		}
		.compose-form__upload__actions {
			z-index 5
			position relative
		}
		.compose-form__upload-thumbnail {
			display flex
			flex-direction column
		}
		.compose-form__upload__warning {
			// top 50%
			position relative
			// inset 0
			// bottom 0
			display flex
			justify-content center
			background rgba(0,0,0,0.7)
			flex-grow 1
			box-shadow 0 -50px rgba(0,0,0,0.7)
			> button {
				width 100%
				height 100%
				font-weight 700
				// background rgba(255,255,255,0.8)
				border-radius var(--radius)
				padding-inline 1em
				color white
				box-shadow var(--shadow-low)
				i {
					margin-inline-end .2em
					transform scale(1.2)
				}
			}
			
			
		}
	}
	.server-banner {
		// padding-inline 15px
		padding-inline 10px
		// overflow-y auto
		.server-banner__introduction {
			// padding-inline 10px
		}
		.server-banner__hero {
			border-radius var(--radius)
			// margin-inline -10px
			width 100%
			// width calc(100% + 20px)
			border-radius var(--radius) var(--radius) 0 0
			border 1px solid var(--border-color)
			box-sizing border-box
		}
		.server-banner__description {
			// margin-inline -10px
			// background-color var(--hover-color)
			border 1px solid var(--border-color)
			padding 15px
			margin-top -20px
			// margin-top calc(-20px - var(--radius))
			// padding-top calc(15px + var(--radius))
			border-radius 0 0 var(--radius) var(--radius)
		}
		.server-banner__meta {
			flex-direction column
			// margin-inline -10px
			// margin-top 30px !important
			// border-top 2px solid var(--border-color-2)
			// padding-top 20px
			// border 1px solid var(--border-color)
			// border-radius var(--radius)
			// padding 15px
			.server-banner__meta__column {
				width unset
				overflow visible
				display flex
				flex-direction row
				flex-wrap wrap
				align-items flex-end
				h4 {
					margin 0
					font-size .9em !important
					width 100%
					// font-weight 500
				}
				.account {
					margin-inline -10px
					padding 10px !important
					width 100%
					&::after {
						content unset
					}
				}
				.server-banner__number, .server-banner__number-label {
					font-size 1.1em
					line-height 2
					margin-inline-end .5em
				}
				.server-banner__number-label {
					font-weight 400 !important
				}
			}
		}
	}
	.navigation-panel__sign-in-banner {
		margin-inline 5px
		margin-bottom 20px
		.sign-in-banner {
			// padding 0
			p {
				color inherit !important
				// font-weight 500
				// opacity .
				line-height 1.5
			}
			> :last-child {
				margin-bottom 0
			}
		}
	}
	.link-footer > p:last-child {
		margin-bottom 0
	}
	
	// CENTER COLUMN
	
	.columns-area__panels__main {
		
		@media (min-width responsiveW2) {
			margin 0 10px
		}
		@media (min-width responsiveW1) {
			max-width var(--tl-width) !important
			padding 0 15px
		}
		
		padding-top 30px !important
		overflow visible !important
		transition max-width transBounce1, margin transBounce1
		> div {
			border-radius var(--radius)
			&:last-child {
				box-shadow var(--shadow-med)
			}
		}
		:not(.scrollable--flex) > .scrollable {
			padding-bottom 40vh !important
		}
		.column-actions {
			position static
			.column-actions__background {
				border-bottom-left-radius var(--radius)
			}
		}
	}
	.scrollable,
	.column-back-button, .column-header {
		border 0
		border-radius var(--radius)
	}
	.scrollable:not(.scrollable--flex), .activity-stream {
		&:not(.activity-stream) {
			padding 10px
		}
		
		border 0 !important
		contain unset !important
		> [tabindex]:first-child > .focusable {
			margin-top 0
		}
		> div > [tabindex]:last-child {
			.status {
				border 0
			}
		}
	}
	.columns-area {
		box-sizing border-box
		padding-bottom 20px
		height 100% !important
	}
	// .column, .columns-area {
	// 	overflow visible !important
	// }
	.explore__search-results {
		padding 10px
	}
	.dismissable-banner {
		border-radius var(--radius) var(--radius) 0 0
		& ~ .scrollable {
			border-top-left-radius 0
			border-top-right-radius 0
		}
	}
	
	.empty-column-indicator {
		contain unset
		padding 10px !important
		color unset
		opacity .8
		font-size 1.2em
		line-height 2
		a {
			display block
			font-weight 700
			font-size 1.1em
		}
	}
	

	// ACCOUNT PAGE
	.scrollable--flex .account-timeline__header {
		margin 0 !important
	}
	.item-list {
		background-color inherit
		border-radius var(--radius)
	}
	.account-timeline__header {
		margin -10px
		margin-bottom 10px
		background-color inherit
		border-radius var(--radius) !important
		animation slideUp backwards .4s cubic-bezier(0,1,1,1)
		.account__moved-note {
			box-sizing border-box
			border-radius var(--radius)
			margin-bottom calc(0px - var(--radius))
			// margin-bottom -30px
			padding 30px
			padding-bottom calc(var(--radius) + 30px)
			background inherit
			.detailed-status__display-name {
				overflow visible !important
			}
		}
		.account__header {
			overflow visible !important
			border-radius var(--radius) var(--radius) 0 0
		}
		.account__header__info {
			z-index 2
		}
		.account__header__image {
			height 0
			padding-bottom 35%
			border-radius var(--radius) var(--radius) 0 0
			img {
				position absolute
			}
		}
		.account__header__bar {
			border 0
			background inherit !important
			border-radius var(--radius) var(--radius) 0 0
			margin-top calc(0px - var(--radius)) !important
			display flex
			flex-direction column
			.account__header__tabs {
				overflow visible !important
			}
			.avatar {
				margin-inline-start 0 !important
				overflow visible !important
				position relative
				.account-role {
					position absolute
					bottom 0
					left 100%
					border-radius var(--radius-round)
				}
			}
			.account__avatar {
				border 0
				box-shadow var(--shadow)
				// background none
			}
		}
		.account__header__tabs__name {
			margin-bottom 0
			h1 {
				display flex
				flex-wrap wrap
				white-space unset
				> span {
					margin-inline-end .4em
				}
			}
		}
		
		.account__header__extra {
			margin-top 10px
			line-height 1.5
		}
		
	}
	.account__header__fields, .account__header__account-note {
		display flex
		flex-wrap wrap
		gap 10px
		gap 2px
		background none
		// margin-inline -10px
		border-radius var(--radius)
		overflow hidden
		width max-content
		// max-width calc(100% + 20px)
		max-width 100%
		&.account__header__fields {
			margin-top 10px
			margin-bottom -10px
		}
		/ .public-account-bio .account__header__fields {
			padding 20px !important
			padding-bottom 0 !important
		}
		dl, &.account__header__account-note.account__header__account-note {
			// border 0
			// border-radius var(--radius)
			border-radius 0
			overflow hidden
			&:not(.verified) {
				background-color var(--elevated-color)
			}
			
			border 0
			// border 1px solid var(--border-color)
			padding 8px 12px !important
			position relative
			overflow hidden
			// min-width max-content
			flex-grow 1
			// max-width max-content !important
			dt {
				color unset
				opacity .9
				text-transform capitalize
			}

			&.verified {
				// background none !important
			}
			
			dd {
				white-space unset
				max-height unset
				& > span > a:first-child:last-child, .h-card:first-child:last-child a {
					&::after {
						content ""
						position absolute
						inset 0
						background-color var(--hover-color)
						opacity 0
						transition opacity .2s
					}
					&:hover:after, &:focus:after {
						opacity 1
					}
				}
			}
			
			
		}
		&.account__header__account-note.account__header__account-note {
			// padding 0 !important
			margin-bottom 10px
			gap 0
			border 0
			padding 0 !important
			margin-inline 0 !important
			// padding .4em .8em !important
			// transition padding .01s, margin .01s
			// display inline
			background none !important
			border-radius 8px
			font-size 12px
			width unset
			background none
			label {
				z-index 2
				padding 0 !important
				padding-inline-end .7em !important
				pointer-events none
				line-height inherit
				font-size inherit
				font-weight inherit
				vertical-align unset
				&::after {
					// content ":"
				}
			}
			&:focus-within {
				padding .5em .7em !important
				margin-inline -5px !important
				border 1px solid
			}
			&:not(:focus-within) {
				border-radius 0
				border-bottom 1px solid
				padding-bottom .4em !important
			}
			textarea {
				width 0
				flex-grow 1
				margin 0 !important
				border-radius 0
				padding 0
				margin -100px !important
				padding 100px !important
				line-height inherit
				font-size inherit
				font-weight inherit
				vertical-align unset
				background none
				&::placeholder {
					// opacity .7 !important
					font-weight 600
				}
			}
			label {
				margin 0
				font-weight 600
				padding-inline 14px
			}
		}
	}
	.account__section-headline {
		background none
		/.with-modals & {
			border 0 !important
		}
		a, button {
			background none
			border-radius 0 !important
			span {
				font-weight 400
			}
			&.active span {
				font-weight 700
			}
		}
	}
	.notification__filter-bar {
		border 0 !important
		margin-bottom calc(0px - var(--radius))
		padding-bottom var(--radius)
	}
	
	// Gallery
	.account-gallery__container {
		border-radius var(--radius)
		overflow clip
		padding 0
		margin 4px
		gap 4px
		min-height max-content
		// justify-content center
		/.account-gallery__item {
			margin 0
			border-radius 0
			flex 1 1 calc(100px + 15%)
			transition flex 1s cubic-bezier(.2,1,0,1)
			&:hover {
				flex-grow 2 !important
			}
			a {
				transition transform .7s
				
				&:hover, &:focus {
					transform scale(1.05)

				}
			}
		}
	}
	
	// STATUSES 
	.scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper {
		&::after {
			content unset
		}
	}
	
	statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .account-card, :not(.focusable) > .account, .timeline-hint"
	{statuses-list} {
		overflow clip
		border 0 !important
		border-radius var(--radius) !important
		transition background .2s, box-shadow .4s, margin .2s, border .2s
		animation slideUp backwards .4s cubic-bezier(0,1,1,1)
		position relative
		&.trends__item, &.story, &.account-card {
			animation-name slideUpFade
			for row in 1..11 {
				&:nth-child({row}) {
					animation-delay .04s * row
				}
			}
		}
		&.focusable {
			background none
		}
		&.entry {
			margin-bottom 10px
		}
		.status__expand {
			// width 100%
			// z-index -1
		}
		&:not(.detailed-status__wrapper) {
			// Hover
			&::after {
				content ""
				position absolute
				bottom 0px
				inset-inline var(--radius)
				border-top 1px solid var(--border-color)
				pointer-events none
			}
			&::before {
				content ""
				position absolute
				inset 0
				bottom 1px
				pointer-events none
				transition background-color .2s
			}
			&:hover, &:focus-within {
				&::before {
					background-color var(--hover-color)
				}
			}
		}
		/.explore__links {
			padding 10px !important
			display flex
			flex-wrap wrap
			.trends__item {
				margin 10px
				padding 25px !important
				box-shadow var(--shadow-med)
				width 200px
				// font-size 2em
				// overflow visible !important
				&::after {
					content unset !important
					inset 0 !important
					border-radius var(--radius)
					pointer-events none
					border 1px solid var(--border-color) !important
				}
				a {
					font-size 1.4em
					line-height 1.7em
				}
				.trends__item__sparkline {
					height 100%
					svg {
						height 100%
						// width 100%
						float right
						overflow visible !important
						position relative
						z-index -1
						
						path {
							display unset !important
							transition transform 1s
							&:first-child {
								transform-origin center
								// transform scale(2)
								// filter blur(0px) !important
								// d path("M-200 -200 L200 -200 L200 200 L-200 200 Z") !important
							}
						}
					}
				}
				&:hover, &:focus-within {
					svg path:first-child {
						transform scale(2)
						// filter blur(40px) !important
					}
				}
			}
		}
		&.trends__item, &.story {
			padding 10px
			flex-grow 1
		}
		&.story {
			padding 15px
			.story__details {
				padding-left 0 !important
			}
			.story__thumbnail {
				margin-inline-end 0
			}
		}
		&.account-card {
			display flex
			flex-direction column
			/.explore__suggestions {
				padding 10px
				display grid
				grid-template-columns repeat(auto-fit, minmax(300px, 1fr))
			}
			// border 1px solid var(--border-color) !important
			box-shadow var(--shadow)
			.account-card__header {
				padding 0 !important
				// padding-bottom 4px !important
				
			}
			.account-card__title__avatar .account__avatar {
				width 64px !important
				height 64px !important
				background-size 64px 64px !important
			}
			.account-card__bio {
				margin-top 0 !important
			}
			.account-card__actions {
				// display block
				margin-top auto !important
			}
		}
		&.empty-column-indicator {
			display block
		}
		&.timeline-hint {
			display block
		}
		&.timeline-hint a {
			&::before {
				content ""
				position absolute
				inset 0
			}
		}
	}
	
	
	.status, .columns-area__panels__main .account {
		border 0 !important
		padding-block 15px
		// overflow visible
		&:not(.account) {
			padding-inline-start var(--status-left-padding) !important
		}
		&::before {
			inset -10px !important
			border-radius var(--radius)
		}
		&::after {
			// bottom -10.5px !important
		}
	}
	.status__prepend, .notification__message {
		padding-top 15px !important
		padding-bottom 0 !important
		// margin-inline-start var(--status-left-padding)
		margin-bottom -10px !important
		z-index 2
		position relative
		font-weight 400
		[class*="icon-wrapper"] {
			display flex
			align-items center
		}
		a {
			white-space nowrap
			font-weight 600
		}
	}
	.notification-favourite, .notification-reblog {
		.notification__message {
			& ~ div {
				.status__info, .status__action-bar {
					display none
				}
				.status {
					min-height unset
				}
				.attachment-list {
					margin-top 0
				}
			}
		}
	}
	.status__avatar {
		min-width 45px
	}
	.account__avatar-overlay-base {
		width 100%
		height 100%
		background-size cover
		border-radius var(--radius)
		.account__avatar {
			width 90% !important
			height 90% !important
		}
	}
	.account__avatar-overlay-overlay {
		border-radius var(--radius-round)
		overflow hidden
	}
	.status__info {
		margin-top 5px
		align-items flex-start
		> * {
			position relative
			z-index 2
		}
		.display-name {
			color unset !important
			strong {
				font-weight 600
			}
		}
		.status__relative-time {
			display flex
			font-weight 500
			font-size 15px
			// line-height 22px
			.status__visibility-icon {
				order 2
				margin-inline-start .4em
			}
			abbr {
				// text-decoration none
				margin-inline-start .7em
				&::after {
					content: ""
					fa()
				}
			}
		}
	}
	.focusable:not(.detailed-status__wrapper) .status__content {
		// Expand the click area to open post
		overflow visible
		.status__content__text {
			max-height inherit !important
			overflow hidden
		}
		&::before, &::after {
			content ""
			position absolute 
			top 100%
			inset-inline 0
			height 900px
		}
		&::after {
			bottom 100%
			top unset
		}
	}
	.status__content {
		padding-top 2px
		margin-inline -100px
		padding-inline 100px
		text-align unset !important
		line-height 1.5
		
		&.status__content--with-spoiler > p:first-child {
			margin-bottom 0
		}
		/.rtl & {
			text-align right !important
		}
		.status__content__text > br:first-child {
			display none !important
		}
		.status__content__text {
			// display inline !important
		}
		p:empty {
			max-height 0
			// min-height 0 !important
			// display inline !important
		}
	}
	.status__content__spoiler-link {
		display block
		width unset
		padding 1em
		color inherit
		font-weight 700
		background none
		margin-inline-start -100px !important
		padding-inline-start 100px !important
		width calc(100% + 150px)
		text-align unset
		font-size .8em
		&:hover, &:focus {
			background-color var(--hover-color)
		}
	}
	{media} {
		box-shadow var(--shadow-low)
		border-radius var(--radius)
		margin-top 15px !important
		margin-bottom 10px !important
		animation scaleIn .4s
		max-width unset !important
		max-height 80vh !important
		&.status-card {
			box-shadow var(--shadow)
			box-shadow none
			// border 0
			.status-card__content {
				padding-inline 12px
			}
			&:hover {
				background-color var(--hover-color)
			}
		}
	}
	.media-gallery__item:not([style*="50%"]) {
		border-radius var(--radius)
	}
	.audio-player {
		.video-player__seek {
			margin var(--radius)
		}
	}
	.detailed-status {
		padding 15px !important
		padding-bottom 5px !important
	}
	div:empty + div > .detailed-status__wrapper {
		margin-top 0 !important
	}
	.detailed-status__wrapper, .detailed-status, .picture-in-picture {
		&.detailed-status__wrapper {
			margin-block 15px
		}
		box-shadow var(--shadow)
		&:first-child {
			// margin-top 0
		}
		{media} {
			margin-inline 0 !important
			max-height unset !important
		}
		.status__content {
			min-height unset !important
		}
	}
	.picture-in-picture {
		.picture-in-picture__header {
			border-radius var(--radius) var(--radius) 0 0
		}
		{media} {
			--radius 0
			margin 0 !important
		}
		.picture-in-picture__footer {
			border-radius 0 0 var(--radius) var(--radius)
		}
	}
	
	.status__action-bar {
		margin-top .4em
		margin-bottom -8px
	}
	.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer {
		position relative
		z-index 2
		pointer-events none
		gap 0
		overflow-x auto
		
		> * {
			pointer-events all
		}
		.icon-button {
			display inline-flex
			align-items center
			width unset !important
			padding .5em !important
			height unset !important
			flex 0 1 auto !important
			min-width 50px
			border-radius var(--radius)
			&:last-child {
				margin 0 !important
			}
			i {
				min-width 22px
			}
			&[aria-label]::after {
				all unset
				content attr(aria-label)
				font-size 12px
				margin-inline-start .5em
				white-space nowrap
				overflow hidden
				text-overflow ellipsis
			}
			.icon-button__counter {
				width auto !important
			}
		}
		.status__action-bar__dropdown, 
		.status__action-bar-dropdown, .detailed-status__action-bar-dropdown, .detailed-status__button {
			display contents
		}
		&.detailed-status__action-bar, &.picture-in-picture__footer {
			padding-right 15px !important
			padding-left 15px !important
			.icon-button {
				flex-grow 1 !important
				// width 0 !important
				justify-content center
			}
		}
		&.picture-in-picture__footer {
			.icon-button::after {
				content unset !important
			}
		}
	}
	
	.tabs-bar__wrapper, .column-back-button--slim .column-back-button {
		z-index 101
		/.column-header, /.column-inline-form {
			font-weight 600
			border-bottom-left-radius 0 !important
			border-bottom-right-radius 0 !important
			& ~ .scrollable {
				border-top-left-radius 0 !important
				border-top-right-radius 0 !important
			}
		}
		@media (min-width mobileW) {
			position fixed
			width 285px
			margin-inline-start 600px
			top 0 !important
			left unset !important
			right unset !important
			min-height 48px !important
			@media (min-width: responsiveW1) {
				margin-inline-start calc(var(--tl-width) - 5px)
			}
			@media (max-width responsiveW2 - 1) {
				margin-inline-start calc(100% - 275px)
				width 265px
				margin-top 10px
				
			}
			&:not(.column-back-button) {
				padding-top 0
			}
			margin-top 30px
			overflow clip
			border-radius var(--radius) var(--radius) !important
			box-shadow 0 12px 12px -12px rgba(0,0,0,0.1)
			
			.column-header__wrapper {
				gap 2px !important
				display flex
				flex-direction column
			}
			.column-back-button {
				background none
			}
			
			.column-header/*, .column-header__buttons button:not(.active)*/ {
				background none !important
			}
			.column-header > button {
				z-index 2
			}
			.column-header__buttons {
				margin-left .5em
			}
			.column-header__buttons button {
				transition background .2s, transform .3s !important
				position relative
				border-radius 100px !important
				min-width 40px
				// min-width 50px
				// margin-left .4em
				// transform scale(.9)
				margin 5px
				margin-inline-start 0
				// border-radius var(--radius) !important
				font-size .9em
				padding-inline 15px
				.icon-with-badge {
					position absolute
					inset 0
					display flex
					align-items center
					justify-content center
					.icon-with-badge__badge {
						right -2px
						left unset
						top unset
						bottom 0px
						border-radius var(--radius-round)
					}
				}
				.column-header__icon {
					margin-inline-end 0
				}
				&:not(.active) {
					background var(--elevated-color) !important
				}
				
				&::before {
					content ""
					position absolute
					inset 0
					top calc(100% + 5px)
					bottom -5px
					background inherit
					z-index -1
					transition inset .1s
					border-radius 100px
					pointer-events none
				}
				&::after {
					// content ""
					position absolute
					inset 0
					background var(--elevated-color)
					border-radius 100%
				}
				&.active {
					// filter contrast(1.1)
					// z-index -1
					// opacity .7
					&::before {
						inset -10px -300px
					}
				}
			}
			

			
			.announcements, .column-header__collapsible:not(.collapsed) {
				
				flex-direction column-reverse
				align-items flex-start
				animation slideDowFade .3s backwards cubic-bezier(0,1,0,1.2)
			}
			.column-header__collapsible {
				transition none
			}
			.announcements__container {
				width 100% !important
				.react-swipeable-view-container {
					// height unset !important
				}
			}
			.announcements__mastodon {
				z-index -1
				position relative
			}

			
			
		}
// 		@media (min-width mobileW) and (max-width: responsiveW2) {
			
// 			&.tabs-bar__wrapper { // Overlay timeline over header when scrolling down
// 				top 0 !important
// 				min-height 55px
// 				.column-header, .column-header__buttons button {
// 					min-height 55px
// 					min-width 55px
// 				}
// 			}
// 			&.column-back-button {
// 				border-radius 0 !important
// 			}
// 			&:not(.column-back-button) {
// 				padding-top 0
// 				.tabs-bar {
// 					margin-bottom 0
// 					border 0 !important
// 				}
// 				#tabs-bar__portal {
// 					border-radius 0 !important
// 					.column-header, button {
// 						border-radius 0 !important
// 					}
// 				}

// 				& ~ .columns-area .scrollable {
// 					border-radius 0 !important
// 				}
// 				/ #mastodon .columns-area__panels__main {
// 					&, .columns-area {
// 						padding-top 0 !important
// 					}

// 					> div, .scrollable {
// 						border-radius 0 !important
// 					}
// 				}
// 			}
// 		}
		transition margin transBounce1
	}
	.column-header__collapsible-inner {
		// padding-bottom 0 !important
		overflow hidden
		// background none
	}
	:not(:nth-child(2)) > .column-settings__section {
		// margin-top 1em !important
	}
	.column-settings__row, .column-settings__hashtags {
		border-radius var(--radius)
		margin-bottom 1em
	}
	.column-select__control {
		border-radius var(--radius)
	}
	.setting-toggle {
		display flex
		flex-direction row-reverse
		align-items center
		margin-bottom 14px
		position relative
		padding .7em
		background var(--elevated-color)
		margin-bottom 2px
		overflow hidden
		&:first-child {
			border-top-left-radius var(--radius)
			border-top-right-radius var(--radius)
		}
		&:last-child {
			border-bottom-left-radius var(--radius)
			border-bottom-right-radius var(--radius)
		}
		
		// border-radius var(--radius)
		.setting-toggle__label {
			margin-bottom 0 !important
			flex-grow 1
		}
		&::before {
			content ""
			position absolute
			inset 0
			background var(--hover-color)
			opacity 0
			transition opacity .2s
			pointer-events none
		}
		&:hover, &:focus-within {
			&::before {
				opacity 1
			}
		}
	}
	
	
	.navigation-panel {
		box-sizing border-box
		height calc(100vh - 40px)
		padding-bottom 10px
		hr {
			display none
		}
		@media (min-width responsiveW2) {
			padding-top 50px !important
			.navigation-panel__logo {
				display none
			}
			[href="/settings/preferences"] {
				display none !important
			}
		}
		// @media (max-width responsiveW2 - 1) {
		// 	box-sizing border-box
		// 	a::before {
		// 		border-radius 0 !important
		// 	}
		// }
		
		@media (min-width mobileW) {
			/.column-link {
				flex-grow 100 !important
				display flex !important
				align-items center !important
				align-content center
				max-height 3.3em
				min-height 2.7em !important
				padding-block 0
				position relative
				box-sizing border-box
				opacity .9
				overflow hidden
				background none !important
				.column-link__icon, /.column-header > button .column-header__icon {
					margin-inline-end 1em !important
					font-size 16px !important
				}
				&::before {
					content: "" !important;
					position absolute
					border-radius: 100px;
					width unset !important
					height unset !important
					inset 0px 0px !important
					// min-height 43px
					opacity 0 !important
					background-color rgba(150,150,150,0.1)
					transition opacity .2s
				}
				&.active {
					opacity 1 !important
					font-weight 600
				}
				&:hover, &:focus {
					&:before {
						opacity 1 !important
					}
				}
				&[href="/lists"] {
					& + div {
						hr {
							display none
						}
						.column-link {
							margin-bottom 2px

							i {
								opacity .2
							}
						}
					}
				}
			}
		}
	}
	@media (min-width mobileW) {
		.getting-started__trends {
			display unset !important
		}
	}
	
	.trends__item {
		display flex !important
	}
	.trends__item__name a {
		&::before {
			content ""
			position absolute
			inset 0
		}
	}
	.trends__item__current {
		display none
	}
	.trends__item__sparkline { 
		overflow visible !important
		svg {
			overflow visible !important
		}
		path:first-child {
			// display none
			filter blur(10px)
		}
		path:last-child {
			mask linear-gradient(to left, black, black, transparent)

		}
	}
	
	
	
	
		.getting-started {
			padding 5px 10px
			// margin-top auto
			border 0
			// background none
			display flex
			flex-direction column
			flex-grow 1
			// overflow visible !important
			
			.flex-spacer {
				display none
			}
			.getting-started__wrapper { 
				background none
				height unset !important
				display flex
				flex-direction column
				// flex-grow 1
				justify-content flex-end
				// align-items center
				// max-height 10em
				> * {
					// width 100%
					box-sizing border-box
				}
				.navigation-bar {
					flex-grow 1
					// max-height 6em
					display flex
					flex-direction column
					align-items flex-start
					justify-content flex-end
					padding 0
					margin 20px
					margin-bottom 5px
					position relative
					// display contents
					> * {
						flex-grow 0
					}
					> a {
						// display contents
						flex-grow 1
						max-height 126px
						margin-bottom 10px
					}
					.icon-button {
						width auto !important
						height auto !important
						padding 20px
						i {
							font-size 20px
						}
					}
				}
				.navigation-bar__profile {
					font-size 1.2em
					line-height 1.4
					margin 10px 0
					
					.permalink {
						font-size 1.2em
					}
				}
				.navigation-bar__actions {
					// margin-bottom 20px
					position absolute
					// inset unset
					right 0
					bottom 10px
					// min-height 4em
					width auto !important
				}
				.account__avatar {
					// position static
					width 126px !important
					min-height 100%
					flex-grow 1
					// height 126px !important
					background-size contain !important
					background-position left
					/.rtl & {
						background-position right !important
					}
					border-radius 0 !important
					// &::before {
					// 	content ""
					// 	background-image inherit
					// 	background-size cover
					// 	background-position center
					// 	position absolute
					// 	inset -200%
					// 	border-radius 100%
					// 	z-index -1
					// 	filter blur(100px)
					// 	opacity .1
					// }
					&::before {
						content ""
						background-image inherit
						position absolute
						background-size cover
						background-position center
						height calc(100% + 100px)
						width 200%
						// width 400%
						border-bottom-right-radius 100%
						// z-index -1
						transform translate(-40%, -20%)
						filter blur(100px)
						opacity .2
						/.rtl & {
							transform translate(40%, -20%)
						}
					}
				}
				> * {
					border 0 !important
					padding 20px
					background none
				}
			}
			.getting-started__footer {
				padding-inline 20px
				a span {
					font-size 1.1em !important
					line-height 2
				}
			}
		}
	
	// ABOUT PAGE
	.about {
		.account {
			margin-top -10px
			padding 0
			overflow visible
			&::after {
				content unset !important
			}
		}
	}
		
	// FOLLOW PROMPT
	&.modal-layout {
		overflow hidden
		.container-alt {
			background inherit
			height 100%
			.public-layout {
				padding 0 !important
			}
			.form-container {
				max-width 500px !important
				padding 0
				background inherit
				display flex
				flex-direction column
				justify-content center
				height 100%
				h2 {
					// display none
					margin 0
					padding 20px
					font-weight 600
				}
				.follow-prompt {
					// height 0
					// flex-grow 1
					margin 0
					border-radius 0 0 var(--radius) var(--radius)
					overflow-y auto
					.activity-stream {
						margin 0 !important
					}
				}
			}
			.entry {
				border-radius var(--radius) !important
			}
		}
		
		#new_remote_follow {
			position sticky
			bottom 0
			padding 20px
			padding-bottom 60px
			background inherit
			// border-radius var(--radius)
			// margin-inline 15px
		}
	}
	
	
	
	compactStatuses() {
		.scrollable:not(.scrollable--flex) {
			padding 0px !important
			// padding-top 15px !important
			padding-bottom 40vh !important
			&::before {
				content ""
				position absolute
				inset 0
				background-color inherit
				z-index -1
			}
			.account-timeline__header {
				margin 0px !important
			}
		}

		{statuses-list} {
			border-radius 0 !important
			&::after {
				// inset-inline 0 !important
			}
		}
		.detailed-status__wrapper {
			margin 0 !important
		}
		.icon-button {
			// flex-grow 1 !important
			justify-content center
		}
	}
	
	// That layout between mobile and regular view
	@media (min-width mobileW) and (max-width responsiveW2 - 1) {
		/.layout-single-column {
			.ui__header {
				background none !important
				border 0
				margin-inline-end 280px
				padding-top 12px
				// z-index 0
				position static
			}
			.columns-area__panels__main {
				border-top-left-radius 0 !important
				border-top-right-radius var(--radius) !important
				overflow clip !important
				margin-inline 10px !important
				margin-top -20px
				.columns-area {
					border-radius 0 var(--radius) 0 0 !important
					padding-bottom 0 !important
				}
			}
			.navigation-panel {
				background none
				border 0
				padding-top 10px
				width 265px !important
				height calc(100vh - 50px) !important
				padding-bottom 10px
				// padding-inline 10px
			}
		}
	}
	
	// Mobile
	@media (max-width: mobileW) {
		compactStatuses()
		.columns-area--mobile > .column {
			// overflow hidden !important
			> div > div {
				animation fadeUp .4s
			}
		}
		.columns-area--mobile > .column > .column-header__wrapper {
			display none
		}
		.ui__header {
			// z-index 101
			position static
			border-bottom 0
			// margin-bottom calc(0px - var(--radius))
			// padding-bottom var(--radius)
			box-sizing content-box
			&::after {
				content ""
				position absolute
				right 46px
				top 53px
				background inherit
				width calc(var(--radius) * 2)
				height var(--radius)
				// border-bottom-left-radius 200%
				// border-radius 100%
				border-radius 100px 100px 0 0
				transform rotate(45deg)
			}
			[href^="/@"] {
				position fixed
				margin-inline -35px
			}
			[href="/publish"] {
				position fixed
				bottom 10px
				// right 10px
				margin-inline -60px
				border-radius 100px !important
				height 60px
				width 60px
				font-size 0
				box-shadow var(--shadow-low)
				&::before {
					content ""
					font normal normal normal 14px/1 FontAwesome
					position absolute
					inset 0
					display flex
					justify-content center
					align-items center
					font-size 24px
					
				}
			}
		}
		.tabs-bar__wrapper {
			top 0
		}
		.column-back-button.column-back-button {
			border-radius 0 !important
		}
		.columns-area__panels {
			// overflow-x scroll !important
			justify-content flex-start
			max-width 100% !important
			flex-wrap nowrap !important
		}
		.columns-area__panels__main {
			padding 0 !important
			max-width unset
			border-top-right-radius var(--radius)
			overflow clip !important
			// z-index 2
			// order 2
			> .columns-area--mobile {
				overflow visible !important
			}
			

			~/ .is-composing .columns-area__panels__main {
				padding-bottom 40px !important
			}
			.scrollable, .account__header__image, > div {
				border-radius 0 !important
			}
			
		}
		.explore__links {
			padding 0 !important
		}
		
		.status {
			padding-top 14px !important
			.status__avatar {
				width 42px !important
				min-width 45px !important
				height 45px !important
				background-size 45px !important
				> div {
					width 100% !important
					height 100% !important
					background-size cover !important
				}
			}
			{media}  {
				margin-bottom 0 !important
			}
		}
		
		.status__action-bar {
			margin-inline -10px
			margin-bottom -5px
			.icon-button {
				margin 0 !important
				justify-content center
				padding .7em !important
			}
		}
		
		.icon-button:after {
			content unset !important
		}
		
		.navigation-panel {
			// border-color transparent !important
			// border-right 1px solid
			// border 0
			// background rgba(100,100,100,0.05)
			// background none
			// padding-top 10px
			margin-top -55px
			padding-top 55px
			height 100vh
			border 0
			margin-inline-start 1px
			padding-bottom 80px
		}
		
		
		
		
		.notification__filter-bar + .scrollable {
			border-radius var(--radius) var(--radius) 0 0 !important
		}
		
		
		// Fix dropdown note preview
		.modal-root__modal .status.light {
			overflow hidden !important
			padding-inline-start 70px !important
		}
		
		
		.columns-area {
			padding-bottom 0 !important
			overflow hidden !important
		}
		.getting-started {
			padding 20px
			padding-bottom 60px
		}
		.getting-started__wrapper {
			flex-grow 1
			overflow visible !important
		}
		
		.compose-form__autosuggest-wrapper {
			border 1px solid var(--border-color)
		}
		/.layout-single-column #mastodon .drawer__inner {
			.navigation-bar {
				padding 20px
				padding-bottom 10px
			}
			.compose-form {
				padding-bottom 100px !important
				
			}
			.compose-form__autosuggest-wrapper {
				border-radius var(--radius) !important
				overflow hidden
			}
			.compose-form__modifiers {
				padding-bottom 50px
			}
			.compose-form__publish {
				margin-top -45px
				padding-inline 8px
				.compose-form__publish-button-wrapper {
					padding-top 0
				}
			}
			.compose-form__buttons-wrapper {
				// background none
				position fixed
				bottom 70px
				border-radius var(--radius-round) !important
				inset-inline 20px
				padding-block 0
				z-index 2
				button {
					padding 7px
					border-radius 0 !important
				}
			}
			
			/.is-composing {
				.modal-root__modal.report-modal {
					width 100vw
					height 100%
					border-radius 0
					.report-modal__comment {
						padding 20px
						padding-bottom 100px
						.button:last-child {
							position fixed
							bottom 0
							left 0
							right 0
							width calc(100% - 40px) !important
							display block !important
							margin 20px
						}
					}
				}
			}
			
		}
		
		// ABOUT PAGE
		.about {
			margin-inline 10px !important
			.account {
				margin-top 0
			}
			.about__meta {
				border-radius var(--radius)
			}
			.about__header__hero, .about__section {
				margin-inline -11px
				width unset
			}
			.about__section {
				margin-bottom 0
				border-bottom 1px solid
			}
		}
		
		
		/.search-popout {
			max-width unset !important
			width calc(100vw - 70px) !important
			position fixed
			left 15px
			
		}
		
	}

	// Advanced View Fixes 
	/.layout-multiple-columns #mastodon .columns-area {
		overflow auto hidden !important
		padding 0
		
		compactStatuses()
		
		.column-header, .scrollable, .column-back-button, .account__header__image {
			border-radius 0 !important	
		}
		.icon-button:after {
			content unset !important
		}
		> div {
			border 0 !important
			padding 0 !important
			&:not(.drawer):not(:last-child) {
				margin-inline-end 2px !important
			}
			&.column {
				flex-grow 1
				max-width 600px
			}
			&:first-child {
				margin-inline-start auto !important
			}
			&:last-child {
				margin-inline-end auto !important
			}
		}
		.drawer {
			padding-inline 6px !important
			padding-top 20px !important
			// width 285px
			.drawer__header {
				border-radius var(--radius-round)
				margin-inline 10px
				overflow hidden
				border 0 !important
				a {
					border 0
					&:first-child {
						padding-inline-start 15px !important
					}
					&:last-child {
						padding-inline-end 15px !important
					}
				}
			}
			.search {
				z-index 2
			}
			& > .drawer__pager {
				overflow visible !important
				&, & > .drawer__inner:not(.darker) {
					// overflow visible
					
				}
				& > .drawer__inner:not(.darker)  {
					top -20px
					// inset-inline -6px
					// padding-inline 6px
					margin-inline-start -6px
					margin-inline-end -4px
					width calc(100% + 10px)
					padding-inline-start 6px
					padding-inline-end 4px
					padding-top 20px
					height calc(100% + 20px)
				}
			}
			.drawer__inner__mastodon {
				margin-inline -6px
				margin-inline-end -4px
			}
		}
		.search {
			margin-inline 10px
		}
		.drawer__inner:not(.darker), .drawer__inner__mastodon {
			background-color transparent
			border 0 !important
		}
		.drawer__inner.darker {
			border-radius var(--radius-round) var(--radius-round) 0 0
			// margin-inline 10px
			// width calc(100% - 20px)
			// padding-bottom 10px
			// height calc(100% - 10px)
		}
		
		.getting-started__trends {
			padding 0px 20px
		}
		
		.status {
			padding-bottom 10px !important
		}
		.detailed-status {
			.status__content {
				font-size 1.3em
			}
		}
		
	}
	
	
	/ .modal-root__container {
		animation bounceIn .7s !important
	}
	@media (prefers-reduced-motion: no-preference) {
		@keyframes bounceIn {
			0% { transform: scale(1.1); opacity: 0 }
			30% { transform: scale(.99); opacity: 1 }
			60% { transform: scale(1.005); opacity: 1 }
			100% { transform: scale(1); opacity: 1 }
		}
		
		@keyframes slideUp {
			from { 
				transform translateY(20px) 
			}
		}
		@keyframes slideUpFade {
			from { 
				transform translateY(20px) 
				filter opacity(0)
			}
		}
		@keyframes slideDowFade {
			from {
				transform translateY(-20px)
				filter opacity(0)
			}
		}
		@keyframes slideUpBig {
			from { 
				transform translateY(50vh) 
			}
		}
		@keyframes fadeUp {
			from { 
				transform translateY(10px) 
				opacity 0
			}
		}
		@keyframes scaleIn {
			from {
				transform scale(.98)
				opacity 0
			}
		}
		@keyframes fadeLeft {
			from {
				transform: translateX(20px) opacity(0)
			}
		}
	}
	
	
}
	
}