#joystick-composer {
    position: relative;
    width: 500px;
    height: 410px;
    margin: 0 auto;
    -webkit-perspective: 450;
    -webkit-user-select: none;
}

.x-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    border-radius: 200px;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(45deg) rotateZ(0deg);
}

aside {
    position: absolute;
    font-size: 48pt;
    font-weight: bold;
    height: 100px;
    width: 100px;
    border: none;
    cursor: pointer;
}

aside.highlight {
    background-color: red;
}

.x-controls [data-command="forward"] {
    left: 50%;
    top: 0%;
}

.x-controls [data-command="backward"] {
    left: 50%;
    bottom: 0;
}

.x-controls [data-command="left"] {
    top: 50%;
}

.x-controls [data-command="right"] {
    top: 50%;
    right: 0;
}

.x-controls [data-command="counterclockwise"] {
    top: 0;
    left: 0;
}

.x-controls [data-command="clockwise"] {
    top: 0;
    right: 0;
}

.y-controls {
    position: absolute;
    top: -10px;
    left: -130px;
    width: 80px;
    height: 160px;
    border-radius: 200px;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateZ(0deg);
}

.y-controls [data-command="up"] {
    left: 50%;
}

.y-controls [data-command="down"] {
    left: 50%;
    bottom: 0;
}

.flight-controls {
    position: absolute;
    bottom: 130px;
    right: -90px;
    width: 160px;
    height: 80px;
    border-radius: 200px;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateZ(0deg);
}

.flight-controls [data-command="take-off"] {
    left: 0;
}

.flight-controls [data-command="land"] {
    right: 0;
}

.begin-flight {
    top: -30px;
    right: -20px;
}