/* Social Media */

#yt {
    background: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--yt-color));
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#twitch {
    background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--twitch-color));
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#dc {
    background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--dc-color));
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#music {
    background-image: linear-gradient(to bottom right, var(--gj-color),var(--dc-color));
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#gj {
    background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--gj-color));
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#itch {
    background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--itch-color));
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}



@keyframes gradientMove {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

/* Songs */

#musicbtn::before {
        border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/launchkey.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
  background-size: 120% 100%;
    animation: gradientMove 100s infinite;
}

#distance::before {
        border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/musicimg/distance.webp');
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  transform: scale(1.1);
  z-index: -1;
  background-size: 150% 100%;
    animation: gradientMove 100s infinite;
}

#LRdistance::before {
        border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom right, rgba(157, 0, 255, 0.5),rgba(205, 157, 235, 0.5));
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  z-index: -1;
  background-size: 150% 100%;
    animation: gradientMove 100s infinite;
}



/* Tools */

#fl::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/fl-studio.webp');
  background-size: cover;
  background-position: center;
  filter: blur(0px);
  transform: scale(1.1);
  z-index: -1;
}

#serum::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/serum2.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.1);
  z-index: -1;
}

#vital::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/Vital.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
}

#premiere::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/premiere.webp');
  background-size: cover;
  background-position: center;
  filter: blur(3px);
  transform: scale(1.1);
  z-index: -1;
}

#splice::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/Splice.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
}

#affinity::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/affinity.webp');
  background-size: cover;
  background-position: center;
  filter: blur(0.7px);
  transform: scale(1.1);
  z-index: -1;
}

#play::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/novation-play.webp');
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transform: scale(1.1);
  z-index: -1;
}

#camel::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/Camel-Crusher.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
}

#surge::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../tools/surgeXT.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
}

/* Setup */

#koorui1::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/71SxP+QF+aL.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.1);
  z-index: -1;
}

#hp::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/8X534AA-ABB_390x286.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.1);
  z-index: -1;
}

#koorui2::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/onsite_news-750x550_46.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.1);
  z-index: -1;
}

#wave::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/e4fuv4s0w06mbb4tkz6m.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
}

#hercules::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/hercules-stream-100-aufmacher.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
}

#stream::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/B_IBC24_Elgato_Stream-Deck-Studio-ATF-04.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
}

#flk::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/flkey-newstory-body1-0.webp');
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transform: scale(1.1);
  z-index: -1;
}

#launch::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/novation-launchkey-49-white.webp');
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transform: scale(1.1);
  z-index: -1;
}

#mic::before{
                border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../setup/DynamicMicrophone.PT-4-2_d054fc41-a2b4-4a48-9c31-54d33c23f360_480x480.webp');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
}

/* Musik Buttons */

#sc {
    background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--itch-color));
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#yt2 {
    background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--yt-color));
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#sy {
  background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--gj-color));
  background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#am {
  background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--apple-color));
  background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#azm {
  background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--azm-color));
  background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#dr {
  background-image: linear-gradient(to bottom right, var(--itch-color),var(--twitch-color));
  background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#tl {
  background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--tidal-color));
  background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#szm {
  background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--shazam-color));
  background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#ct {
  background-image: linear-gradient(to bottom right, var(--social_btn_color_one-color),var(--ct-color));
  background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

#tt {
  background-image: linear-gradient(to bottom right, var(--tt_one-color),var(--tt_second-color));
  background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}