/* set colors to avoid having hex codes throughout */
        html {
           --post-separator: #3a3a69;
           --no-alt-text: #1da1f2;
           --post-box-border: #5d5678;
           --bio-border-color: #646482;
        }
        
/* bi pride scrollbar dark mode */
        [data-color-scheme="dark"] {
            --scrollbar-color-thumb: #5a5a5a;
            --scrollbar-color-track: #2f2f47;
            --scrollbar-width: large;
            --scrollbar-width-legacy: 200px;
            --scrollbar-thumb-gradient: linear-gradient(180deg, #613363 0%, #044d61 100%) !important;
            --color-bg-primary: #252534 !important;
            --color-text-primary: #cccccc !important;
        }

/* trans pride scrollbar light mode */
        [data-color-scheme="light"] {
            --scrollbar-color-thumb: #5a5a5a;
            --scrollbar-color-track: #e3e3e3;
            --scrollbar-width: large;
            --scrollbar-width-legacy: 200px;
            --scrollbar-thumb-gradient: linear-gradient(180deg, #f7b6fa 0%, #5fd1f0 100%) !important;
            --color-bg-overlay: #ccc;
            --color-bg-primary: #fdfdfd;
        }
        
        [data-color-scheme="dark"][data-contrast="high"] {
            --color-border-primary: #333343;
        }

        html.custom-scrollbars {
            scrollbar-color: unset !important;
        }

        .scrollable {
            scrollbar-width: unset !important;
        }

        *::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb-gradient) !important;
        }

        *::-webkit-scrollbar-track {
            background: var(--scrollbar-color-track) !important;
        }

        *::-webkit-scrollbar {
            max-width: var(--scrollbar-width-legacy) !important;
            max-height: var(--scrollbar-width-legacy) !important;
        }

/* add scroll bar to reply preview if you're replying to a long post */
        .compose-form .reply-indicator__content {
            overflow: scroll;
            display: block;
        }

/* remove the truncation of paragraphs after the first in some notifications, using an ellipsis instead to denote there's more to read*/
        .notification-group__embedded-status__content p {
            display: block;
        }

        /* emoji embiggening */
        .edit-indicator__content .emojione,
        .reply-indicator__content .emojione,
        .status__content .emojione {
            height: 24px;
            width: 24px;
        }

        .detailed-status .status__content .emojione {
            height: 28px;
            width: 28px;
        }
        
/* fix padding around the post box and remove border */
        .compose-form__highlightable {
            position: relative;
            border: 0;
            background: 0;
            padding: .5rem;
            outline: none;
        }

/* emoji button
* sets the emoji button back in the top right
* thanks Zoë! */
        .compose-form .autosuggest-textarea__textarea {
            padding-right: 24px;
        }

        .compose-form__buttons [aria-label*="emoji"] {
            position: absolute;
            top: .5rem;
            right: .5rem;
        }

        .edit-indicator__cancel {
            position: relative;
            right: 1.1rem;
        }

/* compose form
* Why are the buttons inside? Why?
* thanks Zoë! */
        .compose-form .autosuggest-textarea__textarea,
        .compose-form .spoiler-input__input {
            border: 1px solid var(--background-border-color);
            border-radius: 4px;
        }

        .compose-form__footer {
            display: grid;
            grid-template-areas: "buttons buttons" "dropdowns submit";
            padding: 0;
            margin: 8px;
        }

        .compose-form__buttons {
            grid-area: buttons;
        }

        .compose-form__dropdowns {
            grid-area: dropdowns;
        }

        .compose-form__submit {
            grid-area: submit;
        }

        .compose-form__actions {
            display: contents;
        }

        .compose-form__uploads {
            padding: 0;
        }

        .compose-form .spoiler-input__input {
            border-radius: 4px 4px 0 0;
        }

        .compose-form .spoiler-input + .autosuggest-textarea .autosuggest-textarea__textarea {
            border-radius: 0 0 4px 4px;
            border-top: 0;
        }

        .compose-form .spoiler-input .autosuggest-input {
            border-bottom: 0;
        }

        .compose-form__poll .poll__option {
            padding: 0;
        }
        
/* border on toot compose box */
        .compose-form .autosuggest-textarea__textarea,
        .compose-form .spoiler-input__input {
            border: .1rem solid var(--post-box-border);
        }
        
/* change post input box border when clicked */
        .compose-form .autosuggest-textarea__textarea:focus,
        .compose-form .spoiler-input__input:focus {
            outline: 0;
            border: .1rem solid var(--color-border-brand);
        }

        .emoji-picker-dropdown__menu {
            margin-left: 5px;
        }

        .compose-form__footer [title$="privacy"] span {
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 1px;
            overflow: hidden;
            position: absolute;
            white-space: nowrap;
            width: 1px;
        }

/* changes the alert symbol (A ! inside a triangle) for adding a content warning to a toot to instead just read 'CW' */
        .compose-form__buttons button[aria-label$="content warning"] svg {
            display: none;
        }

        .compose-form__buttons button[aria-label$="content warning"]::before {
            display: flex;
            content: 'CW';
            min-width: 20px;
            min-height: 20px;
            align-items: center;
            justify-content: center;
        }

/* shrinks column width and padding to recover lost horizontal space */
        .column {
            width: 350px;
        }

        .drawer {
            width: 350px;
        }

        .column,
        .drawer {
            padding-inline-end: 2px;
            padding-inline-start: 2px;
        }

        .notification-group {
            padding: 16px 10px;
        }

        .notification-ungrouped {
            padding: 16px 10px;
        }

/* changes the colour of the line separating posts to make it more clearly visible where one post ends and another begins */
        .notification-group,
        .notification-ungrouped,
        .status {
            border-bottom: .1rem solid var(--post-separator);
        }

/* It's 'Toot!'. It was always 'Toot!'. */
        .compose-form__actions .button {
            font-size: 0;
            width: 75px;
            height: 35px;
        }

        .compose-form__actions .button::before {
            font-size: 15px;
            content: 'Toot!';
        }

/* Removes the 'hazard' strip from the account warning notification when viewing a report */
        .account-card__warning-badge {
            background: none;
        }

        a.status-link:not(.mention) {
            text-decoration: underline;
        }

        .media-gallery__item-thumbnail img:not([alt]),
        .audio-player__canvas:not([title]),
        .video-player video:not([title]) {
            /*border: 4px dashed #DD2E44;*/
            border: 3px dashed var(--no-alt-text);
            box-sizing: border-box;
        }

        .status__wrapper-direct::before,
        .status__wrapper-direct.unread::before {
            content: "";
            background: #bb6eb9;
            width: 4px;
            height: 100%;
            display: block;
            position: absolute;
        }

        .item-list .display-name__account {
            display: block!important;
        }

        .item-list .account__details > span:first-child {
            display: none!important;
        }

/* make the new profile layout more spacious in column view */
        ._comp_account_header__bioButtonsWrapper {
            margin-top: 16px !important;
            margin-bottom: 16px !important;
            border-top: .1rem solid var(--bio-border-color);
            border-bottom: .1rem solid var(--bio-border-color);
            padding-top: 16px !important;
            padding-bottom: 16px !important;
        }

        ._comp_account_header__handleHelpButton {
            width: 290px !important;
            margin-top: 15px !important;
        }

        ._comp_badge__content {
            overflow: visible !important;
        }

        ._comp_account_header__buttonsDesktop {
            gap: 4px !important;
            margin-right: -10px !important;
        }

        ._comp_account_header__name > h1 {
            font-size: 20px !important;
        }

        ._comp_account_header__nameWrapper {
            min-width: 100%
        }

/* fix transparent panels in light mode*/
        [data-color-scheme="light"] .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
            background: #eee !important;
            background-color: #eee !important;
        }

        [data-color-scheme="light"] .dialog-modal {
            background: #fff !important;
        }

        [data-color-scheme="light"] ._comp_account_header__handleHelp {
            background: #fff !important;
        }

        [data-color-scheme="light"] .dropdown-menu.bottom,
        .language-dropdown__dropdown,
        ._comp_account_header__handleHelp {
            background: #fff !important;
        }

/* recolour content warning */
        [data-color-scheme="dark"] .content-warning {
            background: #322d46;
            border: 1px solid #464061;
        }

        body.theme-default .column,
        body.theme-default .drawer {
            background: #252537 !important;
        }

        [data-color-scheme="dark"],
        html:not([data-color-scheme]) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
            background: #252534 !important;
            background-color: #252534 !important;
        }

        [data-color-scheme="dark"] .dialog-modal {
            background: #252534 !important;
        }

        [data-color-scheme="dark"] .detailed-status__wrapper-direct .detailed-status,
        .detailed-status__wrapper-direct {
            background: #1d1a2f;
        }

        [data-color-scheme="dark"] .status__wrapper-direct,
        .notification-ungrouped--direct,
        .notification-group--direct,
        .notification-group--annual-report {
            background: #1d1a2f;
        }

        [data-color-scheme="light"] .status .content-warning {
            background: #d2d5ff;
        }

/* transparent avatar */
        .account__avatar {
            background: transparent;
        }

/* make content wrappers gay again */
.compose-form .spoiler-input__border {
                background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 154, 0) 10%, rgb(208, 222, 33) 20%, rgb(79, 220, 74) 30%, rgb(63, 218, 216) 40%, rgb(47, 201, 226) 50%, rgb(28, 127, 238) 60%, rgb(95, 21, 242) 70%, rgb(186, 12, 248) 80%, rgb(251, 7, 217) 90%, rgb(255, 0, 0) 100%);
            }