body {
    margin: 0 auto;
    background-color: black;
}
#container {
    width: 99vw;
    height: 99vh;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#displaycanvas {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px black solid;
}
#touchinterface { /*add media query only display if touchscreen*/
    
}
.touchinterface {
    position: absolute;
    width: 6vw;
    height: 6vw;
    font: 5vw Arial;
    font-weight: bolder;
    border-radius: 50%;
    background-color: #FFFFFF88;
}
.touchinterface:active {
    background-color: #88FF8888;
}
#left {
    bottom: 9%;
    left: 2%
}
#right {
    bottom: 9%;
    left: 14%
}
#up {
    bottom: 16%;
    left: 8%
}
#down {
    bottom: 2%;
    left: 8%
}
#action1 {
    bottom: 2%;
    right: 8%
}
#action2 {
    bottom: 10%;
    right: 2%
}