.parallelepiped {
    width: 100px;
    height: 50px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 500px;
}

.parallelepiped .low-box {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateX(-40deg) rotateY(20deg) rotateZ(10deg);
    transition: 0.5s;
}

.parallelepiped .low-box:hover {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

.low-box span,
.low-box .top {
    position: absolute;
    border: 1px solid #121212;
}

.low-box .left,
.low-box .right,
.low-box .front,
.low-box .back {
    background: linear-gradient(rgb(21, 21, 25), var(--glow-color));
    filter: drop-shadow(0 0 15px color-mix(in srgb, var(--glow-color) 80%, transparent));
}

.low-box .front {
    width: 100px;
    height: 20px;
    transform: translateZ(25px);
}

.low-box .back {
    width: 100px;
    height: 20px;
    transform: rotateY(180deg) translateZ(25px);
}

.low-box .left {
    width: 50px;
    height: 20px;
    transform: rotateY(-90deg) translateZ(25px);
}

.low-box .right {
    width: 50px;
    height: 20px;
    transform: rotateY(90deg) translateZ(75px);
}

.low-box .top {
    width: 100px;
    height: 50px;
    transform: rotateX(90deg) translateZ(25px);
    background: #121212;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff;
    box-shadow: 0px 0px 1px inset var(--glow-color);
}

.low-box .top:hover {
    text-shadow: 0 0 20px #ffffff;
}

.low-box .top a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff;
    text-decoration: none;
}

.low-box .top a:hover {
    text-shadow: 0 0 20px #ffffff;
}