html,body{background-color:#333;margin:0;padding:0;position:relative;font-family:'text',sans-serif;width:100%;height:100%;touch-action:none;overflow:hidden;box-sizing:border-box;} @font-face{font-family:"text";src:url('media/fonts/roboto-medium.woff') format('woff');} #orientation,#loading{position:absolute;left:0;top:0;z-index:0;width:100%;height:100%;} #loading{z-index:50;background-color:#333;background-image:url('media/graphics/common/loading.svg');background-repeat:no-repeat;background-position:center center;} #loading>img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:130px;} #orientation{z-index:100;background-color:#228b22;display:none;} #orientation>img{margin:auto;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;max-width:80%;max-height:80%;} #game{background:url('media/graphics/common/loading.svg') center no-repeat;width:100%;height:100%;} #canvas{position:absolute;left:0;top:0;width:100%;height:100%;-ms-interpolation-mode:nearest-neighbor;-webkit-transform:scale3d(1,1,1);z-index:1;box-sizing:border-box;} a.button{display:block;text-decoration:none;} a.button>img{display:block;} div#control-panel{position:absolute;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,0.8);box-sizing:border-box;z-index:10;} div#control-panel *{box-sizing:border-box;} div#button-container{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;padding:12px;height:15%;width:82%;max-height:150px;min-height:100px;text-align:center;border:2px solid white;background-color:rgba(255,94,0,0.1);-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;} div#button-container>a{display:inline-block;height:100%;padding:0.5em;} div#button-container>a>img{display:block;height:100%;width:auto;} #menu-button{display:block;cursor:pointer;z-index:21;position:absolute;bottom:6px;right:12px;} .bar1,.bar2,.bar3{width:35px;height:5px;background-color:rgb(255,255,255);margin:6px 0;transition:0.4s;} .change .bar1{-webkit-transform:rotate(-45deg) translate(-9px,6px);transform:rotate(-45deg) translate(-9px,6px);} .change .bar2{opacity:0;} .change .bar3{-webkit-transform:rotate(45deg) translate(-8px,-8px);transform:rotate(45deg) translate(-8px,-8px);} @media only screen and (min-width:590px){div#button-container{width:70%;} } @media only screen and (min-width:800px){div#button-container{width:auto;} }