@keyframes twinkle {
  from { background-position: 0 0; }
  to { background-position: -10000px 5000px; }
}

@keyframes clouds {
  from { background-position: 0 0; }
  to { background-position: 10000px 0; }
}

body::before,
body.app-body::after,
#gabsocial::before,
#gabsocial::after {
  content: '';
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  z-index: -100;
}

body.app-body {
  background-color: $halloween-dark;
  background-image: url('../images/starfield.png');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

body::before {
  background-image: url('../images/spiderweb.svg');
}

body.app-body::after {
  z-index: -101;
  background: transparent url("../images/twinkle.svg") repeat top center;
  animation: twinkle 200s linear infinite;
}

#gabsocial::before {
  background-image: radial-gradient(
    circle,
    transparent 0%,
    transparent 60%,
    darken($halloween-dark, 30%) 100%
  );
}

#gabsocial::after {
  background: transparent url("../images/clouds.png") repeat top center;
  animation: clouds 200s linear infinite;
}

// Dangling spider
.ui .page__top::after,
.ui .page__columns::after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  right: 20px;
  background-image: url('../images/spider.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  z-index: -1;
  pointer-events: none;
}
.ui .page__columns::after {
  position: fixed;
  top: 50px;
}
.ui .page__top::after {
  position: absolute;
  bottom: -100px;
}
.ui .page__top + .page__columns::after {
  display: none;
}

.search__input {
  border-color: $halloween-dark;
  color: black;
}

.search__icon .fa-times-circle,
.search__icon .fa {
  color: $halloween-dark;

  &:hover {
    color: lighten($halloween-dark, 10%);
  }
}

.search__input::placeholder {
  color: darken($halloween-dark, 10%);
}

.admin-wrapper .content h2 {
  color: white;
}

.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  color: darken($halloween-dark, 15%);
}

.tabs-bar__button-compose:hover {
  background-color: $nav-ui-highlight-color !important;
}

.floating-action-button {
  filter: hue-rotate(120deg);
}

.button {
  background-color: $halloween-orange;
  &:focus, &:hover { background-color: darken($halloween-orange, 10%);}
  color: black;
}
.simple_form button, .simple_form .button, .simple_form .block-button {
  color: black;
}

.getting-started__footer::before {
  content: '';
  display: block;
  background-image: url('../images/halloween-emblem.svg');
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

.icon-with-badge__badge {
  background-color: $halloween-dark;
}

.detailed-status,
.detailed-status__action-bar {
  background-color: #282828;
}

.focusable:focus,
.focusable:focus .detailed-status,
.focusable:focus .detailed-status__action-bar {
  background-color: #333;
}

.timeline-queue-header,
.notification__filter-bar,
.account__section-headline,
.notification__filter-bar button,
.account__section-headline button {
  background: transparent;
}

.dropdown-menu {
  border-color: $halloween-orange;
}
.dropdown-menu__item a {
  color: $halloween-orange;
}
.dropdown-menu__arrow.bottom {
  border-bottom-color: $halloween-orange;
}
.dropdown-menu__arrow.top {
  border-top-color: $halloween-orange;
}

.compose-modal {
  background: $gab-background-container;
}

.boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar {
  background: $halloween-dark;
}
.boost-modal, .confirmation-modal, .report-modal, .actions-modal, .mute-modal {
  border-color: $halloween-orange;
}

.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
  color: black;
}