body {
    font-family: 'Arial', sans-serif;
}

.ovladani {
    position: absolute;
    top: 50px;
    left: 150px;
    right: 150px;
    text-align: center;
}

.zobrazeni {
    position: absolute;
    top: 250px;
    left: 150px;
    right: 150px;
}

.stena {
    position: absolute;
    line-height: 0;
}

.kostka {
    width: 50px;
    height: 50px;
    border: solid 2px black;
    margin: -1px;
    display: inline-block;
}

.kostka[data-barva='0'] {background-color: green;}
.kostka[data-barva='1'] {background-color: red;}
.kostka[data-barva='2'] {background-color: blue;}
.kostka[data-barva='3'] {background-color: orange;}
.kostka[data-barva='4'] {background-color: white;}
.kostka[data-barva='5'] {background-color: yellow;}

.popisek {
    position: absolute;
    top: 75px;
    left: 50px;
    right: 50px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
}

.rotace {
    position: absolute;
    font-size: 48px;
    font-weight: bold;
    cursor: pointer;
}

/* NAVIGACE */

.navigace {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    text-align: center;
}

.zaznam {
    font-size: 20px;
    cursor: pointer;
}

.zaznam:before {
    content: ' ▶ ';
}

.zaznam:hover {
    color: darkblue;
}

/* POZICE STEN */

.stena.U {left: 200px; top: -200px;}

.krychle .stena.U {
    top: -155px;
    transform: skewX(45deg) scaleY(0.5);
    transform-origin: bottom center;
}

.stena.L {
    left: 0; top: 0;
}

.krychle .stena.L {
    left: 45px;
    transform: skewY(45deg) scaleX(0.5);
    transform-origin: right center;
}

.stena.R {
    left: 400px; top: 0;
}

.krychle .stena.R {
    left: 445px;
    transform: skewY(-45deg) scaleX(0.5);
    transform-origin: right center;
}

.stena.D {
    left: 200px; top: 200px;
}

.krychle .stena.D {
    left: 560px;
    top: 115px;
    transform: rotate(180deg) skewX(-45deg) scaleY(0.5);
}

.stena.F {
    left: 200px; top: 0;
}

.stena.B {
    left: 600px; top: 0;
}