:root{
    --color-white: #ffffff;
    --color-black: #000000;
    
    --color-white7: #D9D9D9;
    --color-white8: #B5B5B5;
    --color-white9: #919191;
    --color-white10: #737373;
    --color-dark-blue: #05020D;
    --color-dark-blue2: #06030E;
    --color-dark-gray: #131315;
    --color-premium-blue: #04071A;
    --color-light-gray: #1F1F22;
    --color-link-blue: #636BDE;
    --color-red: #FD6173;
    --color-purple: #A36EF7;
    --color-cyan: #2CAFE0;
}

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

.background-white{
    background-color: var(--color-white);
}

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

.background-black{
    background-color: var(--color-black);
}

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

.background-white7{
    background-color: var(--color-white7);
}

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

.background-white8{
    background-color: var(--color-white8);
}

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

.background-white9{
    background-color: var(--color-white9);
}

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

.background-white10{
    background-color: var(--color-white10);
}

.color-dark-blue{
    color: var(--color-dark-blue);
}

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

.color-dark-blue2{
    color: var(--color-dark-blue2);
}

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

.color-premium-blue{
    color: var(--color-premium-blue);
}

.background-premium-blue{
    background-color: var(--color-premium-blue);
}

.color-link-blue{
    color: var(--color-link-blue);
}

.background-link-blue{
    background-color: var(--color-link-blue);
}

.color-dark-gray{
    color: var(--color-dark-gray);
}

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

.color-light-gray{
    color: var(--color-light-gray);
}

.background-light-gray{
    background-color: var(--color-light-gray);
}

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

.background-red{
    background-color: var(--color-red);
}

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

.background-purple{
    background-color: var(--color-purple);
}

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

.background-cyan{
    background-color: var(--color-cyan);
}

.background-dark-gray-transparent{
    background-color: #06030ee0;
}


.discord-gradient {
    background: linear-gradient(270deg, #7001d3, #fe6272, #bd38ff, #1752ca, #1adbe3);
    background-size: 1000% 1000%;

    -webkit-animation: AnimationName 19s ease infinite;
    -moz-animation: AnimationName 19s ease infinite;
    animation: AnimationName 19s ease infinite;

    transition: all 0.3s;
    border: 1px solid #ffffff50;
}

.discord-gradient:hover{
    transform: scale(1.1);
}

@-webkit-keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}
@keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}

.premium-gradient{
    background: linear-gradient(232deg, #7001d3, #1adbe3);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;

    transition: all 0.3s;
    border: 1px solid #ffffff30;
}

.premium-gradient:hover{
    transform: scale(1.05);
}

@-webkit-keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}
@keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}

.login-gradient{
    background: linear-gradient(180deg, #000000, #383838);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 9s ease infinite;
    -moz-animation: AnimationName 9s ease infinite;
    animation: AnimationName 9s ease infinite;

    transition: all 0.3s;
}

.login-gradient:hover{
    transform: scale(1.05);
}

@-webkit-keyframes AnimationName {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}
@keyframes AnimationName {
    0%{background-position:50% 0%}
    50%{background-position:51% 100%}
    100%{background-position:50% 0%}
}

::-moz-selection { /* Code for Firefox */
    color: var(--color-white);
    background: var(--color-purple);
  }
  
  ::selection {
    color: var(--color-white);
    background: var(--color-purple);
  }