/* Why would we want to remove the underline from links? */
a.status-link:not(.mention) {
  text-decoration: underline;
}

/* Bottom center that instance mascot! */
.drawer__inner__mastodon > img {
  -o-object-position: bottom center;
  object-position: bottom center;
  margin: 0 auto;
}

/* Let's make trends fit on the screen better */
.getting-started__trends .trends__item:nth-of-type(2),
.getting-started__trends .trends__item:nth-of-type(3) {
  display: flex !important;
}

/* Make the "Why do you want to join?" more obvious on signup */
#new_user .user_invite_request_text > label,
#new_user .user_invite_request_text > .hint {
  font-size: 16px;
  line-height: 1.5;
}

/* We're making DMs more obvious and queer! */
.status__wrapper-direct,
.status-direct.status__wrapper-reply,
.detailed-status-direct,
.status-direct.status--in-thread  {
  border-left: solid 5px transparent !important;
  position: relative;
}
.status__wrapper-direct::before,
.status-direct.status__wrapper-reply::before,
.detailed-status-direct::before /*,
.status-direct.status--in-thread::before*/ {
  content: '';
  position: absolute;
  width: 5px;
  max-width: 5px;
  height: calc(100% - 16px);
  top: 8px; right: 0; bottom: 8px; left: 0;
  z-index: 1;
  margin-left: -5px;
  background: linear-gradient(to bottom, #000 0%, #784f16 15%, #e40303 20%, #ff8c00 30%, #ffed00 40%, #008026 50%, #004dff 60%, #750787 70%, #f6a8b7 85%, #5ccefa 100%);
  border-radius: 0 5px 5px 0;
}

/* Increase emoji size slightly on hover */
.status__content:not(.status__content--collapsed) {
  overflow: visible;
}
.status__content .emojione, .account__header__bio .emojione {
    transition:transform .2s, filter .2s;
}
.status__content .emojione:hover, .account__header__bio .emojione:hover {
    transform: scale(2.2);
    filter: drop-shadow(0 0 3px #202020);
}

/* Make remove button on list modal more distinct */
.list-adder__lists .account__relationship button > .icon-times {
    color: #cc5959 !important;
}

/* Make pinned statuses more noticeable */
.status[data-featured="true"] .status__prepend span {
  background-color: #d3dbe9;
  padding: 0.25rem 0.5rem;
  width: auto;
  display: inline-block;
  border: 1px solid rgba(40,44,55,.5);
  border-radius: 3px;
}

.skin-default .status[data-featured="true"] .status__prepend span {
  background-color: #424754;
  border: 1px solid rgba(217,225,232,.5);
  color: #fff;
}

/* Make button margin smaller */

.status__action-bar-button {
  margin-inline-end: 10px !important;
}

/* Make icons smaller */

.icon {
  height: 20px;
  width: 20px;
}

/* Make boost icons and such smaller above posts */


/* .icon.icon-retweet.status__prepend-icon {
  height: 18px;
  width: 18px;
}

.status__prepend-icon-wrapper {
    inset-inline-start: -20px;
} */

/* Fixes Media Upload Buttons on High Contrast */

.skin-contrast .compose-form__upload .icon-button {
    background-color: rgba(162,169,188,.75);
    color: #fff;
}

.skin-contrast .compose-form__upload .icon-button:active,
.skin-contrast .compose-form__upload .icon-button:focus,
.skin-contrast .compose-form__upload .icon-button:hover {
    background-color: rgba(162,169,188,1);
    color: #000;
}

.skin-contrast .status[data-featured="true"] .status__prepend span {
    color: black;
    background-color: white;
}

.skin-contrast .compose-form .autosuggest-input label .autosuggest-textarea__textarea::-moz-placeholder,.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea::-moz-placeholder {
    color: grey;
}

.skin-contrast .compose-form .autosuggest-input label .autosuggest-textarea__textarea::placeholder,
.skin-contrast .compose-form .autosuggest-textarea label .autosuggest-textarea__textarea::placeholder {
    color: grey;
}

.skin-contrast .upload-progress {
  color: grey;
}

.account__header__bio .emojione {
    height: 20px;
    margin: -3px 0 0;
    width: 20px;
}


/* With new theme, make sure character count is visible */

.wide .columns-area:not(.columns-area--mobile) .drawer {
    min-width: 320px;
}

/* With new theme, make sure time is visible */

.status__action-bar {
  gap: 8px;
}

/* For when there's a lot of width, but not a lot of height; make sure that elements still stay visible, such as the visibility picker and the reply textbox */

@media (max-height: 550px) {
     .link-footer {display:none}
  .search {margin-bottom: 8px}
  .compose-form {gap: 8px}
  .reply-indicator__content {display:none}
}

:root {
  --background-color-alt: #282c37;
  --visibility-global: #1976d2;
  --visibility-unlisted: #388e3c;
  --visibility-follower: #ffa000;
  --visibility-private: #d32f2f;

  --visibility-private-brighter: oklab(from var(--visibility-private) calc(l + 0.05) a b)
}

.hicolor-privacy-icons
.compose-form__dropdowns
.dropdown-button:not(.active):has(.icon-globe)
{
      color: var(--visibility-global);
      border-color: var(--visibility-global);
}

.hicolor-privacy-icons
.compose-form__dropdowns
.dropdown-button:not(.active):has(.icon-unlock)
{
      color: var(--visibility-unlisted);
      border-color: var(--visibility-unlisted);
}

.hicolor-privacy-icons
.compose-form__dropdowns
.dropdown-button:not(.active):has(.icon-lock)
{
      color: var(--visibility-follower);
      border-color: var(--visibility-follower);
}

.hicolor-privacy-icons
.compose-form__dropdowns
.dropdown-button:not(.active):has(.icon-at)
{
      color: var(--visibility-private-brighter);
      border-color: var(--visibility-private-brighter);
}

body.flavour-glitch.skin-default .featured-carousel > *,
body.flavour-glitch.skin-default .column > *:not(.loading-indicator),
body.flavour-glitch.skin-default .column-header__wrapper {
    background: var(--background-color-alt);
    --background-border-color: rgba(120, 120, 200, .2);
}

@media screen and (min-width: 1174px) {
  body.flavour-glitch.skin-default .column-header__wrapper {
    border-radius: 4px 4px 0 0;
  }
  
  body.flavour-glitch.skin-default .column > *{
    border-radius: 0 0 4px 4px;
  }
}

body.flavour-glitch.skin-default .status.collapsed .status__content:after {
    background: linear-gradient(transparent, var(--background-color-alt));
}

.compose-form__submit .button.secondary-post-button {
    padding-bottom: 3px;
}

/* Label and orange border on no alt text */

.media-gallery__item__badges:not(:has(.media-gallery__alt__label))::after {
  content: "NO ALT";
  background: rgb(172 90 0 / 75%);
  border-radius: 4px;
  text-align: center;
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  padding: 2px 6px;
  pointer-events: none;
  z-index: 1;
}

.audio-player__canvas:not([title]), 
.audio-player__canvas[title=""],
.video-player video:not([title]),
.video-player video[title=""] {
    border-left: 4px solid #ff8500;
    box-sizing: border-box;
}

/* Add more contrast to edit / post notifications */

.flavour-glitch.skin-default .status__wrapper:has(aside svg.icon-bell, aside svg.icon-pencil) .muted .status__avatar,
.flavour-glitch.skin-default .status__wrapper:has(aside svg.icon-bell, aside svg.icon-pencil) .muted .status__content,
.flavour-glitch.skin-default .status__wrapper:has(aside svg.icon-bell, aside svg.icon-pencil) .muted .status__content a,
.flavour-glitch.skin-default .status__wrapper:has(aside svg.icon-bell, aside svg.icon-pencil) .muted .status__content p,
.flavour-glitch.skin-default .status__wrapper:has(aside svg.icon-bell, aside svg.icon-pencil) .muted .status__content__text, 
.flavour-glitch.skin-default .status__wrapper:has(aside svg.icon-bell, aside svg.icon-pencil) .muted .emojione, 
.flavour-glitch.skin-default .status__wrapper:has(aside svg.icon-bell, aside svg.icon-pencil) .muted .status__display-name strong {
  color: #bac3dd;
  opacity: 1;
}

@media screen and (max-width: 630px) {
  .ui__header__logo {
    background-image: url('https://media.tech.lgbt/site_uploads/files/000/000/004/original/1a16a73feb5c2463.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 5px;
  }

  .ui__header__logo .logo--wordmark {
    display: none;
  }
}

/* Happy April Fools :) */

/* 
@font-face {
    font-family: "Comic Sans";
    src: url('/1stfonts/comic_sans.ttf') format('truetype'),
        url('/1stfonts/comic_sans.woff2') format('woff2'),
        url('/1stfonts/comic_sans.woff') format('woff');
}

body:not(.system-font) *,
body:not(.system-font),
body:not(.system-font) button,
body:not(.system-font) div,
body:not(.system-font) a,
body:not(.system-font) span,
body:not(.system-font) #mastodon,
body:not(.system-font) #mastodon * {
  font-family: "Comic Sans MS", "Comic Sans", Chalkboard, "Chalkboard SE", sans-serif;
}

.compose-form__submit [type="submit"] {
  font-size: 0px
}

.compose-form__submit [type="submit"]:after {
  font-size: 14px;
  content: "Poke";
}
*/