:root {
    --accent: rgb(196, 167, 231);
    --accentDarken: rgb(169, 127, 220);
    --accentLighten: rgb(223, 207, 242);
    --accentedBg: rgba(196, 167, 231, 0.15);
    --focus: rgba(196, 167, 231, 0.3);
    --bg: rgb(25, 23, 36);
    --acrylicBg: rgba(25, 23, 36, 0.5);
    --fg: rgb(224, 222, 244);
    --fgTransparentWeak: rgba(224, 222, 244, 0.75);
    --fgTransparent: rgba(224, 222, 244, 0.5);
    --fgHighlighted: rgb(235, 233, 248);
    --fgOnAccent: rgb(38, 35, 58);
    --divider: rgba(255, 255, 255, 0.1);
    --indicator: rgb(196, 167, 231);
    --panel: rgb(31, 29, 45);
    --panelHighlight: rgb(38, 35, 55);
    --panelHeaderBg: rgb(47, 45, 73);
    --panelHeaderFg: rgb(224, 222, 244);
    --panelHeaderDivider: rgba(0, 0, 0, 0);
    --panelBorder: solid 1px var(--divider);
    --acrylicPanel: rgba(31, 29, 45, 0.5);
    --windowHeader: rgba(31, 29, 45, 0.85);
    --popup: rgb(38, 35, 55);
    --shadow: rgba(0, 0, 0, 0.3);
    --header: rgba(31, 29, 45, 0.7);
    --navBg: rgb(31, 29, 45);
    --navFg: rgb(224, 222, 244);
    --navHoverFg: rgb(255, 255, 255);
    --navActive: rgb(196, 167, 231);
    --navIndicator: rgb(196, 167, 231);
    --link: rgb(156, 207, 216);
    --hashtag: rgb(234, 154, 151);
    --mention: rgb(196, 167, 231);
    --mentionMe: rgb(196, 167, 231);
    --renote: rgb(49, 116, 143);
    --modalBg: rgba(0, 0, 0, 0.5);
    --scrollbarHandle: rgba(255, 255, 255, 0.2);
    --scrollbarHandleHover: rgba(255, 255, 255, 0.4);
    --dateLabelFg: rgb(224, 222, 244);
    --infoBg: rgb(37, 49, 66);
    --infoFg: rgb(255, 255, 255);
    --infoWarnBg: rgb(38, 35, 58);
    --infoWarnFg: rgb(246, 193, 119);
    --switchBg: rgba(255, 255, 255, 0.15);
    --cwBg: rgb(31, 29, 46);
    --cwFg: rgb(246, 193, 119);
    --cwHoverBg: rgb(38, 35, 58);
    --buttonBg: rgba(255, 255, 255, 0.05);
    --buttonHoverBg: rgba(255, 255, 255, 0.1);
    --buttonGradateA: rgb(196, 167, 231);
    --background-border-color: rgba(255, 255, 255, 0.1) !important;
}
/* 👉ドラッグの背景色を変える */
::-moz-selection {
    color: var(--infoFg);
    background-color: var(--accent);
}
::selection {
    color: var(--infoFg);
    background-color: var(--accent);
}
body {
    background: var(--bg);
    color: var(--fg);
}
/* 👉リンクをふわ〜っとさせる */
a {
    transition: color .3s !important;
    -webkit-transition: color .3s !important;
}
/* 👉管理人マーク */
.account-role {
    border: 1px solid var(--accent) ;
    color: var(--accent);
}
/* 👉ドメイン名 */
.account__header__tabs__name h1 small {
    color: ;
}
/* 👉プロフbioの文字色 */
.account__header__bio .account__header__content {
    color: var(--fg);
}
/* 👉プロフbio一覧の文字色 */
.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: var(--infoWarnFg);
}
/* 👉プロフbio一覧の枠色 */
.account__header__bio .account__header__fields .verified {
    background: rgba(196, 167, 231,.1);
    border: 1px solid rgba(196, 167, 231,.2);
}
/* 👉bio認証マーク */
.account__header__bio .account__header__fields .verified__mark {
    color: var(--infoWarnFg);
}
/* 👉ボタンの色 */
.button, .button.disabled, .button:disabled {
    background-color: var(--accentDarken);
}
/* 👉ボタンホバーの色 */
.button:active, .button:focus, .button:hover {
    background-color: var(--accent);
    transition: .3s;
    -webkit-transition: .3s;
}
/* 👉ログインボタンの色 */
.button.button-tertiary {
border: 1px solid var(--accentDarken);
color: var(--accentDarken);
}
/* 👉ログインボタンの色ホバー */
.button.button-tertiary:active, .button.button-tertiary:focus, .button.button-tertiary:hover {
    background-color: var(--accentDarken);
}

/* 👉非公開の返信 */
.status__wrapper-direct .status__prepend {
    color: var(--infoWarnFg);
}
.detailed-status__wrapper-direct .status__prepend,
.notification-ungrouped--direct .notification-ungrouped__header {
    color: var(--cwFg);
}

/* 👉戻るの色 */
.column-back-button, .column-header>.column-header__back-button {
    color: var(--accent);
}

/* 👉選択バーの色 */
.account__section-headline a.active:before, .account__section-headline button.active:before, .notification__filter-bar a.active:before, .notification__filter-bar button.active:before {
    background: var(--accent);
}
/* 👉プロフbioのリンク */
.account__header__bio .account__header__fields a {
    color: var(--link);
}
/* 👉投稿の文字色 */
.reply-indicator__content, .status__content {
    color: var(--fg);
}
/* 👉投稿内のアカウント名 */
.account__display-name .display-name strong, .status__display-name .display-name strong {
    color: var(--fg);
}
/* 👉サーバーについて */
.about__section__title,
.about__meta {
    background: rgba(140,141,255,.1);
    color: var(--accent);
}
/* 👉サーバーのルール */
.rules-list li:before {
    background: var(--accent);
    color: #282c37;
}
/* 👉ナビゲーション選択時の色 */
.column-link--transparent.active {
    color: #8c8dff;
}
/* 👉ログインの説明文右側 */
.sign-in-banner p {
    color: var(--fgTransparentWeak);
}
/* 👉分散型の説明文左側 */
.server-banner__introduction {
    color: var(--fgTransparentWeak);
}
/* 👉サーバーの概要ヘッダー */
.about__header p {
    color: var(--fgTransparentWeak);
}
/* 👉管理者/連絡先h4 */
.about__meta h4 {
    color: var(--fgTransparentWeak);
}
/* 👉サーバーの概要 */
.prose {
    color: var(--fg);
}
/* 👉サーバーのルール */
.rules-list {
    color: var(--fg);
}

/* 👉ブロックするときのボタンの色 */
.block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button {
    background-color: transparent;
}
/* 👉ブロックするときのボタンの色ホバー */
.block-modal__cancel-button:active, .block-modal__cancel-button:focus, .block-modal__cancel-button:hover, .confirmation-modal__cancel-button:active, .confirmation-modal__cancel-button:focus, .confirmation-modal__cancel-button:hover, .confirmation-modal__secondary-button:active, .confirmation-modal__secondary-button:focus, .confirmation-modal__secondary-button:hover, .mute-modal__cancel-button:active, .mute-modal__cancel-button:focus, .mute-modal__cancel-button:hover {
    background-color: transparent;
}

/* 👉カスタム絵文字を大きくする */
.detailed-status .status__content .custom-emoji {
    height: 28px;
    margin: -1px 0 0;
    width: unset;
    max-width: min(100%, 10em);
}
/* 👉返信一覧のカスタム絵文字を大きくする */
.reply-indicator__content .emojione, .status__content .custom-emoji {
    height: 24px;
    margin: -1px 0 0;
    width: unset;
    max-width: min(100%, 10em);
}
/* 👉絵文字ピッカーの横長 */
.emoji-mart-category[aria-label="検索結果"] img, .emoji-mart-category[aria-label="よく使う絵文字"] img, .emoji-mart-category[aria-label="long"] img {
    max-width: 100px;
    width: auto !important;
}
/* 👉ブーストアイコンの色 */
.icon-button.active {
    color: #8fbcbb;
}
/* 👉ユーザーアイコンを円形にする 
.account__avatar {
  border-radius: 999px;
}*/

/* 👉メディアを16:9にする */
.status .media-gallery {
    aspect-ratio: 16 / 9 !important;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
}
/* 👉引用 */
.e-content blockquote, .reply-indicator__content blockquote, .status__content__text blockquote {
    display: block;
    padding-inline-start: 0px;
    margin: 8px;
    padding: 6px 0px 6px 12px;
}
/* 👉検索ボックス色変え */
.search__input {
    background: var(--panelHeaderBg);
}
/*
.empty-column-indicator, .follow_requests-unlocked_explanation, .account__section-headline, .notification__filter-bar, .column-link__badge, .column-subheading,.column>.scrollable {
    background: var(--panelHeaderBg);
}
.column-back-button, .column-header>.column-header__back-button, .column-header {
    background: var(--panelHeaderBg);
}
*/



/* カラムの背景色を変える */
.activity-stream .entry,
.account__header__fields dt,
.box-widget,
.card__bar,
.card__img,
.column-link__badge,
.column-subheading,
.column-inline-form,
.column>.scrollable,
.contact-widget,
.detailed-status,
.detailed-status__action-bar,
.drawer__inner,
.drawer__inner__mastodon,
.empty-column-indicator,
.error-column,
.flex-spacer,
.getting-started,
.getting-started__wrapper,
.hero-widget__text,
.landing-page__information.contact-widget,
.landing-page #mastodon-timeline,
.landing-page__forms,
.landing-page__information,
.landing-page__call-to-action,
.landing-page__information:last-child,
.landing-page .separator-or span,
.list-editor,
.public-layout .public-account-header__bar:before,
.public-layout .public-account-bio,
.status.status-direct,
.status-card .status-card__content {
   background: var(--panelHeaderBg);
}
/* 👉リアクション非表示 */
.icon-button__counter {
    display: none !important;
}
/* 👉2カラム目の背景色変更 */
.column>.scrollable,
.empty-column-indicator, .follow_requests-unlocked_explanation,
.columns-area--mobile .column {
    background: var(--panelHeaderBg);
}
/* 👉メニューの文字サイズ変更 */
.column-link {
    border-left: 4px solid transparent;
    font-size: 14px;
    padding: 14px;
}
/* 👉svgサイズを小さく */
.icon {
    height: 20px;
    width: 20px;
}
/* 👉投稿フォームの色変更 */
.compose-form__highlightable {
    background: #373859;
}
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input,
.compose-form__footer {
    background: #373859;
}
/* 👉2カラム目のタブバーの色変更 */
#tabs-bar__portal,
.notification__filter-bar button,
.account__section-headline, .notification__filter-bar,
.column-subheading {
    background: var(--panelHeaderBg);
}
/* 👉投稿詳細のブースト数、お気に入り数を非表示 */
.detailed-status__meta__line:last-child {
    display: none !important;
}
/* 👉リスト一覧を常に表示 */
@media screen and (max-height: 1040px) {
    .navigation-panel .list-panel {
        display: block !important;
    }
}
/* 👉border-radiusを調整 */
.account__section-headline a.active:before, .account__section-headline button.active:before, .notification__filter-bar a.active:before, .notification__filter-bar button.active:before {
    border-radius: 4px;
}
/* 👉ヘッダーアイコンのborder-radiusの隙間を調整 */
.account__header__bar .avatar .account__avatar {
    border: 2px solid #282c37 !important;
    border-radius: 10px;
    background: var(--panelHeaderBg);
}
/* 👉border非表示 */
.search__input,
.compose-form__highlightable,
.column>.scrollable,
.column-back-button,
.column-header,
.account__section-headline, .notification__filter-bar,
.about__meta,
.about__section__title,
.about__section__body,
.detailed-status__meta__line {
    border: none;
}
/* 👉border-bottomだけ表示 */
.column-header,
.account__section-headline, .notification__filter-bar,
.column-subheading {
    border-bottom: 1px solid var(--background-border-color) ;
}

/* 👉ハッシュタグの色変更 */
.hashtag-bar {
    color: var(--accent);
}
/* 👉ハッシュタグリンクの背景色 */
.hashtag-bar a {
    background: rgba(140,141,255,.1);
}
/* 👉ハッシュタグリンクの背景色:hover */
.hashtag-bar a:active, .hashtag-bar a:focus, .hashtag-bar a:hover {
    background: rgba(140,141,255,.2);
    color: var(--accentLighten);
}
.tabs-bar__wrapper {
    background: var(--bg);
}
/* 👉「承知の上で表示」を変更 */
.content-warning .link-button span{
    display: none;
}
/* 👉「続きを読む」に変更 */
.content-warning .link-button:after{
    display: block;
    content: '続きを読む';
}
/* 👉「リアルタイムフィード」を非表示 */
.column-link[href="/public/local"]{
    display: none;
}
/* 👉「検索」を非表示 */
.column-link[href="/search"]{
    display: none;
}
/* 👉「フォロー中のハッシュタグ」を非表示 */
.column-link[href="/followed_tags"]{
    display: none;
}
/* 👉「もっと見る」を非表示 */
.column-link[aria-controls=":r2:"]{
    display: none;
}
/* 👉「注目」タブを非表示 */
.account__section-headline a[href="/@3clip/featured"]{
    display: none;
}