#navigation {
    --touchPointSize: clamp(100px, 40vw, 24vh);
    --touchTextSize: clamp(25px, 10vw, 6vh);
    --marginScreen: 10px;
}

#navigation div {
    /* position */
    bottom: var(--marginScreen);
    z-index: 1;
    position: absolute;
    /* dimension */
    height: var(--touchPointSize);
    width: var(--touchPointSize);
    /* appearance */
    border-radius: calc(var(--touchPointSize)/2);
    border: 2px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(50, 50, 50, 0.1);
    /* text */
    text-align: center;
    line-height: var(--touchPointSize);
    font-family: monospace;
    font-size: var(--touchTextSize);
    color: rgba(0, 0, 0, 0.1);
}

#navigation #move {
    left: var(--marginScreen);
}

#navigation #jump {
    right: var(--marginScreen);
}

.level {
    padding-top: 20px;
    position: relative;
    margin: auto;
    width: 50%;
    z-index: 1;
    /* pass pointer events to aframe */
    pointer-events: none;
}

.level span {
    margin: 2px;
    padding: 5px;
    user-select: none;
    font-size: 90%;
    opacity: 0.75;
    vertical-align: middle;
    /* stop pass pointer here */
    pointer-events: all;
}

.level span.label {
    font-family: monospace;
    font-size: 100%;
    font-weight: bold;
    /* max length*/
    width: 20em;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    /* pass pointer events to aframe */
    pointer-events: none;
}

.level span:hover {
    cursor: pointer;
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container#using_auto_margins_for_main_axis_alignment */

.level .firstAction {
    margin-left: auto;
}

.level .list>div {
    display: flex;
}

.level .list {
    padding-top: 5px;
}

.level .list .active {
    background-color: rgba(0, 0, 0, 0.1);
}

.fullscreen {
    display: none;
}