body{background:#e7fff4}html,body,canvas{margin:0;border:0;padding:0;display:block;overflow:hidden}#view,#ui{position:absolute;width:100vw;height:100vh}.fadein{animation:fadein 2s}.fadeout{animation:fadeout 2s}#ui{background-color:rgba(0,0,0,0.8)}#ui.hide{display:none}body,button,input{font-family:'PT Sans Caption',sans-serif}.uibox{max-width:600px;margin:2% auto 0 auto;padding:0 10px}.uibox .logo{width:100%;height:172px;position:relative;overflow:hidden}.logo img{position:absolute;width:100%;top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.uibox .resultsimg{width:50%;margin:auto;display:none}.resultsimg img{width:100%;display:none}.results{display:flex;justify-content:center;font-size:18px;color:#bcd}.results .left{text-align:right;margin-right:10px}.newScore{color:#8fa}.nav{margin:10px 10%;display:flex;justify-content:center}.uibox form.play{margin:0 10%;display:flex;justify-content:center}.uibox .tips{height:50px;display:flex}.uibox .tip{color:white;text-align:center;font-size:18px;animation:fadein 2s;padding:10px 10%;align-self:flex-end;width:100%}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadeout{from{opacity:1}to{opacity:0}}#nick{background:#ededd1;border:0;border-bottom:6px solid #a1a18d;padding:5px;margin:5px;font-size:25px;text-indent:10px;color:#666;outline:0;width:100%;flex:1 1 auto}#nick::placeholder{color:#a1a18d;opacity:1}#play{flex:0 0 130px}#again,#menu{flex:1 1 auto}button{border:0;border-bottom:6px solid;font-size:35px;letter-spacing:1px;padding:0 15px;margin:5px;cursor:pointer}button:active{border-bottom:0;border-top:6px solid}button:focus{outline:0}button.yellow{background:#eaec4b;border-color:#a1a130;color:#888a34}button.green{background:#7fed4c;border-color:#56a130;color:#56a130}button.disabled{background:#ebebeb;border-bottom:6px solid #9c9c9c;color:#9c9c9c;cursor:default}button.yellow:hover,button.yellow:focus{background:#fafc5b}button.green:hover,button.green:focus{background:#8efc5b}button.disabled:hover,button.disabled:focus{background:#ebebeb}button.disabled:active{border-top:0;border-bottom:6px solid}.uibox p.notsupported{color:#b13737;font-size:18px;text-align:center;padding:0 10%}@media screen and (max-width:500px){.uibox form.play{margin:0;flex-wrap:wrap}.nav{margin:10px 0;flex-wrap:wrap}}