.main-bg {
  background-image: url(../img/backgrounds/h-bg-main.webp);
}
.dark-theme .main-bg {
  background-image: url(../img/backgrounds/h-bg-main-dark.webp);
}
@media (min-width: 320px) and (max-width: 1023px) {
  .main-bg {
    background-image: image-set(url(../img/backgrounds/h-bg-main-mobile.webp) 1x,url(../img/backgrounds/h-bg-main-mobile@2x.webp) 2x);
  }
  .dark-theme .main-bg {
    background-image: image-set(url(../img/backgrounds/h-bg-main-mobile-dark.webp) 1x,url(../img/backgrounds/h-bg-main-mobile-dark@2x.webp) 2x);
  }
}
.dark-theme .section-bg {
  background: url("../img/backgrounds/h-bg.webp");
  background-color: #1a171e;
}
.header-bg {
  background: url("../img/backgrounds/h-bg.webp"),
  linear-gradient(90.16deg, rgba(90, 46, 152, 1), rgba(79, 38, 138, 1));
  width: 100%;
  position: relative;
}
.section-bg {
  background:
    linear-gradient(rgba(240, 238, 242, 0.8), rgba(240, 238, 242, 0.8)),
    url("../img/backgrounds/h-bg.webp");
  background-color: #f0eef2;
}
.footer-widgets {
  background: url("../img/backgrounds/h-bg.webp"), linear-gradient(90.16deg, rgba(90, 46, 152, 1), rgba(79, 38, 138, 1));
}
.footer-info {
  background: url("../img/backgrounds/h-orangegradient.webp"), #242228;
  padding: 45px 0 40px;
}
.modal-list .modal-header {
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
  background: url("../img/backgrounds/h-bg.webp"), linear-gradient(90.16deg, rgba(90, 46, 152, 1), rgba(79, 38, 138, 1));
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.tracks-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  background: url("../img/backgrounds/h-bg.webp"), linear-gradient(90.16deg, rgba(90, 46, 152, 1), rgba(79, 38, 138, 1));
  border-radius: 6px 6px 0 0;
}
.tracks-item--blocked .tracks-heading, .tracks-item--blocked .tracks-heading:hover {
  background: url("../img/backgrounds/h-bg.webp"), linear-gradient(90.16deg,#a483d2,#835abe);
}
.header {
  z-index: 4;
  position: relative;
}
.spider {
  position: absolute;
  left: 25%;
  animation: animateSpider 15s ease-in-out infinite;
  z-index: 2;
}
@media (min-width: 320px) and (max-width: 1023px) {
  .spider {
    display: none;
  }
}
@keyframes animateSpider {
  0%,100%
  {
    transform: translateY(-600px);
  }
  50% 
  {
    transform: translateY(-300px);
  }
}
.sweb {
  position: absolute;
  height: 100%;
}