:root {
    --content-max-width: 1000px;
    --content-edge: calc((100vw - min(var(--content-max-width), 100vw)) / 2);
}

/* Glavni kontejner stabla*/
#GlobalTreeBranch {
    position: absolute;
    /* left: 10px; */
    left: calc(var(--content-edge) - 120px);
    width: 50px;
    z-index: 1;
    pointer-events: none;
}

/* Slojevi za Grayscale i Color koji stoje jedan preko drugog */
.TreeLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

/* Levi i desni vertikalni stub*/
#GrayscaleLeft,
#ColorLeft,
#GrayscaleRight,
#ColorRight {
    width: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Donji sloj - potpuno u sivoj boji */
#TreeGrayscale {
    filter: grayscale(100%) opacity(0.3);
}

/* Gornji sloj - u boji, seče se dinamički pomoću clip-path na scroll */
#TreeColor {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.1s linear;
}

/* Pojedinačni segment od 100px */
.TreeSegment {
    width: 25px;
    height: 80px;
}

/* Pravilo za pravljenje vertikalne linije stabla po sredini (40px od leve ivice) */
#GrayscaleLeft .TreeSegment,
#ColorLeft .TreeSegment {
    border-right: 2px solid var(--colorGrayMedium);
}

@media screen and (max-width: 1300px) {
    #GlobalTreeBranch {
        left: 10px;
    }
}

@media screen and (max-width: 850px) {
    #GrayscaleLeft,
    #ColorLeft,
    #GrayscaleRight,
    #ColorRight {
        width: 15px;
    }

    .TreeSegment {
        width: 15px;
        height: 60px;
    }
}