/*#root {
    display: none;
}*/

#game-baseball {
}

#game-title, #game-subtitle {
    text-transform: uppercase;
}

.game {
    display: flex;
    height: 800px;
}

.screen {

}

/* CUBE */


#footer {
    background-color: #040504;
    height: 70px;
}


.rotateCubeTopOut {
    transform-origin: 50% 100%;
    animation: rotateCubeTopOut .6s ease-in;
}

.rotateCubeTopIn {
    transform-origin: 50% 0%;
    animation: rotateCubeTopIn .6s ease-in;
}

.rotateCubeBottomOut {
    transform-origin: 50% 0%;
    animation: rotateCubeBottomOut .6s ease-in;
}

.rotateCubeBottomIn {
    transform-origin: 50% 100%;
    animation: rotateCubeBottomIn .6s ease-in;
}

@keyframes rotateCubeTopOut {
    50% {
        animation-timing-function: ease-out;
        transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    }

    100% {
        transform: translateY(-100%) rotateX(90deg);
    }

}

@keyframes rotateCubeTopIn {
    0% {
        transform: translateY(100%) rotateX(-90deg);
    }

    50% {
        animation-timing-function: ease-out;
        transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    }
}

@keyframes rotateCubeBottomOut {
    50% {
        animation-timing-function: ease-out;
        transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
    }

    100% {
        transform: translateY(100%) rotateX(-90deg);
    }
}

@keyframes rotateCubeBottomIn {
    0% {
        transform: translateY(-100%) rotateX(90deg);
    }

    50% {
        animation-timing-function: ease-out;
        transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
    }
}