body{
        background-color: white;
        overflow: hidden;
        font-family: sans-serif;
}
.graph{
        width: var(--width);
        height: 5vw;
        position: absolute;
        top: 70%;
        left: 12%;
        animation: spinning 2s infinite linear alternate;
        transform: perspective(100cm) rotateX(80deg) rotate(var(--spin));
        transform-origin: 50% 50%;
        transform-style: preserve-3d;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;

        .lines{
                position: absolute;
                width: 100%;
                height: 40vw;
                transform-origin: 50% 0%;
                transform: rotateX(-90deg) translateY(-100%);
                border-left: 0.2vw solid gray;
                border-bottom: 0.2vw solid gray;

                .header{
                        text-align:center;
                        position: relative;
                        top: -3em;
                }
                
                .line{
                        position:absolute;
                        border-top: 0.2vw dashed gray;
                        width: 100%;
                        bottom: var(--height);
                        display:flex;
                        flex-direction: row-reverse;
                        height:0vw;
                }
                .line::before{
                        content: var(--num);
                        position:relative;
                        padding: 0.3em;
                        align-self: center;
                        top: 0vw;
                        right:100%;
                }
        }

        .bar{
                background-color:transparent;
                background: none;
                position: relative;
                --cWidth: 8vw;
                --cHeight: 8vw;
                --cDepth: calc(var(--value)* 2);
                transform: translateZ(calc(0px - var(--value)));
                --color: blue;
                flex: 0 0 var(--cWidth);
                

                :nth-child(5){
                }


                div{
                        background-color: white;
                }
                div::before{
                        display:block;
                        content: "";
                        width: 100%;
                        height: 100%;
                        background-color: var(--color);
                        background-image: linear-gradient(90deg, #fff4, transparent);
                        mask: linear-gradient(black 0%, black 49.9%, #0008 50%, transparent calc(50% + 13vw));
                        box-sizing: border-box;
                        border: 0.1vw solid color-mix(in srgb, var(--color) 40%, white 60%);
                }
                /*TOP*/
                :nth-child(5)::before{
                        mask: none;
                        background-image: linear-gradient(45deg, #fff4, #fff2);
                }
                /*RIGHT*/
                :nth-child(3)::before{
                        background-image: linear-gradient(-90deg, #0004, #0002);
                }
                /*LEFT*/
                :nth-child(4)::before{
                        background-image: linear-gradient(90deg, #0001, #fff2);
                }
        }

        .cubed.bar:nth-child(10n+1){
                --color: #1f77b4;
        }
        .cubed.bar:nth-child(10n+2){
                --color: #ff7f0e;
        }
        .cubed.bar:nth-child(10n+3){
                --color: #2ca02c;
        }
        .cubed.bar:nth-child(10n+4){
                --color: #d62728; 
        }
        .cubed.bar:nth-child(10n+5){
                --color: #9467bd; 
        }
        .cubed.bar:nth-child(10n+6){
                --color: #8c564b; 
        }
        .cubed.bar:nth-child(10n+7){
                --color: #e377c2; 
        }
        .cubed.bar:nth-child(10n+8){
                --color: #7f7f7f; 
        }
        .cubed.bar:nth-child(10n+9){
                --color: #bcbd22; 
        }
        .cubed.bar:nth-child(10n+10){
                --color: #17becf; 
        }


}

.tooltip {
  text-align: center;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;
  position: absolute;
  bottom: 100%;
  z-index: 1; /* Ensure tooltip is displayed above content */
  transform: translateX(-50%);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

@property --spin{
        syntax: "<angle>";
        inherits: true;
        initial-value: 0deg;
}

        @keyframes spinning{
        from {--spin:-30deg};
        to {--spin:30deg};
}