/* Apply Gradient Effect to Specific Elements */
#Name, #description, #description-two, #description-three,
#description-four, #description-five, #description-six {
    background: linear-gradient(rgb(88, 183, 255), rgb(88, 224, 255), rgb(88, 183, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(88, 183, 255, 0.7), 0 0 20px rgba(88, 183, 255, 0.7), 0 0 30px rgba(88, 183, 255, 0.7);
}

/* Individual Gradient Effects for More Customization */
#Name {
    background: linear-gradient(45deg, rgb(102, 0, 255), rgb(0, 0, 255), rgb(63, 0, 255));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(102, 0, 255, 0.7),
    0 0 20px rgba(0, 0, 255, 0.7),
    0 0 30px rgba(63, 0, 255, 0.7);
}

#description, #description-two, #description-three {
    background: linear-gradient(rgb(255, 255, 255), rgb(184, 180, 180), rgb(170, 170, 170));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7),
    0 0 20px rgba(184, 180, 180, 0.7),
    0 0 30px rgba(170, 170, 170, 0.7);
}

#description-four, #description-five{
    background: linear-gradient(rgb(187, 187, 187), rgb(153, 153, 153), rgb(119, 119, 119));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(187, 187, 187, 0.7),
    0 0 20px rgba(153, 153, 153, 0.7),
    0 0 30px rgba(119, 119, 119, 0.7);
}

#description-six {
    background: linear-gradient(rgb(138, 170, 182), rgb(72, 161, 181), rgb(25, 157, 205));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(138, 170, 182, 0.7),
    0 0 20px rgba(72, 161, 181, 0.7),
    0 0 30px rgba(25, 157, 205, 0.7);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}


/* Apply Gradient Effect to Specific Elements */
#youtube, #twitch, #discord, #co-op-cast, #youtubeVods, #instagram, #kick, #donations,#youtube2, #reddit, #spotify, #twitter {
    -webkit-text-fill-color: transparent;
}

a::before {
    -webkit-background-clip: text;
}

/* Links Container */
.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}




/* Different Gradient for Each Button */
#twitch span{
    background: linear-gradient(45deg, rgb(131, 58, 180), rgb(231, 29, 253), rgb(179, 69, 252));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(131, 58, 180, 0.7),
    0 0 20px rgba(231, 29, 253, 0.7),
    0 0 30px rgba(179, 69, 252, 0.7);
}

#twitch-icon {
    stroke: url(#twitch-gradient);
    fill: transparent;
}

#youtube span, #youtube2 span, #youtube3 span {
    background: linear-gradient(45deg, rgb(255, 0, 144), rgb(215, 0, 0), rgb(126, 2, 103));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(255, 0, 144, 0.7),
    0 0 20px rgba(215, 0, 0, 0.7),
    0 0 30px rgba(126, 2, 103, 0.7);
}

#youtube-icon {
    stroke: url(#youtube-gradient);
    fill: transparent;
}

#discord span {
    background: linear-gradient(45deg, rgb(33, 28, 170), rgb(104, 29, 253), rgb(69, 203, 252));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(33, 28, 170, 0.7),
    0 0 20px rgba(104, 29, 253, 0.7),
    0 0 30px rgba(69, 203, 252, 0.7);
}

#discord-icon {
    fill: url(#discord-gradient);
}

#instagram span {
    background: linear-gradient(135deg, rgb(253, 29, 29), rgb(252, 176, 69), rgb(131, 58, 180));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(253, 29, 29, 0.7),
    0 0 20px rgba(252, 176, 69, 0.7),
    0 0 30px rgba(131, 58, 180, 0.7);
}

#instagram-icon {
    stroke: url(#instagram-gradient);
    fill: transparent;
}

#donations span {
    background: linear-gradient(45deg, rgb(28, 170, 35), rgb(85, 253, 29), rgb(6, 94, 9));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(28, 170, 35, 0.7),
    0 0 20px rgba(85, 253, 29, 0.7),
    0 0 30px rgba(6, 94, 9, 0.7);
}

#donations-icon {
    stroke: url(#donations-gradient);
    fill: none;
}

#kick span {
    background: linear-gradient(45deg, rgb(28, 170, 35), rgb(85, 253, 29), rgb(6, 94, 9));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(28, 170, 35, 0.7),
    0 0 20px rgba(85, 253, 29, 0.7),
    0 0 30px rgba(6, 94, 9, 0.7);
}

#kick-icon {
    stroke: url(#kick-gradient);
    fill: none;
}

#reddit span {
    background: linear-gradient(45deg, rgb(232, 123, 77), rgb(255, 69, 0), rgb(163, 52, 7));
    -webkit-background-clip: text;
}

#reddit-icon {
    fill: url(#reddit-gradient);
}

#spotify span {
    background: linear-gradient(45deg, rgb(28, 170, 35), rgb(85, 253, 29), rgb(6, 94, 9));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(28, 170, 35, 0.7),
    0 0 20px rgba(85, 253, 29, 0.7),
    0 0 30px rgba(6, 94, 9, 0.7);
}

#spotify-icon {
    fill: url(#spotify-gradient);
}

#twitter span {
    background: linear-gradient(45deg, rgb(62, 62, 62), rgb(255, 255, 255), rgb(51, 51, 51));
    -webkit-background-clip: text;
    text-shadow: 0 0 10px rgba(62, 62, 62, 0.7),
    0 0 20px rgba(255, 255, 255, 0.7),
    0 0 30px rgba(51, 51, 51, 0.7);
}

#twitter-icon {
    stroke: url(#twitter-gradient);
    fill: transparent;
}



.top-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Gradient Animation for Smooth Color Shifting */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/*Apply the Gradient Animation to Text*/
#youtube span, #gaming-youtube span, #twitch span, #discord span, #co-op-cast span,
#youtubeVods span, #instagram span, #kick span, #donations span, #youtube2 span, #youtube3 span,
#reddit span, #spotify span, #twitter span,
#Name, #description, #description-two, #description-three,
#description-four, #description-five, #description-six {
    background-size: 200% 200%;
    animation: gradientShift 4s infinite alternate ease-in-out;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 480px) {
    body {
        font-size: calc(1.5vw + 1.5vh) !important;
    }
}