* { box-sizing: border-box; }

:root
{
    --cubesize: 200px;
    --cubesizehalf: calc(var(--cubesize) / 2);
    --cubeColor1: 0;
    --cubeColor2: 0;
    --cubeColor3: 0;
}


.scene
{
    position: relative;
    xleft: calc(50% - var(--cubesize));
    xtop: calc(50% - var(--cubesize));
    width: var(--cubesize);
    height: var(--cubesize);
    perspective: 2000px;
    perspective-origin: 300% -200%;
    transition: all 1s;
    overflow: none;
    animation: toback 1s forwards;
}
.scene:hover
{
    animation: tofront 1s forwards;
    margin-top: calc(var(--cubesize) * -1);
}
.scene:hover .cubeface p  { font-size: 75%; }

.cube
{
    width: var(--cubesize);
    height: var(--cubesize);
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--cubesizehalf) * -1)) rotateX(0deg) rotateY(0deg);
    transition: transform 0.5s;
}
.cube:hover
{
    --cubesize: 300px;
    --cubesizehalf: 150px;
    transform: translateZ(calc(var(--cubesize) / 10)) rotateX(0deg) rotateY(-90deg);
}

.cubeface
{
    position: absolute;
    width: var(--cubesize);
    height: var(--cubesize);
    border: 4px solid white;
    padding: 20px;
    text-align: center;
    user-select: none;
    transition: all 1s;
    overflow-y: auto;
    backface-visibility: hidden;
}
.cubeface *
{
    color: white;
}
.cubeface img
{
    width: 50%;
}
.cubeface h1 { font-size: 150%; }
.cubeface h3 { font-size: 120%; }
.cubeface p  { font-size: 50%; }


.scene.modul.remote     { --cubeColor1: hsl(205, 100%, 50%); --cubeColor2: hsl(205, 100%, 40%); --cubeColor3: hsl(205, 100%, 30%); }
.scene.modul.vr         { --cubeColor1: hsl(205,  80%, 50%); --cubeColor2: hsl(205,  80%, 40%); --cubeColor3: hsl(205,  80%, 30%); }
.scene.modul.s3d        { --cubeColor1: hsl(205,  60%, 50%); --cubeColor2: hsl(205,  60%, 40%); --cubeColor3: hsl(205,  60%, 30%); }
.scene.modul.presenter  { --cubeColor1: hsl(205,  80%, 40%); --cubeColor2: hsl(205,  80%, 30%); --cubeColor3: hsl(205,  80%, 20%); }
.scene.modul.stats      { --cubeColor1: hsl(205,  55%, 40%); --cubeColor2: hsl(205,  55%, 30%); --cubeColor3: hsl(205,  55%, 20%); }
.scene.modul.offline    { --cubeColor1: hsl(205,  35%, 40%); --cubeColor2: hsl(205,  35%, 30%); --cubeColor3: hsl(205,  35%, 20%); }

.cubeface.front     { background: var(--cubeColor2); }
.cubeface.right     { background: var(--cubeColor3); }
.cubeface.top       { background: var(--cubeColor1); }
.cubeface.back      { background: var(--cubeColor2); }
.cubeface.left      { background: var(--cubeColor3); }
.cubeface.bottom    { background: var(--cubeColor1); }

.cubeface.front     { transform: rotateY(  0deg) translateZ(var(--cubesizehalf)) }
.cubeface.right     { transform: rotateY( 90deg) translateZ(var(--cubesizehalf)) }
.cubeface.back      { transform: rotateY(180deg) translateZ(var(--cubesizehalf)) }
.cubeface.left      { transform: rotateY(-90deg) translateZ(var(--cubesizehalf)) }
.cubeface.top       { transform: rotateX( 90deg) translateZ(var(--cubesizehalf)) }
.cubeface.bottom    { transform: rotateX(-90deg) translateZ(var(--cubesizehalf)) }

@keyframes tofront { 0% {z-index: 100;}  100% {z-index: 100;} }
@keyframes toback  { 0% {z-index: 100;}  100% {z-index: 0;} }