*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;

    min-height: 100vh;
    background: #3d3d3d;
}
.code{
    display: flex;
    align-items: center;
    height: 200px;

   
}
.code h2{

    font-size: 4rem;
    color: #fff;

    font-weight: 800;
    text-shadow: -1px 1px rgb(146, 143, 143),
    -2px 2px #fff,
    -3px 3px rgb(146, 143, 143),
    -4px 4px rgb(146, 143, 143),

    -5px 5px rgb(146, 143, 143),
    -6px 6px rgb(146, 143, 143),
    -7px 7px rgb(146, 143, 143),

    -8px 8px rgb(146, 143, 143),
    -9px 9px rgb(146, 143, 143),
    -10px 10px rgb(146, 143, 143),

    -11px 11px rgb(146, 143, 143),
    -15px 15px 23px rgba(0, 0, 0, 0.9);  
}

.code h2:hover{
    color: rgb(146, 143, 143) ;
}

.container{
    display: flex;

    transform-style: preserve-3d;
    gap:10px;
    transform: rotateY(30deg) rotateX(10deg);
    
}
.container .text{
    position: relative;

    width: 100px;
    height: 100px;

    transform-style: preserve-3d;

    transition:  2.5s ease-in-out;
    transition-delay: calc(0.25s * var(--j));
}
.container:hover .text{
    transform: rotateX(-360deg);
}
.container:hover .text:last-child
{
    transform: rotateX(630deg);
}
.container .text::before{
    content: "";

    position: absolute;

    background: #373737;

    width: 100px;
    height: 100px;

    transform-origin: left;
    transform:rotateY(90deg) translateX(-50px);
}
.container .text:last-child:before{
    background: #29ab3c;
}
.container .text span{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: linear-gradient(#434343,#535353);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 4em;

    color: #fff;

    transform-style: preserve-3d ;
    transform: rotateX(calc(90deg *var(--i))) translateZ(50px);
}

.container .text:last-child span{
    background: linear-gradient( #29c040, #32ed4e) ;
}