/* 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.png');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.1);
  z-index: -1;
  background-size: 120% 100%;
    animation: gradientMove 100s infinite;
}

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

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


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

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

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

.skyV2::before {
            border: none;
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/skyV2.png');
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  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-og-image.eab349c.jpg');
  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/maxresdefault.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.jpg');
  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/hq720.jpg');
  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_Download_Desktop.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-050220201432.jpg');
  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-news-story-thumbnail-980x302.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.jpg');
  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/surge_dark.png');
  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.jpg');
  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.jpg');
  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.png');
  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.jpg');
  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.jpg');
  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.jpg');
  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.jpg');
  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;
}