html,
body {
    width: 100%;
    height: 100%;
}

html {
    font-family: monospace, courier;
    font-size: 1px;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    overflow: hidden;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    transform-style: preserve-3d;
}

.root {
    width: 100%;
    height: 100%;
}

.spawnPoint {
    position: absolute;
    top: 50%;
    left: 50%;
}

.meta {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.controlHint,
.coordinates,
.fps {
    position: absolute;
    font-size: 16rem;
    color: #fff;
}

.controlHint {
    display: flex;
    top: 5rem;
    left: 5rem;
}

.coordinates {
    bottom: 5rem;
    left: 5rem;
}

.fps {
    right: 5rem;
    bottom: 5rem;
}

.hintMouse,
.hintItem {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30rem;
    height: 30rem;
    margin-right: 5rem;
    border-radius: 20%;
}

.hintItem {
    font-weight: 700;
    color: #000;
    background-color: #fff;
}

.hintPlus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10rem;
    margin-right: 5rem;
}

.hintMouse {
    background: url("./right_mouse.png") center -4rem / contain no-repeat;
    background-color: #fff;
}

.cubeFaceUnderlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    background-color: #202020;
    backface-visibility: hidden;
}

.cubeFace {
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    background-color: #202020;
}

.cubelet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100rem;
    height: 100rem;
}

.magicCube {
    position: absolute;
    top: 0;
    left: 0;
    width: 300rem;
    height: 300rem;
}