:root{
    --color-white: #ffffff;
    --color-black: #000000;

    --color-red: #FD6173;
    --color-purple: #A36EF7;
    --color-cyan: #2CAFE0;

    --color-backend-background: #262831;
    --color-backend-dark-background: #1C1E24;
    --color-nav: #747CDB;
    --color-nav-inactive: #75798B;
    --color-dark-box: #17191E;
    --color-users-green: #B6F87F;
    --color-messages-blue: #80F1F8;
    --color-box-pink: #FF88FF;
    --color-server-green: #63BB73;
    --color-server-button: #747CDBBF;

    --color-inactive: #ffbf81;
}

.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-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;
}

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

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

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

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

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

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

.color-nav-inactive{
    color: var(--color-nav-inactive);
}

.background-nav-inactive{
    background-color: var(--color-nav-inactive);
}

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

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

.color-users-green{
    color: var(--color-users-green);
}

.background-users-green{
    background-color: var(--color-users-green);
}

.color-server-green{
    color: var(--color-server-green);
}

.background-server-green{
    background-color: var(--color-server-green);
}

.color-server-button{
    color: var(--color-server-button);
}

.background-server-button{
    background-color: var(--color-server-button);
}

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

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

.color-box-pink{
    color: var(--color-box-pink);
}

.background-box-pink{
    background-color: var(--color-box-pink);
}

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

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


.fixed-form-header{
    background: linear-gradient(180deg, rgba(38,40,49,1) 85%, rgba(0,0,0,0) 100%);
}

.box-animated-gradient {
    background: linear-gradient(270deg, #262831, #17191E);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 7s ease infinite;
    -moz-animation: AnimationName 7s ease infinite;
    animation: AnimationName 7s ease infinite;
}

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


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