@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    font-size: 1vw;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

div.blackScreen{
    position: absolute;
    width: 100%;
    height: 120%;
    background-color: black;
    transition: 300ms;
    z-index: 100000;
}

#MedalBronze,
#MedalSilver,
#MedalGold,
#MedalPlatinum,
#MedalDiamond,
#MedalPRED,
#MedalMaster,
#MedalGrandMaster,
#MedalLegendary,
#MedalBronze2,
#MedalSilver2,
#MedalGold2,
#MedalPlatinum2,
#MedalDiamond2,
#MedalPRED2,
#MedalMaster2,
#MedalGrandMaster2,
#MedalLegendary2 {
    background-color: white;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: bold;
}
#MedalPRED,
#MedalPRED2{
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FF0000), color-stop(0.2, #9f0000), color-stop(0.4, #9f5f5f), color-stop(0.6, #ff3939), color-stop(0.8, #4b0000), color-stop(1, #bb0000));
    animation: animatedBackground 2s linear infinite;
}
#MedalPRED2{
    animation: animatedBackground2 2s linear infinite;
}
#MedalLegendary,
#MedalLegendary2 {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FF0000), color-stop(0.2, #FFA500), color-stop(0.4, #FFD700), color-stop(0.6, #FFA500), color-stop(0.8, #FF0000), color-stop(1, #FF0000));
    animation: animatedBackground 2s linear infinite;
}
#MedalLegendary2{
    animation: animatedBackground2 2s linear infinite;
}
#MedalGrandMaster,
#MedalGrandMaster2{
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ff0073), color-stop(0.2, #ff006a), color-stop(0.4, #ff00b3), color-stop(0.6, #ff006a), color-stop(0.8, #ff0073), color-stop(1, #ff0073));
    animation: animatedBackground 2s linear infinite;
}
#MedalGrandMaster2{
    animation: animatedBackground2 2s linear infinite;
}
#MedalMaster,
#MedalMaster2{
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #cc00ff), color-stop(0.2, #a200ff), color-stop(0.4, #9900ff), color-stop(0.6, #a200ff), color-stop(0.8, #cc00ff), color-stop(1, #cc00ff));
    animation: animatedBackground 2s linear infinite;
}
#MedalMaster2{
    animation: animatedBackground2 2s linear infinite;
}
#MedalDiamond,
#MedalDiamond2{
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #001aff), color-stop(0.2, #535eba), color-stop(0.4, #9397c1), color-stop(0.6, #535eba), color-stop(0.8, #001aff), color-stop(1, #001aff));
    animation: animatedBackground 2s linear infinite;
}
#MedalDiamond2{
    animation: animatedBackground2 2s linear infinite;
}
#MedalPlatinum,
#MedalPlatinum2{
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #54bde0));
    animation: animatedBackground 1s linear infinite;
}
#MedalPlatinum2{
    animation: animatedBackground2 2s linear infinite;
}
#MedalGold,
#MedalGold2{
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFD700));
    animation: animatedBackground 1s linear infinite;
}
#MedalGold2{
    animation: animatedBackground2 2s linear infinite;
}
#MedalSilver,
#MedalSilver2{
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #565656));
    animation: animatedBackground 1s linear infinite;
}
#MedalSilver2{
    animation: animatedBackground2 2s linear infinite;
}
#MedalBronze,
#MedalBronze2{
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffffff));
    animation: animatedBackground 1s linear infinite;
}
#MedalBronze2{
    animation: animatedBackground2 2s linear infinite;
}

/* Animation rainbow background */
@keyframes animatedBackground {
    0% { background-position: 0vw; }
    100% { background-position: 10vw; }
}
@keyframes animatedBackground2 {
    0% { background-position: 0vw; }
    100% { background-position: 20vw; }
}
  
img#ShineyRankImage{
    animation: animatedImage 1s linear infinite;
}
@keyframes animatedImage {
    0% { filter: brightness(1); }
    50% { filter: brightness(2); }
    100% { filter: brightness(1); }
}