: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);
}

header {
    z-index: 2000;
}

.fixed-form-header {
    background: linear-gradient(180deg, rgba(38, 40, 49, 1) 85%, rgba(0, 0, 0, 0) 100%);
    top: 90px;
    z-index: 1000 !important;
}

.sticky-navigation {
    top: 90px;
}

@media (max-width: 768px) {
    .fixed-form-header {
        padding-top: 0.5em !important;
        padding-bottom: 1.5em !important;
        top: 58px;
    }

    .sticky-navigation {
        top: 58px;
    }
}

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