Mastodon Theme: Red

:root {
  --vivaldi-red: #cf2e2e;
  --accent: #cf2e2e;
  --accent_select: rgb(0 0 0 / 21%);
  --text: #efc414;
  --text_accent: #fff;
  --action_button: #4c70f0;
  --text_a_button: #fff;
  --text_link: #4c70f0;
  --bg: #fff;
  --bg_drawer: #303450;
  --text_drawer: #bec0d7;
  --inset_block: inset 1px 4px 7px rgb(0 0 0 / 42%);
  --fav: rgb(255, 237, 0);
  --bg_fav: #ffffd6;
  --warning: #b60100;
  --info: rgba(232, 240, 254, 0.75);
  --scroll: #96a0ff;
  --announcement: #ece7bf;
  --mDefault: #282c37;
  --text_mute: #bccdfa;

  --action_push: scale(0.95);
  --selected_card: #eee;
}

html {
    text-rendering: optimizeLegibility;
}

.ui__header {
  background: var(--accent);
  border-bottom: 1px solid rgba(0,0,0,0.075);
}

.columns-area__panels__pane--navigational .navigation-panel {
  background: var(--accent);
  border-left: 1px solid #b3b2ce;
  color: var(--accent_text);
}

.tabs-bar__wrapper {
  background: var(--info);
  backdrop-filter: blur(8px);
}

.column-back-button, .column-header {
  background: transparent;
}

.column-header__button {
  background: transparent;
}

a.column-link--transparent{
    color: var(--text_accent);
    transition: .25s box-shadow;
}

.column-header__collapsible-inner {
  background: var(--info);
  border-bottom: 1px solid rgb(0 0 0 / 18%);
  box-shadow: var(--inset_block);
  transition: 0.25s all;
}

.column-header__button.active {
    background-color: var(--accent_select);
}

.button {
    background-color: var(--action_button);
    color: var(--text_a_button);
}

.button:active {
    transform: var(--action_push);
}

a.column-link--transparent.active {
    background-color: var(--accent_select);
    box-shadow: var(--inset_block);
    border-radius: 0 10px 10px 0;
    transition: .25s box-shadow;
}

article {
  border-radius: 16px;
  box-shadow: rgb(0 0 0 / 5%) 0px 20px 14px 9px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  margin-bottom: 3rem;
  transition: 0.25s all;
}

article:has( button.icon-button.star-icon.active ) {
  background-color: var(--bg_fav);
  transition: 0.25s all;
}

.status {
    border: none;
}

.column>.scrollable {
    background: transparent;
    border: none;
}

.focusable:focus {
    background: var(--selected_card);
}

.account__section-headline .active, .account__section-headline a:hover {
    color: var(--text_link);
}

.icon-button.star-icon.active {
    z-index: 999999999999;
}

.icon-button.star-icon.active, .notification__favourite-icon-wrapper .fa.star-icon {
    color: var(--fav);
  filter: drop-shadow(0px 0px 5px black);
  transition: 0.25s all;
}

.no-reduce-motion .icon-button.star-icon.activate>.fa-star {
  animation-duration:1s;
  animation-name:spinZoom;
  animation-fill-mode:both;
  animation-iteration-count:1;
  animation-timing-function: ease;
}

.no-reduce-motion .icon-button.star-icon.deactivate>.fa-star {
  animation-duration:1s;
  animation-name:unSetItem;
  animation-fill-mode:both;
  animation-iteration-count:1;
}

.dismissable-banner {
    background: var(--info);
}

@media screen and (max-width: 1174px){


}



@keyframes spinZoom {
   0% {
    z-index: 90000;
   }
  70% {
    z-index:90000;
    transform:scale(40) rotate(360deg);
    filter:drop-shadow(3px 3px 50px black);
  }
  100% {
    z-index:0;
    filter:drop-shadow(0);
    transform:scale(1) rotate(360deg);
  }
}

@keyframes unSetItem {
  70% {
    transform:scale(.01) rotate(360deg);
  }
  100% {
    transform:scale(1) rotate(360deg);
  }
}