/* naokitnk.me-inspired Mastodon theme */

body,
.ui {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #f3f4f6;
  color: #374151;
}

a {
  color: #4085f4;
}

a:hover {
  color: #2b6aec;
}

/* Main columns / panels */

.column,
.drawer,
.drawer__inner,
.navigation-panel,
.compose-panel,
.getting-started,
.link-footer,
.account__section-headline,
.notification__filter-bar {
  background: #ffffff;
  border-color: #e5e7eb;
}

.column > .scrollable,
.drawer__inner__mastodon {
  background: #f3f4f6;
}

/* Headers */

.column-header,
.column-header__button {
  background: #4085f4;
  color: #ffffff;
  border-color: #4085f4;
}

.column-header__button:hover,
.column-header__button:focus {
  background: #2b6aec;
  color: #ffffff;
}

/* Status cards */

.status,
.detailed-status,
.detailed-status__action-bar,
.account,
.notification,
.conversation {
  background: #ffffff;
  color: #374151;
  border-color: #e5e7eb;
}

.status:hover,
.account:hover,
.notification:hover,
.conversation:hover {
  background: #f9fafb;
}

.status__content,
.status__content p,
.detailed-status__wrapper,
.reply-indicator__content {
  color: #374151;
  line-height: 1.55;
}

.status__content a {
  color: #4085f4;
}

/* Names / strong text */

.display-name,
.status__display-name,
.account__display-name {
  color: #1a365d;
  font-weight: 600;
}

.display-name__account,
.status__relative-time,
.muted,
.account__header__extra__links,
.account__header__bio .account__header__content {
  color: #6b7280;
}

/* Buttons */

.button,
.button.button--block {
  background: #4085f4;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 600;
}

.button:hover,
.button:focus {
  background: #2b6aec;
}

.icon-button:hover,
.icon-button:focus {
  color: #4085f4;
}

/* Compose */

.compose-form,
.compose-form__autosuggest-wrapper,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  background: #ffffff;
  color: #374151;
  border-color: #e5e7eb;
}

.compose-form .autosuggest-textarea__textarea:focus,
.compose-form .spoiler-input__input:focus {
  border-color: #4085f4;
}

/* Cards / media / embeds */

.card,
.status-card,
.account-card,
.account__header,
.hero-widget,
.landing-page__call-to-action {
  background: #ffffff;
  border-color: #e5e7eb;
  border-radius: 8px;
}

.status-card:hover {
  background: #f9fafb;
}

/* Forms */

input,
textarea,
select {
  border-color: #e5e7eb;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #4085f4;
}

/* Landing/about pages */

.public-layout,
.public-layout .container,
.public-layout .columns-area {
  background: #f3f4f6;
}

.public-account-header,
.public-account-bio,
.public-account-tabs,
.public-layout .directory__card,
.public-layout .hero-widget,
.public-layout .box-widget {
  background: #ffffff;
  border-color: #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.public-account-header__tabs__tabs .counter.active::after,
.public-account-header__tabs__tabs .counter:hover::after {
  border-bottom-color: #4085f4;
}

/* Mobile polish */

@media (max-width: 480px) {
  .column-header {
    border-radius: 0;
  }

  .status,
  .notification,
  .conversation,
  .account {
    border-radius: 0;
  }
}