:root {
  --accent: #fecc66;
  --text_light: #efc414;
  --text_dark: #000;
  --text_accent: #000;
  --action_button: #fff;
  --text_link: #ece7bf;
  --bg: #000;
  --fav: yellow;
  --bg_fav: #383800;
  --warning: #b60100;
  --info: #ece7bf;
  --scroll: #96a0ff;
  --announcement: #ece7bf;
  --mDefault: #282c37;
  --text_mute: #bccdfa;
}

body:not(.admin), body.app-body, .tabs-bar__wrapper {
	background: var(--bg);
	color: var(--text_light);
}

.getting-started__wrapper, .tabs-bar__wrapper, .tabs-bar__portal, .column-header__wrapper {
	background-color: var(--bg);	
}

.announcements__container {
	border-left: 5px solid var(--announcement);
}

.column-header__collapsible-inner, .setting-toggle__label {
	color: var(--text_light);
	background-color: var(--bg);
	border: none;
}

.drawer__header {
	background-color: var(--accent);
	color: var(--text_light);
	border-radius: 30px;
	border: none;
}

.drawer__tab:hover {
	background-color: black;
}
.drawer__inner__mastodon, .drawer__inner {
	background: black;
	border: none;
}

.column-subheading {
  background: black;
  color: var(--text_light);
  border: none;
  border-left: 15px solid var(--accent);
  border-right: 15px solid var(--accent);
  border-radius: 10px;
  text-align: right;
}

.column-link {
	border: none;
	color: var(--text_light);
	background: black;
}

a, .account__relationship button , .link-footer{
	color: var(--text_link);
}

.admin-wrapper a, .account__header__extra__links a {
	color: var(--mDefault);
}

.account__header__bio .account__header__fields .verified a, .account__header__bio .account__header__fields .verified dd, .account__header__bio .account__header__fields .verified dt {
  color: #4a905f;
}

.navigation-panel {
	background-color: var(--accent);
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.navigation-panel hr {
	border: none;
}

.navigation-panel a.active {

}

.navigation-panel a.active::before {
    content: " ";
    padding: 1em 0;
    border-left: 10px solid var(--accent);
    transition-property: all;
	transition: .3s all;
}

.navigation-panel a {
	color: var(--text_light);
}

.columns-area__panels__pane {
	border-radius: 30px;
}

.ui-header {
  border-radius: 30px;
  background: var(--accent);
}

.navigation-panel__logo svg{
	display:none;
}

a.column-link--transparent {
    background-color: var(--bg);
    padding: 0;
    border-bottom: 3px solid var(--bg);
    border-top: 10px solid var(--bg);;
}

a.column-link--transparent i.column-link__icon {
    margin: 1.2em 1em;
    margin-right: 0;
}

a.column-link--transparent span::after {
    content: " ";
    border-left: 10px solid var(--accent);
    border-right: 30px solid var(--accent);
    border-radius: 0px 30px 30px 0px;
    padding: 2em 0.3em;
    position: relative;
    float: right;
}

a.column-link--transparent span {
  background: var(--bg);
  color: var(--text_light);
  min-width: 100%;
  margin: 2em auto;

}

.column-back-button, .column-header {
  background: var(--accent);
  border: none;
  flex-direction: row-reverse;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.column-header>button {
	background: black;
	max-width: 30%;
	text-align: center;
	margin-left: auto;
	margin-right: 40px;
}

.column-header__buttons > button {
	background: black;
	color: var(--text_light);
}

.column-header>.column-header__back-button {
  color: var(--text_light);
}


.column-inline-form, .column>.scrollable, .error-column, .getting-started, .regeneration-indicator {
  background: transparent;
  border: none;
  color: var(--text_light);
}

.empty-column-indicator, .error-column {
  color: var(--accent);
  background: var(--bg);
}

.reply-indicator__content, .status__content, .status__prepend, .status__prepend .status__display-name strong, .account__display-name strong, .status__display-name strong, .navigation-bar strong, .detailed-status__display-name strong, .trends__item__name {
	color: var(--text_light);
}

.focusable:focus {
  background: none;
  border-right: 4px solid var(--accent);
}

.status {
	border-bottom: 10px solid var(--accent);
}

.status-card__title, .status-card__description {
	color: var(--text_light);
}

.status-card, .media-gallery__item {
	border: none;
	border-left: 16px solid var(--accent);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	padding-left: 7px;
}

.spoiler-button--minified {
	left: 28px;
}

a.status-card:hover {
	background: transparent;
	border-top: 1px solid var(--accent);
	border-bottom: 1px solid var(--accent);
}

.detailed-status {
  background: var(--bg);
  border: 1px solid var(--accent);
}

.detailed-status__action-bar {
	background: var(--accent);
	border: none;
}

.status__action-bar > button,
.detailed-status__action-bar button {
	color: var(--action_button);
}

.status__action-bar > button.active,
.detailed-status__action-bar button.active {
	color: var(--text_light);
}

.icon-button.active {
	color: var(--text_light);	
}

button.icon-button i.fa-retweet {
	  filter: hue-rotate(215deg) brightness(9);
}

.dropdown-menu {
	background: var(--bg);
	border-left: 10px solid var(--accent);
	border-top: 20px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	border-radius: 15px;
}

.dropdown-menu__item a, .dropdown-menu__item button {
  background: var(--bg);
  color: var(--accent);
}

.dropdown-menu__arrow {
	display: none;
}

.muted .status__content, .muted .status__content a, .muted .status__content p, .muted .status__display-name strong, article .notification__message {
  color: var(--text_mute);
}

.account__section-headline button, .notification__filter-bar button, .notification__filter-bar, .account__section-headline {
	background: var(--bg);
	color: var(--text_light);
	border: none;
	transition: .3s all;
}

.notification__filter-bar button {
	font-size: bigger;
}
.account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active {
  border-left: 20px solid var(--accent);
  border-right: 20px solid var(--accent);
  color: var(--accent);
  border-radius: 20px;
  border-top: none ;
  border-bottom: none ;
  margin-top: 10px;
  color: var(--text_link);
}

.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
  overflow: hidden;
  margin-top: 15px;
  padding-top: 0;
  padding-left: 5px;
  border-radius: 30px;
  border-left: 20px solid var(--accent);
  background: var(--bg);
}

.compose-form__publish-button-wrapper > button {
  border-radius: 0;
}

.button {
  background-color: var(--accent);
  margin: 0;	
}

.button:active, .button:focus {
  transform: scale(0.5);
  transition: .25s all;
  margin: 0;
}

.panel-container {
   border-top-left-radius: 30px;
   border-left: 30px solid #58e;
}
.panel-title-container {
   border-right: 30px solid #58e;
   border-radius: 30px;
   background: #58e;
}
 
div.panel-title {
  background: #58e;
 
}
 
div.panel-title h2 {
   text-align: right;
    position: relative;
    padding: 8px;
    background: var(--bg);
    margin-right: 0;
    margin-left: auto !important;
   font-weight: bold; font-size: larger;
   color: #8ff;
   text-transform: uppercase;
}

.columns-area__panels {
  min-height: calc(100vh - 55px);
  flex-direction: row-reverse;
}

.audio-player, .compose-form .spoiler-input__input, .compose-form__autosuggest-wrapper, .compose-form__poll-wrapper select, .poll__option input[type=text], .report-dialog-modal__textarea, .search__input, .setting-text {
	border: none;
  border-bottom: 1px solid var(--accent);
  background: var(--bg);
  color: var(--text_light);
}

input::placeholder {
	color: var(--text_light);
}

.compose-form .autosuggest-textarea__suggestions, .compose-form .compose-form__buttons-wrapper {
  background: var(--accent);
  color: var(--text_accent);
  border: none;
}

.compose-form .compose-form__warning {
  color: var(--text_light);

}

.compose-form button, .compose-form .character-counter {
	color: var(--text_accent);
}

.compose-form .text-icon-button.active {
	color: black;
}

.compose-form .autosuggest-textarea__suggestions__item.selected {
	background-color: var(--accent);
}

.compose-form .autosuggest-textarea__suggestions__item {
	background-color: black;
}

.trends__item__sparkline {
	background: white;
}

.load-more {
	color: var(--text_link);
}

.column-header__wrapper .announcements {
  z-index: 1;
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 5px solid var(--accent);
}

@media screen and (max-width: 1174px){
	.ui__header {
		border-radius: 30px;
		border-bottom-left-radius: 0;
		background-color: var(--accent);
		border: none;
	}
	
	.ui__header__logo {
		display:none;
	}
	
	.ui__header__links {
		width: 100%;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	
	.ui__header__links a.button {
		background: black;
		border-radius: 40px;
		padding: 0 1em;
	}
	
	.ui__header__links a.button > span {
		padding: 1em;
		line-height: 2.5em;
		border-left: 5px solid var(--accent);
	}
	
	.ui__header__links a.button:active {
		background-color: var(--accent);
	}

	.navigation-panel {
		border-top-left-radius: 0;
	}
	
	.column-back-button {
		border: none;
		position: absolute;
		top: -48px;
		border-radius: 30px;
		background: black;
		width: auto;
		color: var(--text_accent);
		padding: 13px 26px;
		margin-right: 10px;
		line-height: 1em;
	}
	
	.column-header {
		background: transparent;
	}
	
	.column-header > button {
		border-radius: 0 0px 10px 10px;
		background-color: var(--accent);
		color: var(--text_accent);
	}
	
	.column-back-button button {
		background: black;
		max-width: 40%;
		text-align: right;
	}
	
	.ui {
		/*flex-direction: column-reverse;*/
	}
	
	.explore__search-header {
		background: transparent;
	}
	
	.column-header__buttons {
		border-bottom-right-radius: 15px;
		overflow: hidden;
	}
	
	.tabs-bar__wrapper, .tabs-bar__portal, .column-header__wrapper {
		background-color: transparent;
		
	}
	
}

.about__meta, .about__meta h4 {
	background-color: black;
	color: var(--text_light);
	border: none;
}

.about__meta__column {
	border-left: 10px solid var(--accent);
	border-radius: 10px 0px 0px 10px;
}

.about__meta__divider {
	display: none;
}


.status:has( button.icon-button.star-icon.active ) {
	background-color: var(--bg_fav);
	border-radius:10px;
	transition: 0.25s all;
}

button.icon-button.star-icon.active {
	color: var(--fav);
}

.about__header h1 {
  border-left: 30px solid var(--accent);
  border-right: 30px solid var(--accent);
  border-radius: 30px;
}

.about__header p {
	color: var(--text_light);
}

.about__section__body {
	border: none;
	border-left: 30px solid var(--accent);
	border-radius: 0px 0px 0px 30px;
}

.about__section [role="button"] {
	color: black;
	background-color: var(--accent);
	border: none;
	border-radius: 30px 30px 30px 30px;
	text-align: right;
	padding-right: 4em;
}

.about__section.active [role="button"] {
	border-radius: 30px 30px 30px 0px;
}

.conversation__content__relative-time, .conversation__content__names, .rules-list, .about__footer, .link-footer p, .prose, .prose b, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .prose strong, .prose ul>li:before   {
	color: var(--text_light);
}

.dismissable-banner, .dismissable-banner__message, .follow_requests-unlocked_explanation {
	color: var(--text_light);
	border: none;
	background: black;
}

.dismissable-banner {
	border-left: 10px solid var(--info);
	border-top: 20px solid var(--info);
	border-radius: 10px;
}

.dismissable-banner__action .icon-button {
	color: var(--info);
}

body, button, h1,h2,h3,h4,h5,h6 {
	font-family: opendyslexic;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border: 0 #000;
  border-radius: 50px;
}

::-webkit-scrollbar-track {
  border: 0 #f000;
  border-radius: 0;
  background: black;
}

@keyframes vloader {
    0% {
        transform: translateX(0) scaleY(0.0);
        opacity: 0;
    }
    
    50% { 
        transform: translateX(0) scaleY(0.0);
        opacity: 0.9;
    }
    
    
 
    100% {
        transform: translateX(0) scaleY(1);
        opacity: 1.0;
    }
}
 
@keyframes loader {
    0% {
        transform: translateX(0) scaleX(0.0);
        opacity: 0;
    }
    
    50% { 
        transform: translateX(0) scaleX(0.0);
        opacity: 0.5;
    }
    
    
 
    100% {
        transform: translateX(0) scaleX(1);
        opacity: 1.0;
    }
}