* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 70vh;
    margin: auto;
    display: grid;
    place-items: center;
// background: black;
}

h1 {
    font-family: sans-serif;
}

input {
    border-radius: 0.3rem;
    border: 1px solid steelblue;
    color: black;
    font-size: 0.8rem;
// font-weight: bold;
// letter-spacing: -0.1rem;
// outline: none;
    background: rgba(255,255,255,0.75);
    margin: 0.015rem;
    position: relative;
// top: 20vh;

    width: auto;
    min-width: 35vh;
    height: auto;
    padding: 0.3rem 0.3rem;
//    margin-bottom: 3rem;
}


#text-id {
    border-color: red;
    font-size: 0.1rem;
    padding: 0;
    margin: 0;
// top: 17.3vh;
// left: 12rem;
    position: relative;
    float: left;
// margin-left: 4vh;

    font-size: 0.3em;
    padding: 0rem;
    line-height: 0.2rem;

}


div#base div.row > div.cube,
table tr td {
    border: 0;
    border-collapse: collapse;
    /*
    padding: 0;
    margin: 0;
     */
}

div#base {
    display: block;
    float: left;
    position: relative;
    perspective: 700px;
    transform-style: preserve-3d;
}

div.row {
    border-collapse: collapse;
    float: left;
    padding: 0rem;
    margin: 0rem;
    transform-style: preserve-3d;
    position: relative ;
// border: 1px solid red;

}

div.cube {
    /* border-collapse: collapse; */
    /* border: 1px solid blue; */
    padding: 0rem;

    /*    width: 17px;
        height: 17px;
    */
    border-collapse: collapse;
    transform-style: preserve-3d;
// transform: translateZ(17px);
// background: rgba(32,32,32,0.5);
    position: relative;
    background: none !important;
}

#frame {
    border: 1px solid mediumpurple;
    padding: 0;
    margin: 0;
}

.cube.active {
// outline: 2px;
    background: rgba(32,32,32,0.99);

}

.cube .side {
// perspective-origin: 0% 0%;
// transform-style: preserve-3d;
    /*
    width: 17px;
    height: 17px;
    */
// transform: perspective(100px);
    position: absolute;
    opacity: 0.8;

//box-shadow: 0 0 0.1em #000 inset;

}

.cube.active .side {
    box-shadow: 0 0 0.1em #000 inset;
}


.cube .front  { transform: rotateX( 0deg)   rotateY(  0deg) translateZ(8px); }
.cube .back   { transform: rotateX( 0deg)   rotateY(  180deg) translateZ(8px); }

.cube .right  { transform: rotateX( 0deg)   rotateY( 90deg) translateZ(8px); }
.cube .left   { transform: rotateX( 0deg)   rotateY(-90deg) translateZ(8px); }

.cube .top    { transform: rotateX( 90deg)  rotateY( 0deg) translateZ(8px); }
.cube .bottom { transform: rotateX(-90deg)  rotateY( 0deg) translateZ(8px); }


.cube.active .front {
    background: rgba(64,64,64,0.9);
}

.cube.active .back {
    background: rgba(255, 174, 0, 0.4);
// background: rgba(0,255,0,0.9);
    background: rgba(64,64,64,0.2);
}

.cube.active .right {
    background: rgba(0,255,0,0.7);
    background: rgba(255,32,255,0.8);
    background: rgba(0,128,255,0.7);
}

.cube.active .left {
    background: rgba(255,128,255,0.8);
}

.cube.active .bottom {
    background: rgba(0,255,255,0.4);
}

.cube.active .top {
    background: rgba(128,0,255,0.7);
}


div#base:hover {
    animation: rotateXYZ 6s reverse infinite;
    animation-delay: 3s;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    1.66%,
    3.33% {
        transform: rotate(12deg);
    }
    4.99%,
    6.66% {
        transform: rotate(24deg);
    }
    8.32%,
    9.99% {
        transform: rotate(36deg);
    }
    11.65%,
    13.32% {
        transform: rotate(48deg);
    }
    14.98%,
    16.65% {
        transform: rotate(60deg);
    }
    18.31%,
    19.98% {
        transform: rotate(72deg);
    }
    21.65%,
    23.31% {
        transform: rotate(84deg);
    }
    24.98%,
    26.65% {
        transform: rotate(96deg);
    }
    28.31%,
    29.98% {
        transform: rotate(108deg);
    }
    31.65%,
    33.33% {
        transform: rotate(120deg);
    }
    34.98%,
    36.65% {
        transform: rotate(132deg);
    }
    38.33%,
    39.98% {
        transform: rotate(144deg);
    }
    41.65%,
    43.33% {
        transform: rotate(156deg);
    }
    44.98%,
    46.65% {
        transform: rotate(168deg);
    }
    48.33%,
    50% {
        transform: rotate(180deg);
    }
    51.65%,
    53.33% {
        transform: rotate(192deg);
    }
    54.99%,
    56.65% {
        transform: rotate(204deg);
    }
    58.33%,
    59.99% {
        transform: rotate(216deg);
    }
    61.65%,
    63.33% {
        transform: rotate(228deg);
    }
    64.99%,
    66.66% {
        transform: rotate(240deg);
    }
    68.33%,
    69.99% {
        transform: rotate(252deg);
    }
    71.66%, 73.33% {
        transform: rotate(264deg);
    }
    74.99%,
    76.66% {
        transform: rotate(276deg);
    }
    78.33%,
    79.99% {
        transform: rotate(288deg);
    }
    81.66%,
    83.33% {
        transform: rotate(300deg);
    }
    84.99%,
    86.66% {
        transform: rotate(312deg);
    }
    88.33%,
    89.99% {
        transform: rotate(324deg);
    }
    91.66%,
    93.33% {
        transform: rotate(336deg);
    }
    94.99%,
    96.66% {
        transform: rotate(348deg);
    }
    98.33%,
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateY {
    0% {
        transform: rotateY(0deg);
    }

    24.98%,
    26.65% {
        transform: rotateY(96deg);
    }
    48.33%,
    50% {
        transform: rotateY(180deg);
    }
    74.99%,
    76.66% {
        transform: rotateY(276deg);
    }
    98.33%,
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes rotateX {
    0% {
        transform: rotateX(0deg);
    }

    24.98%,
    26.65% {
        transform: rotateX(96deg);
    }
    48.33%,
    50% {
        transform: rotateX(180deg);
    }
    74.99%,
    76.66% {
        transform: rotateX(276deg);
    }
    98.33%,
    100% {
        transform: rotateX(360deg);
    }
}


@keyframes rotateXYZ {
    0% ,
    3% {
    //        box-shadow: none;
    //        transform: rotateX(0deg);
        transform: rotateZ(360deg);
        perspective: 700px;
        background: white;
    }
    /*
    25% {
        transform: rotateX(22deg) rotateY(22deg) rotateZ(22deg);
    }
     */
    42%,
    62% {
        transform: rotateX(35deg)  rotateY(35deg) rotateZ(35deg);
        perspective: 500px;
    // background: lightgray;

    }
    /*
    75% {
        transform: rotateX(22deg) rotateY(22deg) rotateZ(22deg);
    }

     */
    97%,
    100% {
        transform:
                rotateX(5deg)
                rotateY(-360deg)
                rotateZ(0deg);
        perspective: 700px;

    //        box-shadow: none;
    }

}