:root {
    --pwd_cubeWidth:10em;
    --pwd_cubePosZ:calc(var(--pwd_cubeWidth) * 0.5);
    --pwd_cubeShadowSize:calc(var(--pwd_cubeWidth) * 0.25);
    --pwd_cubeShadowPosX:calc(var(--pwd_cubeWidth) * 0.45);
    --pwd_cubeShadowPosZ:calc(var(--pwd_cubeWidth) * -0.3);
    --pwd_cubeBackground:rgba(0,0,255,0.5);
    --pwd_cubeBorderColor:rgba(0,0,255,1);
}
#pwd_cubeContainer {
    position:absolute;
    width:var(--pwd_cubeWidth);
    height:var(--pwd_cubeWidth);
    perspective: 400px;
    transform-style: preserve-3d;
}
#pwd_cube {
    position:relative;
    height:100%;
    width:100%;
    transform-style: preserve-3d;
/*  animation: pwd_rotateCube 15s linear infinite;*/
}
#pwd_cube div {
    position: absolute;
    width:100%;
    height:100%;
    padding:0.8em;
    opacity:0.9;
    border:1px solid var(--pwd_cubeBorderColor);
    background-color:var(--pwd_cubeBackground);
}
.pwd_cubeOne {
    transform:rotateX(-54.7356deg) rotateY(45deg) translateZ(var(--pwd_cubePosZ));}
.pwd_cubeTwo {
    transform: rotateX(-54.7356deg) rotateY(135deg)  translateZ(var(--pwd_cubePosZ));}
.pwd_cubeThree {
    transform: rotateX(-54.7356deg) rotateY(225deg) translateZ(var(--pwd_cubePosZ));}
.pwd_cubeFour {
    transform: rotateX(-54.7356deg) rotateY(315deg) translateZ(var(--pwd_cubePosZ));}
.pwd_cubeFive {
    transform: rotateX(35.2644deg) rotateZ(-45deg) translateZ(var(--pwd_cubePosZ));}
.pwd_cubeSix {
    transform: rotateX(35.2644deg) rotateY(180deg) rotateZ(-45deg) translateZ(var(--pwd_cubePosZ));}
.pwd_cubeShadow {
    width:var(--pwd_cubeShadowSize);
    height:var(--pwd_cubeShadowSize);
    background: rgba(255,255,255,0.3);
    box-shadow: 0 0 50px 50px rgba(255,255,255,0.3);
    transform: translateX(var(--pwd_cubeShadowPosX)) rotateX(90deg) translateZ(var(--pwd_cubeShadowPosZ));
}
@keyframes pwd_rotateCube {
    100% {transform: rotateY(360deg);}
}