body {
    --yeah-link-color: #4bacd2;

    --yeah-font: Arial, sans-serif;
    --yeah-tweet-font: Arial, sans-serif;
    --yeah-font-override: "JustBird", var(--yeah-font);
    --yeah-icon-font: "RosettaIcons2";

    --yeah-video-cover: contain;
    --yeah-background-color: white;
    --yeah-dark-background-color: #f5f8fa;
    --yeah-darker-background-color: #f5f8fa;
    --yeah-almost-black: #292f33;
    --yeah-border: #e1e8ed;
    --yeah-light-gray: #8899a6;
    --yeah-darker-gray: #66757f;
    --yeah-lil-darker-gray: #6a7d8c;
    --yeah-default-text-color: black;
    --yeah-new-tweet-over: rgba(255, 255, 255, 0.92);
    --yeah-input-background: white;
    --yeah-active-message: #ebf7ff;
    --yeah-more-color: #30F;
    --yeah-choice-bg: rgb(207, 217, 222);
    --yeah-list-actions-bg: #efefef;
    --yeah-menu-bg: rgba(255,255,255,0.98);
    --yeah-cw: rgb(197, 136, 136);

    --yeah-favorite-icon-content: "\f148";
    --yeah-favorite-icon-content-click: "\f148";
    --yeah-favorite-icon-color: rgb(249, 24, 128);

    --yeah-home-icon-active: "\f053";
    --yeah-notification-icon-active: "\f055";
    --yeah-messages-icon-active: "\f054";
    --yeah-profile-icon-active: "\f056";
    --yeah-bookmark-icon-active: "\f093";
    --yeah-lists-icon-active: "\f094";
    --yeah-at-icon: "\f050";
    --yeah-add-media-icon: "\f110";
    --yeah-birthday-icon: "\f033";
    --yeah-joined-icon: "\f177";
}

/* Dark mode */
body[style^="background-color: rgb(21, 32, 43);"], body.body-dark {
    --yeah-background-color: #1b2836;
    --yeah-dark-background-color: #171f2a;
    --yeah-darker-background-color: #141d26;
    --yeah-almost-black: #d4e3ed;
    --yeah-border: #141d26;
    --yeah-darker-gray: #c9c9c9;
    --yeah-lil-darker-gray: #8394a1;
    --yeah-light-gray: #8394a1;
    --yeah-default-text-color: white;
    --yeah-new-tweet-over: rgba(27, 40, 54, 0.92);
    --yeah-input-background: #15202a;
    --yeah-active-message: #141d26;
    --yeah-more-color: #a088ff;
    --yeah-choice-bg: rgb(44 62 71);
    --yeah-list-actions-bg: #19212b;
    --yeah-menu-bg: rgba(34,46,60,0.98);
}

/* Pitch black mode */
body[style^="background-color: rgb(0, 0, 0);"], body.body-pitch-black {
    --yeah-background-color: #000000;
    --yeah-dark-background-color: #000000;
    --yeah-darker-background-color: #000000;
    --yeah-almost-black: #d4e3ed;
    --yeah-border: #222222;
    --yeah-darker-gray: #c9c9c9;
    --yeah-lil-darker-gray: #8394a1;
    --yeah-light-gray: #8394a1;
    --yeah-default-text-color: white;
    --yeah-new-tweet-over: rgb(0 0 0 / 92%);
    --yeah-input-background: #090a0a;
    --yeah-active-message: #0c0d0e;
    --yeah-more-color: #a088ff;
    --yeah-choice-bg: rgb(25 28 30);
    --yeah-list-actions-bg: #19212b;
    --yeah-menu-bg: rgb(16 19 22 / 98%);
}

@font-face {
    font-family: 'RosettaIcons2';
    src: url(chrome-extension://__MSG_@@extension_id__/fonts/rosetta.woff);
}

.yeah-box {
    background-color: var(--yeah-background-color);
    border: 1px solid var(--yeah-border);
    border-radius: 5px
}

.yeah-tweet {
    background-color: var(--yeah-background-color);
    border-left: 1px solid var(--yeah-border);
    border-right: 1px solid var(--yeah-border);
    border-top: 1px solid var(--yeah-border);
    cursor: pointer;
    min-height: 75px;
    padding: 10px
}
.yeah-tweet:focus {
    outline: none;
}

.tweet-avatar-link {
    float: left;
    margin-right: 10px
}

.tweet-header,
.tweet-header-quote {
    display: contents
}

.tweet-header-info,
.tweet-header-info-quote {
    bottom: 3px;
    display: inline;
    position: relative;
    text-decoration: none
}

.tweet-header-info-quote {
    bottom: 8px !important
}

.yeah-tweet .tweet-header-name:hover {
    color: var(--yeah-link-color)
}

.yeah-tweet .tweet-header-name,
.yeah-tweet .tweet-header-name-quote {
    color: var(--yeah-almost-black);
    display: inline;
    font-size: 14px;
    font-weight: 700
}

.yeah-tweet .tweet-header-handle,
.yeah-tweet .tweet-time,
.yeah-tweet .tweet-header-handle-quote,
.yeah-tweet .tweet-time-quote {
    color: var(--yeah-light-gray);
    direction: ltr;
    display: inline;
    font-size: 13px;
    text-decoration: none;
    unicode-bidi: embed
}

.yeah-tweet .tweet-body-text-span a {
    color: var(--yeah-link-color);
}

.tweet-time {
    bottom: 3px;
    position: relative
}

.tweet-time-quote {
    bottom: 8px;
    position: relative
}

.yeah-tweet .tweet-time::before {
    color: var(--yeah-light-gray) !important;
    content: "\00b7";
    margin-right: 3px
}

.yeah-tweet .tweet-time:hover {
    color: var(--yeah-link-color);
    text-decoration: underline
}

.yeah-tweet .tweet-body,
.yeah-tweet .tweet-interact,
.yeah-tweet .tweet-body-text-quote {
    display: flow-root;
    color: var(--yeah-almost-black);
}
.yeah-tweet .tweet-body {
    min-width: 490px;
}
.yeah-tweet .tweet-body-text-quote {
    overflow-x: hidden;
}
.tweet-header-name-main {
    width: 300px;
}

.yeah-tweet .tweet-body-text-long {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px
}

.yeah-tweet .tweet-body-text a {
    text-decoration: none
}

.tweet-interact {
    margin-top: 10px;
    user-select: none
}

.tweet-interact-reply:before {
    content: "\f151"
}

.yeah-tweet .tweet-interact-more:before {
    content: "\f150"
}

.tweet-yeah-interact-favorited,
.tweet-yeah-interact-favorited:before{
    content: var(--yeah-favorite-icon-content-click) !important
}
.tweet-reply-text:focus,
.tweet-quote-text:focus {
    outline: none
}

.tweet-reply-button,
.tweet-quote-button {
    bottom: 16px;
    height: 42px;
    position: relative
}

.tweet-top {
    font-size: 13px;
    margin-bottom: 7px;
    margin-left: 35px
}

.yeah-tweet .tweet-top-icon,
.yeah-tweet .tweet-top-text {
    color: var(--yeah-light-gray);
    display: inline-block
}

.yeah-tweet .tweet-top-text a {
    color: var(--yeah-light-gray);
    text-decoration: none
}

.yeah-tweet .tweet-top-text a:hover {
    color: var(--yeah-link-color) !important;
    text-decoration: underline
}

.tweet-interact-more-menu {
    margin-left: 100px
}

.tweet-media {
    display: block;
    max-width: 500px;
    position: relative;
    right: 5px;
    width: fit-content;
}

.yeah-tweet .tweet-media-element {
    block-size: auto;
    border: 1px solid var(--yeah-border);
    border-radius: 7px;
    margin: 5px;
    object-fit: cover;
    vertical-align: top
}

.tweet-media video {
    object-fit: var(--yeah-video-cover);
}

.tweet-media-element-censor {
    -moz-filter: blur(20px);
    -webkit-filter: blur(20px);
    cursor: pointer;
    filter: blur(20px);
    transform: scale(1.03)
}
.yeah-tweet a:hover,
.yeah-tweet .tweet-header-info:hover,
.yeah-tweet .tweet-body-text a:hover {
    text-decoration: underline
}

.yeah-tweet .tweet-avatar,
.yeah-tweet .tweet-avatar-quote {
    border-radius: 50px;
}

.tweet-interact-views:before {
    content: "\f200";
}

.tweet-interact-retweet-menu-quote:before,
.tweet-interact-more-menu-embed:before {
    content: "\f204"
}

.tweet-no-top {
    border-top: none !important
}

.poll-question, .poll-date {
    border: 1px solid var(--yeah-border);
    border-radius: 5px;
    font: 16px var(--yeah-font-override);
    padding: 3px;
    width: 100%
}
.tweet-self-thread-div {
    margin-top: 8px;
}
.user-stat-div:hover {
    text-decoration: none !important;
}

.tweet-no-top {
    border-top: none !important
}

/* weird rendering bug */
.yeah-tweet:first-child:not(.tweet-top-retweet-label) .tweet-translate-after {
    margin-right: -20px;
}
.yeah-tweet:not(.tweet-view):last-child {
    border-bottom: 1px solid var(--yeah-border) !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


.tweet-interact {
    margin-top: 10px;
    user-select: none
}

.yeah-tweet .tweet-interact span {
    color: var(--yeah-light-gray);
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
    margin-right: 20px;
    position: relative;
    text-decoration: none;
    top: -2px;
    font-family: var(--font), Arial;
}


.yeah-tweet .tweet-interact span:before {
    -webkit-font-smoothing: antialiased;
    color: #ccd6dd;
    cursor: pointer;
    font: 400 16px var(--yeah-icon-font);
    margin-right: 10px;
    vertical-align: sub;
    display: inline-block;
    min-width: 16px;
}

.tweet-interact-reply:before {
    content: "\f151"
}

.yeah-tweet .tweet-yeah-interact-favorite:before {
    content: var(--yeah-favorite-icon-content)
}

.tweet-interact-more:before {
    content: "\f150"
}

.tweet-yeah-interact-favorited,
.tweet-yeah-interact-favorited:before{
    content: var(--yeah-favorite-icon-content-click) !important
}
.tweet-reply-text:focus,
.tweet-quote-text:focus {
    outline: none
}

.tweet-reply-button,
.tweet-quote-button {
    bottom: 16px;
    height: 42px;
    position: relative
}

.yeah-tweet .tweet-reply-to {
    display: flow-root;
    font-size: 13px;
    color: var(--yeah-light-gray);
    padding-bottom: 3px;
}

.yeah-tweet .tweet-reply-to a {
    text-decoration: none;
    color: var(--yeah-link-color);
}

.yeah-tweet .tweet-interact-reply[data-val="0"],
.yeah-tweet .tweet-interact-retweet[data-val="0"],
.yeah-tweet .tweet-yeah-interact-favorite[data-val="0"],
.yeah-tweet .tweet-interact-bookmark[data-val="0"] {
    color: var(--yeah-background-color);
}

.yeah-tweet:hover:not(.tweet-main) {
    background-color: var(--yeah-dark-background-color)
}
.yeah-tweet:hover .tweet-interact-reply[data-val="0"],
.yeah-tweet:hover .tweet-interact-retweet[data-val="0"],
.yeah-tweet:hover .tweet-yeah-interact-favorite[data-val="0"],
.yeah-tweet:hover:not(.tweet-main) .tweet-interact-bookmark[data-val="0"] {
    color: var(--yeah-dark-background-color);
}


.yeah-tweet .tweet-interact-retweet:before,
.yeah-tweet .tweet-interact-retweet-menu-retweet:before {
    content: "\f152"
}
.yeah-tweet .tweet-interact-retweeted,
.yeah-tweet .tweet-interact-retweeted:before {
    color: #5c913b !important
}
.yeah-tweet .tweet-yeah-interact-favorited,
.yeah-tweet .tweet-yeah-interact-favorited:before {
    color: var(--yeah-favorite-icon-color) !important
}

.tweet-media-video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    z-index: 1;
    transition: 0.2s;
    direction: ltr;
}
.tweet-media-video-overlay-play {
    width: 75px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.7);
    border: 4px solid #1da1f2;
    transition: 0.2s;
}
.tweet-media-video-overlay:hover .tweet-media-video-overlay-play {
    border: 4px solid white;
    transition: 0.2s;
}
.tweet-media-video-overlay:hover {
    background: rgba(0, 0, 0, 0.4);
    transition: 0.2s;
}
.svg-play-path {
    fill: #1da1f2;
    transition: 0.2s;
}
.tweet-media-video-overlay:hover .svg-play-path {
    fill: white;
    transition: 0.2s;
}

.yeah-tweet .tweet-body-quote {
    background-color: var(--yeah-background-color);
    border: 1px solid var(--yeah-border);
    border-radius: 5px;
    display: block;
    margin: 10px;
    padding: 10px;
    position: relative;
    right: 10px;
    text-decoration: none;
    direction: ltr;
}
.tweet-body-text {
    display: inline;
}
.tweet-body-text-quote {
    display: block;
}

.yeah-tweet .tweet-body-quote:hover {
    background-color: var(--yeah-darker-background-color);
    text-decoration: none
}

/* A little smaller UI */
@media screen and (max-width: 1195px) {
    .wtf-user-name, .wtf-user-handle {
        font-size: 12px;
    }
    #user-banner {
        width: 258px;
    }
    .user-stat-div>h2 {
        font-size: 12px;
        margin: 0px 8px;
    }
    .user-stat-div>h1 {
        font-size: 18px;
    }
    #trends {
        width: 238px
    }
}
@media screen and (max-width: 590px) {
    .yeah-tweet .tweet-header-name {
        white-space: pre !important;
        text-overflow: ellipsis;
    }
}