[F2U HTML] Rain World (CSS)

/* Custom scrollbar */
.rw-content {
  div {
    scrollbar-color: RGBA(255, 255, 255, 1) RGBA(255, 255, 255, 0.2) !important;
    scrollbar-width: thin !important;
  }
  
  ::-webkit-scrollbar-track {
    background-color: RGBA(255, 255, 255, 0.2) !important;
    border-width: 0 !important;
  }
  
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: RGBA(255, 255, 255, 1);
    border-width: 0 !important;
  }
}

/* Animate hover effects smoothly */
.karma-btn, .karma-reinforced, .rw-btn, .rw-content a:not(.btn):not(.nav-item):not(.rw-not-a) {
  transition: 0.25s;
}

/* Darken inactive karma nav buttons */
.karma-nav a .karma-btn {
  opacity: 0.2;
}

/* Brighten active & hovered karma nav buttons */
.karma-nav a.active .karma-btn, .karma-nav a.active .karma-reinforced, a:hover .karma-btn, a:active .karma-btn, a:focus .karma-btn {
  opacity: 1 !important;
}

/* Automatically make links white (remove if you want themed primary links) */
.rw-content a:not(.btn):not(.nav-item):not(.rw-btn):not(.rw-not-a),
.rw-content a:not(.btn):not(.nav-item):not(.rw-btn):not(.rw-not-a),
.rw-content a:not(.btn):not(.nav-item):not(.rw-btn):not(.rw-not-a) {
  color: #fff;
}

/* Make links glow when hovered over */
.rw-content a:not(.btn):not(.nav-item):not(.rw-btn):not(.rw-not-a):hover,
.rw-content a:not(.btn):not(.nav-item):not(.rw-btn):not(.rw-not-a):active,
.rw-content a:not(.btn):not(.nav-item):not(.rw-btn):not(.rw-not-a):focus {
  filter: drop-shadow(0px 0px 5px #fff) !important;
}

/* Darken hovered buttons (design nav buttons & relationships avatars) */
.rw-btn:hover, .rw-btn:active, .rw-btn:focus, .rw-btn.active {
  opacity: 0.6 !important;
}

/* Remove primary box shadow from focused buttons */
.btn:focus {
  box-shadow: none;
}

/* Recolor tooltips (also affects tooltips outside of the main/custom HTML box,
since they are all outside of the user content area, so the recolor can't be contained) */
.tooltip-inner {
  background-color: #221D28 !important;
  color: #fff !important;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #221D28;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #221D28;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #221D28;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #221D28;
}