/* ===== HERO BACKGROUND ===== */

[data-bs-theme=dark] .hero {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgb(33, 37, 41) 75%), url("/assets/img/background/background_dark.svg") center / cover no-repeat;
}

[data-bs-theme=light] .hero {
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgb(255, 255, 255) 75%), url("/assets/img/background/background_light.svg") center / cover no-repeat;
}

/* ===== BRAND ICON ===== */

[data-bs-theme=dark] .brand-img--light {
  display: none;
}

[data-bs-theme=dark] .brand-img--dark {
  display: inline-block;
}

[data-bs-theme=light] .brand-img--dark {
  display: none;
}

[data-bs-theme=light] .brand-img--light {
  display: inline-block;
}

/* ===== SCROLL-TO-TOP ===== */

[data-bs-theme=dark] #TopBTN {
  background-color: #1e1e1e;
  color: white;
  border: 1px solid #444;
}

[data-bs-theme=dark] #TopBTN:focus:not(:focus-visible) {
  background-color: #1e1e1e;
  color: white;
  border-color: #444;
}

[data-bs-theme=light] #TopBTN {
  background-color: white;
  color: black;
  border: 1px solid #ccc;
}

[data-bs-theme=light] #TopBTN:focus:not(:focus-visible) {
  background-color: white;
  color: black;
  border-color: #ccc;
}

@media (hover: hover) and (pointer: fine) {
  [data-bs-theme=dark] #TopBTN:hover {
    background-color: white;
    color: black;
    border-color: white;
  }

  [data-bs-theme=light] #TopBTN:hover {
    background-color: black;
    color: white;
    border-color: black;
  }
}

/* ===== DROPDOWN ===== */

[data-bs-theme=dark] .dropdown-item.active, [data-bs-theme=dark] .dropdown-item:active {
  background: #151515;
}

[data-bs-theme=light] .dropdown-item.active {
  background: #efefef;
  color: #212529;
}

[data-bs-theme=light] .dropdown-item:active {
  background: #efefef;
  color: black;
}

/* ===== TWITCH ===== */

[data-bs-theme=dark] .alert-twitch {
  --bs-alert-bg: var(--bs-tertiary-bg);
  --bs-alert-color: #F0F0FF;
  --bs-alert-border-color: #9146FF;
}

[data-bs-theme=light] .alert-twitch {
  --bs-alert-bg: #F0F0FF;
  --bs-alert-color: #212529;
  --bs-alert-border-color: #9146ff;
}

[data-bs-theme=dark] .twitch-btn {
  --bs-btn-color: #F0F0FF;
  --bs-btn-border-color: var(--bs-body-color);
  --bs-btn-hover-color: #F0F0FF;
  --bs-btn-hover-bg: #9146ff;
  --bs-btn-hover-border-color: #9146ff;
}

[data-bs-theme=light] .twitch-btn {
  --bs-btn-color: #6146ff;
  --bs-btn-border-color: #6146ff;
  --bs-btn-hover-color: #F0F0FF;
  --bs-btn-hover-bg: #6146ff;
  --bs-btn-hover-border-color: #6146ff;
  --bs-btn-active-color: #6146ff;
  --bs-btn-active-border-color: #6146ff;
}

[data-bs-theme=dark] .bi-twitch, [data-bs-theme=dark] .twitch-brand {
  color: #F0F0FF;
}

[data-bs-theme=light] .twitch-brand, [data-bs-theme=light] .bi-twitch {
  color: #9146ff;
}

/* ===== BRAND COLORS ===== */

[data-bs-theme=light] .bi-youtube {
  color: #F00000;
}

[data-bs-theme=light] .bi-twitter {
  color: var(--bs-blue);
}

/* ===== TIMELINE ===== */

[data-bs-theme=dark] .timeline {
  border-left: 1px solid hsl(0, 0%, 90%);
  position: relative;
  list-style: none;
}

[data-bs-theme=light] .timeline {
  border-left: 1px solid rgb(20, 20, 20);
  position: relative;
  list-style: none;
}

.timeline .timeline-item {
  position: relative;
}

.timeline .timeline-item::after {
  position: absolute;
  display: block;
  top: 0;
  left: -38px;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
}

[data-bs-theme=dark] .timeline .timeline-item::after {
  background-color: rgb(230, 230, 230);
}

[data-bs-theme=light] .timeline .timeline-item::after {
  background-color: rgb(20, 20, 20);
}