﻿.joystick {
    text-align: center;
    position: relative;
}

.translationJoystick {
    background-color: lightblue;
}

.heightJoystick {
    background-color: lightpink;
}

.rotationJoystick {
    background-color: lightcoral;
}

.translationDisplay {
    background-color: lightgreen;
    text-align: center;
    height: 75px;
    width: 100%
}

.joystickContainer {
    position: absolute;
    width: 100%;
    top: 75px;
    bottom: 0;
}

@media screen and (orientation:landscape) {
    .translationJoystick {
        float: left;
        width: 33%;
        height: 100%;
    }

    .heightJoystick {
        float: left;
        width: 34%;
        height: 100%;
    }

    .rotationJoystick {
        float: right;
        width: 33%;
        height: 100%;
    }
}

@media screen and (orientation:portrait) {
    .translationJoystick {
        width: 100%;
        height: 34%;
    }

    .heightJoystick {
        width: 100%;
        height: 33%;
    }

    .rotationJoystick {
        width: 100%;
        height: 33%;
    }
}
