html,body{background-color:#eaeae9;margin:0;padding:0;position:relative;font-family:'text',sans-serif;;width:100%;height:100%;touch-action:none;overflow:hidden;} @font-face{font-family:"text";src:url('media/fonts/montserrat.ttf') format('truetype'),url('media/fonts/montserrat.woff') format('woff');} #game,#menu,#orientation,#loading{position:absolute;left:0;top:0;z-index:0;width:100%;height:100%;} img#spin{display:none;margin:auto;} #loading{z-index:50;background-color:#1ca7b5;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-container{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;} div#menu{background-color:#1ca7b5;display:none;z-index:10;} div#menu-contain{z-index:2000;position:absolute;top:50%;left:50%;display:block;box-sizing:border-box;padding-top:1%;width:100%;height:100%;max-width:400px;max-height:500px;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;} img#logo{margin:auto;display:block;height:30%;} div#title{text-align:center;font-size:24px;font-weight:bold;color:red;margin-bottom:1.2%;text-shadow:0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white,0 0 4px white;} input#username{text-align:center;font-size:18px;font-weight:bold;color:#222;margin:2% 0;padding:6px;border-radius:4px;border:none;width:70%;max-width:200px;} button#bt-play{display:block;margin:auto;padding:6px 28px;background-color:green;color:white;font-size:20px;font-weight:bold;border-radius:6px;outline:0;cursor:pointer;} button#bt-play:active{background-color:rgb(224,138,7);} div#avatar{position:relative;display:block;box-sizing:border-box;height:20%;} img#virus{display:inline-block;box-sizing:border-box;height:100%;} span.arrow{display:block;padding:6px;background-color:green;color:white;font-size:20px;font-weight:bold;border-radius:6px;outline:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;outline:0;border:1px solid white;} span.arrow:active{background-color:rgb(224,138,7);} span#previous{left:10%;} span#next{right:10%;} img.preload{display:none;} div#side-bar{z-index:20;display:none;position:absolute;top:50%;right:4px;max-width:45px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} a.button{display:block;width:100%;margin:15px 0;text-decoration:none;} a.button>img{display:block;max-width:100%;} @media screen and (min-height:321px){div#title{margin-bottom:4%;} input#username{margin:5% 0;} div#title{font-size:32px;} div#side-bar{max-width:50px;} } @media screen and (min-height:360px){div#side-bar{max-width:70px;} }