.cell {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid black;
}

.cell-text {
    font-weight: bold;
    font-size: 30px;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.side {
    position: absolute;
}

.side.L {
    left: calc(50px + 0px);
    top: calc(50px + 175px);
}

.side.F {
    left: calc(50px + 175px);
    top: calc(50px + 175px);
}

.side.R {
    left: calc(50px + 350px);
    top: calc(50px + 175px);
}

.side.B {
    left: calc(50px + 525px);
    top: calc(50px + 175px);
}

.side.U {
    left: calc(50px + 175px);
    top: calc(50px + 0px)
}

.side.D {
    left: calc(50px + 175px);
    top: calc(50px + 350px);
}

.arrow {
    position: absolute;
    font-size: 25px;
    cursor: pointer;
}

.arrow.left {
    left: calc(20px + 0px);
    top: calc(50px + 175px + 63px);
}

.arrow.right {
    left: calc(730px + 0px);
    top: calc(50px + 175px + 63px);
}

.arrow.up {
    left: calc(50px + 175px + 67px);
    top: calc(15px);
}

.arrow.down {
    left: calc(50px + 175px + 67px);
    top: calc(50px + 350px + 153px);
}

.arrow.leftup {
    left: calc(50px + 175px + 180px);
    top: calc(50px + 350px );
}

.arrow.rightdown {
    left: calc(175px);
    top: calc(175px);
}

#sideBLabel {
    position: absolute;
    left: calc(500px);
    top: calc(600px);
}

button.random {
    position: absolute;

    left: 500px;
    top: 100px;
}

select#viewType {
    position: absolute;
    left: 25px;
    top: 25px;
}

#threeDView {
    padding: 50px;
}