.firm{
    font-size: 13px;
    bottom: 0;
    right: 20px;
    position: fixed;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.contenedor {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    perspective: 1500px;
    top: -380px;
}

.cube {
    transform: translateY(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.cube-face {
    position: absolute; 
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    background: white;

    border: black 1px solid;
    border-radius: 5%;
}

.front {
    transform: translateZ(200px);
}

.back {
    transform: rotateY(180deg) translateZ(200px);
}

.left {
    transform: rotateY(-90deg) translateZ(200px);
}

.right {
    transform: rotateY(90deg) translateZ(200px);
}

.top {
    transform: rotateX(90deg) translateZ(200px);
}

.bottom {
    transform: rotateX(-90deg) translateZ(200px);
}

.inside {
    display: grid;
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(3, 80px);
}

.dot {
    height: 70px;
    width: 70px;
    background-color: black;
    border-radius: 50%;
    justify-self: center;
    align-self: center;
}

.front .inside .dot {
    grid-row: 2;
    grid-column: 2;
}

.back .inside .dot:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
}

.back .inside .dot:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
}

.back .inside .dot:nth-child(3) {
    grid-row: 1;
    grid-column: 3;
}

.back .inside .dot:nth-child(4) {
    grid-row: 3;
    grid-column: 1;
}

.back .inside .dot:nth-child(5) {
    grid-row: 3;
    grid-column: 2;
}

.back .inside .dot:nth-child(6) {
    grid-row: 3;
    grid-column: 3;
}

.left .inside .dot:nth-child(1) {
    grid-row: 1;
    grid-column: 3;
}

.left .inside .dot:nth-child(2) {
    grid-row: 2;
    grid-column: 2;
}

.left .inside .dot:nth-child(3) {
    grid-row: 3;
    grid-column: 1;
}

.right .inside .dot:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
}

.right .inside .dot:nth-child(2) {
    grid-row: 1;
    grid-column: 3;
}

.right .inside .dot:nth-child(3) {
    grid-row: 3;
    grid-column: 1;
}

.right .inside .dot:nth-child(4) {
    grid-row: 3;
    grid-column: 3;
}

.top .inside .dot:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
}

.top .inside .dot:nth-child(2) {
    grid-row: 1;
    grid-column: 3;
}

.top .inside .dot:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
}

.top .inside .dot:nth-child(4) {
    grid-row: 3;
    grid-column: 1;
}

.top .inside .dot:nth-child(5) {
    grid-row: 3;
    grid-column: 3;
}

.bottom .inside .dot:nth-child(1) {
    grid-row: 1;
    grid-column: 3;
}

.bottom .inside .dot:nth-child(2) {
    grid-row: 3;
    grid-column: 1;
}