/* Colors */

/* ---------------- Variables ---------------- */
html {
    --chat-history-background:  white;
    --chat-border-radius:       var(--border-radius);
    --login-error-color:        rgb(231, 90, 90);
    --hint-background:          ;
    --chat-user:                var(--input-highlight);
    --chat-message:             rgb(147, 153, 158);}

/* ----------------- Others -------------------- */ 
.auto-scroll { transform: translateZ(0); } /* Force to use gpu */

.services img:hover {
    scale:                  1.1;
    transition:             scale 0.2s;}

/* --------------- Color filtering ------------- */ 
.blinkies > * img, .webrings .auto-scroll > * > div, .services img { 
    filter:                 sepia(100%) saturate(300%) brightness(100%) hue-rotate(180deg);}

.blinkies > * img:hover, .webrings .auto-scroll > * > div:hover, .services img:hover { filter: none; }


/* ----------------- Color -------------------- */

.chat-history {
    border-radius:          var(--chat-border-radius);
    background-color:       var(--chat-history-background);}

.chat-account-errors { color: var(--login-error-color); }

.scroll_below-clip-box { mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 90%, rgba(0,0,0,0)); }

.message .user { color: var(--chat-user); }
.message .date_sent { color: var(--chat-message); }


/* ------------- Decorations & dividers (D&D) -------------------- */

/* ----- Helpers ----- */
#try_hovering--blinkie {
    scale:                      3;
    position:                   absolute;
    bottom:                     -27px;
    left:                       -63px;
    z-index:                    999;}

#try_sliding_down { width: 150px; }

#try_tapping--blinkie {
    scale:                      3;
    position:                   absolute;
    right:                      -60px;
    bottom:                     -28px;
    z-index:                    999;}

/* ------ Opacity tricks for marquee -------- */

.blinkies .clip-box{
    mask-image:             linear-gradient(to right, 
                                            rgba(0,0,0,0) 0%, 
                                            rgba(0,0,0,1) 5%, 
                                            rgba(0,0,0,1) 95%, 
                                            rgba(0,0,0,0) 100%);}

.webrings .clip-box{
    mask-image:             linear-gradient(to bottom, 
                                            rgba(0,0,0,0) 0%, 
                                            rgba(0,0,0,1) 5%, 
                                            rgba(0,0,0,1) 95%, 
                                            rgba(0,0,0,0) 100%);}