@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap');
body{background:#e7fff4}
html,body,canvas{margin:0;border:0;padding:0;display:block;overflow:hidden;height:100%}
#right_side{position:absolute;top:0;bottom:0;right:0;width:220px;height:200px;z-index:3;padding-top:12px;padding-right:12px;text-align:right}
#view,#ui{position:absolute;width:100%;height:100%}
#view{z-index:1}
#ui{z-index:2}
.fadein{animation:fadein 2s}
.fadeout{animation:fadeout 2s}
#ui{background-color:#000c}
#ui.hide{display:none}
body,button,input{font-family:"PT Sans Caption",sans-serif}
.uibox{max-width:600px;margin:14px auto 0;padding:8px 10px 30px}
.uibox .logo{text-align:center;height:100px;position:relative;overflow:hidden}
.logo img{width:350px}
.resultsimg{width:50%;margin:auto}
.resultsimg img{width:100%}
.results{display:flex;justify-content:center;font-size:18px;text-shadow:0 0 2px #000;white-space:nowrap;color:#fff}
.results .left{text-align:right;margin-right:10px}
.newScore{color:#8fa}
.nav{margin:10px 10%;display:flex;justify-content:center}
.uibox .play{margin:0 10%;display:flex;justify-content:center}
.uibox .tips{height:50px;display:flex}
.uibox .tip{color:#fff;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:none;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:none;border-bottom:6px solid;font-size:35px;letter-spacing:1px;padding:0 15px;margin:5px;cursor:pointer}
button:active{border-bottom:none;border-top:6px solid}
button:focus{outline:none}
button.yellow{background:#eaec4b;border-color:#a1a130;color:#888a34}
button.green{background:#7fed4c;border-color:#56a130;color:#56a130}
button.orange{background:#ff972f;border-color:#ae4e0d;color:#422100}
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:none;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 .play{margin:0;flex-wrap:wrap}
.nav{margin:10px 0;flex-wrap:wrap}
button{font-size:25px}
.resultsimg{width:75%}
}
#about{display:none;z-index:4;position:absolute;box-sizing:border-box;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;height:80%;border-radius:10px;background-color:#fff}
.modal_box{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:32px}
.modal_scroll{flex-grow:1;overflow-y:auto}
@media screen and (max-width: 500px) {
#about{width:100%;height:100%;left:0;top:0;transform:none;padding:0;border-radius:0}
.modal_box{padding:16px}
}
.hide{display:none}
.show{display:block}
#paperio-site_multisize{position:absolute;text-align:center;top:310px;width:100%;z-index:3}
#bottom{position:absolute;text-align:center;display:none;bottom:0;right:0;color:#202020;z-index:2;background-color:#fff;padding:4px;border-top-left-radius:8px}
#bottom a,a:visited{color:#202020;text-decoration:none}
#overlay{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;z-index:9;display:none}
#lng{position:absolute;bottom:0;left:0;z-index:4;background:#fff;list-style-type:none;margin:0;border:0;padding:4px 6px 4px 0;border-top-right-radius:8px;display:inline}
#lng li{display:inline;padding:4px;background:#fff;cursor:pointer}
#lng li.active{background:#88f}
.noPadding{padding:0 5px}
button img{display:block;margin-top:1px;margin-left:auto;margin-right:auto}
.skins-container{display:flex;flex-direction:row;flex:1;align-items:center;justify-content:center}
.skin{margin:5px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:5px;background:#dad53f;width:130px;height:130px}
.skin-view{background:#fcfdc4;flex-grow:1}
.skin-view img{display:block;margin-top:10px;margin-left:auto;margin-right:auto}
.skin-view h3{margin:0;text-align:center}
#rightbanner{position:absolute;top:0;bottom:0;right:0;width:220px;height:200px;z-index:3;padding-top:12px;padding-right:12px;text-align:right;display:none}
#aipBranding{display:none!important}
#discord{position:absolute;left:8px;top:8px;z-index:3;display:none}
#discord a img{border-radius:6px}
@keyframes kf_slider {
from{opacity:0;pointer-events:none}
to{opacity:1;pointer-events:auto}
}
.slider-1{animation:kf_slider 2s 0s both}
.slider-2{animation:kf_slider 2s 1s both}
.slider-3{animation:kf_slider 2s 2s both}
.slider-4{animation:kf_slider 2s 3s both}
.slider-5{animation:kf_slider 2s 4s both}