* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    background-color: #222;
    padding: 0;
    margin: 0
}

body {
    color: #eee;
    font-family: helvetica, arial, sans-serif;
    margin: 0;
    font-size: 10pt;
    line-height: 1.3
}

h1 {
    color: #ccc;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 10px 0 6px
}

.panel {
    margin-bottom: 32px;
    padding: 8px;
    background-color: rgba(0, 0, 0, .5)
}

.option {
    padding: 4px 0
}

label {
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

#no-webgl-notice {
    text-align: center;
    font-size: 24px;
    padding: 64px 24px;
    color: #ffbc6c
}

#rotate-to-play {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    text-align: center;
    margin-bottom: 48px
}

@font-face {
    font-family: arcade;
    src: url(media/fonts/run.ttf)
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    text-align: center;
    font-family: arcade;
    font-size: 20px
}

#menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 480px;
    background: url(media/frontpage.jpg);
    font-size: 20px;
    text-align: center;
    display: none
}

#levelup {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 480px;
    font-size: 20px;
    text-align: center;
    background-image: url(media/frontpage.jpg);
    display: none
}

#levelup td {
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
    border-radius: 4px;
    width: 80px;
    height: 68px;
    background: #6f6ff6;
    color: #ef1
}

#back_button {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 32px;
    cursor: pointer
}

.rating_bg {
    background-image: url(media/diamond.png);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 18px;
    text-shadow: 2px 2px #000;
    color: #0f0
}

#health_meter {
    position: absolute;
    top: 58px;
    left: 204px;
    width: 162px;
    height: 19px;
    background-image: url(media/healthmeter.png)
}

#health_meter_bg {
    position: absolute;
    top: 58px;
    left: 204px;
    width: 162px;
    height: 19px;
    background-image: url(media/healthempty.png)
}

@keyframes animatedbg {
    0% {
        background-position: 0 0
    }
    50% {
        background-position: -240px 0
    }
    100% {
        background-position: 0 0
    }
}

#hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px; //height:480px;font-size:20px;text-align:center;text-shadow:2px 2px #000;display:none}#info{position:absolute;top:100px;left:15px;width:600px;height:100px;border:1px solid #000;border-radius:8px;text-align:center;background:rgba(255,255,255,.7);color:red;padding:0;display:none}#complete{position:absolute;top:76px;left:15px;width:600px;height:141px;border:1px solid #000;border-radius:8px;text-align:center;background:rgba(255,255,255,.7);color:red;padding-top:40px}.mc_button{height:40px;width:400px;outline:2px solid #000;position:relative;margin-bottom:11px;display:inline-block;background-color:#6f6f6f;background-repeat:repeat;padding:5px;font-family:arcade;font-size:19px;font-weight:400;text-align:center;color:#fff;text-shadow:3px 3px #4c4c4c;border-bottom:4px solid #565656;border-right:2px solid #565656;border-left:2px solid #aaa;border-top:2px solid #aaa;box-sizing:border-box;cursor:pointer;text-decoration:none}.mc_button span{position:relative;line-height:40px;bottom:3px}.mc_button:hover{border-bottom:4px solid #59639a;border-right:2px solid #59639a;border-left:2px solid #bdc6ff;border-top:2px solid #bdc6ff;background-color:#7c86be;color:#ffffa0}a{text-decoration:none;color:#fff}@media all and (orientation:portrait){body.mobile .landscape-only{display:none}}@media all and (orientation:landscape){body.mobile .portrait-only{display:none}}body.mobile .desktop-only{display:none}body.desktop .mobile-only{display:none}body.webgl .no-webgl-only{display:none}body.no-webgl .webgl-only{display:none}body.desktop{padding:0;width:640px;margin:0;position:absolute;overflow:hidden}body.mobile{padding:0;width:auto;font-size:8px}body.desktop #canvas{width:640px;height:480px;background-color:#000}body.mobile #canvas{position:fixed;width:100%;height:100%;background-color:#000}#cross{position:absolute;top:200px;left:200px}