:root {
    /* gaps: */
    --gap: 10px;
    --gap-1: 20px;
    /* colors: */
    --r: 
    80;
    --g: 
    120;
    --b: 
    85;
    --x: 15;
    --back-clr-one: 
        rgb(
            var(--r), 
            var(--g), 
            var(--b)
        );
    --back-clr-two: 
        rgb(
            calc(var(--r) + var(--x)),
            calc(var(--g) + var(--x)),
            calc(var(--b) + var(--x))
        );
    --back-clr-three: 
        rgb(
            calc(var(--r) + var(--x)*2),
            calc(var(--g) + var(--x)*2),
            calc(var(--b) + var(--x)*2)
        );
    --main-clr-one: 
        rgb(
            calc(var(--r) + var(--x)*3),
            calc(var(--g) + var(--x)*3),
            calc(var(--b) + var(--x)*3)
        );
    --main-clr-two: 
        rgb(
            calc(var(--r) + var(--x)*4),
            calc(var(--g) + var(--x)*4),
            calc(var(--b) + var(--x)*4)
        );
    --main-clr-three: 
        rgb(
            calc(var(--r) + var(--x)*5),
            calc(var(--g) + var(--x)*5),
            calc(var(--b) + var(--x)*5)
        );
    --important-clr: rgb(220, 248, 248);
    /* special colors: */
    --opacity: 0.75;
    --games-played-clr: rgba(117, 209, 255, 0.75);
    --games-won-clr: rgba(145, 255, 112, 0.75);
    --games-lost-clr: rgba(254, 129, 98, 0.75);
    --games-draw-clr: rgba(255, 230, 91, 0.75);
    --games-rate-clr: rgba(202, 202, 202, 0.75);
    /* resposibility colors */
    --hover-clr: gold;
    --active-clr: yellow;
    /* fonts */
    --inc: 4px;
    --h6: 12px;
    --h5: calc(var(--h6) + var(--inc));
    --h4: calc(var(--h5) + var(--inc));
    --h3: calc(var(--h4) + var(--inc));
    --h2: calc(var(--h3) + var(--inc));
    --h1: calc(var(--h2) + var(--inc));
    /* images */
    --background-image: url('../images/backgrounds/picture-7.jpg');
}