@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
/* font-family: 'Roboto', sans-serif; */

:root {

    --background-primary: #161616;
    --background-secondary: #101010;
    --background-dark: #151515;
    --background-light: #2C2C;

    --background-green: #48603d;

    --color-primmary: #FFFFFF;
    --color-secondary: #5F5F64;
  
    --background-green: #48603D;

    --red: #ff5454;
    --orange: #ff9354;
    --green: #54FF9F;

    /* Variables */
    --top-header-height: 65px;
    --top-header-logo-margin: 30px;
    --top-header-profile-size: 40px;
    --top-banner-height: 250px;

    --page-max-with: 1200px;

    --scroll-thumb-color: #5F5F64;

}

.godly {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #FF512F !important;
    font-weight: 700 !important;
    text-shadow: 0px 0px 5px #727309;
    text-decoration: none;
    background-image: url(../images/sparkling.gif),linear-gradient(90deg,#f00 0%,#29ff00 100%,#fff);
    animation: godlyanim 5s infinite linear;
}

.rank-mod {
    color: #00D0FF !important;
    text-shadow: 0px 0px 8px #00D0FF;
    background-image: url(../images/sparkling.gif);
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 0 0;
    line-height: 1;
}

.rank-pl {
    /* color: #be6a30 !important;
    font-weight: 600 !important;
    text-shadow: 0px 0px 12px #fabc00;
    text-decoration: none;
    background-image: url(../images/sparkling.gif); */
    color: #ffc000 !important;
    text-shadow: 0px 0px 8px #fabc00;
    background-image: url(../images/sparkling.gif);
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 0 0;
    line-height: 1;
}

.rank-p {
    color: #54FF9F !important;
    text-shadow: 1px 1px 10px #39c70d;
    background-image: url(../images/sparkling.gif);
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 0 0;
    line-height: 1;
}

.rank-none {
    color: var(--color-secondary) !important;
    text-decoration: none;
}

@keyframes godlyanim {
    from {
        filter:hue-rotate(-360deg);
    }
    to {
        filter:hue-rotate(360deg);
    }
}

/* Ripple Button Animation */
@keyframes ripple {
    to {
      transform: scale(4);
      opacity: 0;
    }
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background-color: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(to right, var(--scroll-thumb-color), var(--scroll-thumb-color));
    border-radius: 100px;
}