:root {
    --bg-dark-highlight: rgb(15,15,15,0.5);
    --discord: #5865f2;
    --steam-top:#112a5d ;
    --steam-bot:#137aab ;
}

.discord {
    color: var(--discord);
}

.steam {
    background: -webkit-linear-gradient(var(--steam-top), var(--steam-bot));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-dark-highlight {
    background-color: var(--bg-dark-highlight);
}

.backgroundStatic {
    position: fixed;
    height: 100%;
    width: auto;
    left: 50%;
    filter: blur(10px);
    z-index: -1;
    translate: -50%;
    scale: 1.3;
    min-width: 60%;
    transition: all 0.5s ease-in-out;
} 

.RRShine {
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}

.RRShine::after {
    content: "";
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.15) 100%);
    position: absolute;
    height: 400px;
    width: 500px;
    opacity: 0.15;
    top: 0px;
    transform: rotate(60deg) translateY(-80%) scale(1);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}

.RRShine:hover {
    transform: scale(1.005);
}

.RRShine:hover:after {
    transform: rotate(75deg) translateY(-100%);
}

/* RRLoading content */
.RRLoading {
}

#RRLoading > div {
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0px;
}

    #RRLoading > div > div {
        margin: 0px 0px 0px 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0);
        border-radius: 0px;
    }

.RRLoading-content > div > img {
    border-radius: 50%;
    height: 80px;
    width: 80px;
    -webkit-animation: breathing 2s ease-in-out infinite normal;
    animation: breathing 2s ease-in-out infinite normal;
    -webkit-font-smoothing: antialiased;
}

.RRLoading-content > h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

/* Animation key frames */
@keyframes breathing {
    0% {
        -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }

    50% {
        -webkit-transform: scale(1.2) rotate(360deg);
        -ms-transform: scale(1.2) rotate(360deg);
        transform: scale(1.2) rotate(360deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(720deg);
        -ms-transform: scale(1) rotate(720deg);
        transform: scale(1) rotate(720deg);
    }
}

.stepScale {
    transform: scale(1);
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}

@media (max-width: 500px) {

    .stepScale {
        transform: scale(0.8);
    }

}