body,body>section,html{width:100vw;height:100vh}section#guide,section#playground{background:url(/images/background_bedroom.jpg) center center/cover no-repeat}body,html{padding:0;margin:0;font-size:16px;font-family:sans-serif}body{overflow:hidden;user-select:none}*{outline:0;line-height:1.6em}a{text-decoration:none}body>section{overflow:hidden}.hidden{display:none!important}.visible{display:block}body.hurt{filter:sepia(.6) hue-rotate(-20deg) saturate(3)}body.fade_dark{filter:brightness(1);animation:5s linear forwards fade_dark;-webkit-animation:5s linear forwards fade_dark}@keyframes fade_dark{0%{filter:brightness(1)}100%{filter:brightness(0)}}@-webkit-keyframes fade_dark{0%{filter:brightness(1)}100%{filter:brightness(0)}}section#loading{background:rgba(0,0,0,.05);display:flex;align-items:center}section#loading .progress_bar{display:block;margin:auto;width:25rem;max-width:calc(100vw - 2rem);height:4rem;border:.5rem solid rgba(0,0,0,.05);border-radius:1rem;overflow:hidden;position:relative;z-index:1}section#loading .progress_bar .loaded{display:block;height:100%;width:10%;background:orange}section#home .background,section#home form,section#loading .progress_bar .start{width:100%;height:100%;position:absolute;left:0;top:0}section#loading .progress_bar .loaded.loading{animation:20s linear forwards progress_bar_loading;-webkit-animation:20s linear forwards progress_bar_loading}section#loading .progress_bar .start{z-index:2;cursor:pointer;display:flex;align-items:center;justify-content:center;background:orange;text-transform:uppercase;font-size:1.5rem}section#loading .progress_bar .start:hover,section#lose .container .restart:hover,section#win .container .restart:hover{background:#fff;color:orange}@keyframes progress_bar_loading{0%{width:0%}100%{width:90%}}@-webkit-keyframes progress_bar_loading{0%{width:0%}100%{width:90%}}section#home{background:url(/images/background_livingroom.jpg) center center/cover no-repeat}section#home .background{display:flex;align-items:end;justify-content:center;z-index:1}section#guide,section#home form{align-items:center;display:flex}section#home .background .bears{max-height:70%;max-width:90%;display:inline;animation:3s linear infinite forwards home_bears_moving;-webkit-animation:3s linear infinite forwards home_bears_moving}section#home form{justify-content:center;z-index:2}section#home form h1{font-size:5rem;margin:0 0 1rem;display:block;text-align:center;font-family:sans-serif;text-transform:uppercase;color:#fff;text-shadow:0 0 2px #000;background:rgba(0,0,0,.3);border-radius:1rem;padding:0 1rem}section#home form .fieldset{display:flex;margin:auto;flex-direction:column;width:600px;max-width:90vw;background:rgba(0,0,0,.5);padding:1rem}section#home form .fieldset .field{display:flex;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9)}section#home form .fieldset .field+.field{margin-top:.1rem}section#home form .fieldset .field .left{flex-basis:200px;display:flex;align-items:center;width:200px;flex-shrink:0;padding:0 1rem}section#home form .fieldset .field .right{flex-grow:1;display:flex;flex-shrink:0;width:0}section#home form .fieldset .field .right input,section#home form .fieldset .field .right select{flex-grow:1;width:0;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);font-size:1.2rem;padding:.3em;appearance:none;-webkit-appearance:none;position:relative;z-index:1}section#home form .fieldset .field .right select:after{content:'';display:block;width:0;height:0;border:1rem solid transparent;border-top-color:#000;position:absolute;right:1rem;top:50%;margin-top:-1rem}section#home form .fieldset .field .right button{flex-grow:1;cursor:pointer;background:rgba(255,255,255,.9);border:none;font-size:1.2rem;padding:.3rem}section#guide{justify-content:center}section#guide .container{display:block;position:relative;z-index:1;width:calc(100vw - 2rem);height:calc(100vh - 2rem)}section#guide .container video{display:block;position:absolute;width:100%;height:100%;top:0;left:0}section#guide .container .skip{cursor:pointer;display:block;position:absolute;bottom:1rem;left:0;width:100%;text-align:center}section#guide .container .skip::after{content:'Bỏ qua';display:inline-block;background:rgba(0,0,0,.5);color:#fff;border-radius:1rem;padding:1rem}section#playground .bullet::before,section#playground .way .virus::before{content:'';border-radius:50%;box-shadow:0 0 1rem rgba(var(--color),1),0 0 1rem rgba(var(--color),1),0 0 1rem rgba(var(--color),1),0 0 1rem rgba(var(--color),1),0 0 1rem rgba(var(--color),1)}section#playground{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}section#playground .container{width:600px;max-width:calc(100vw - 2rem);height:calc(100vh - 2rem);background:rgba(0,0,0,.5);border-radius:1rem;display:block;position:relative;z-index:1;overflow:hidden}section#playground .container .count{display:block;position:relative;top:5rem;left:5%;width:20%}section#playground .container .count .background{display:block;width:100%;padding-top:110%;background:url(/images/viruses.png) bottom center/contain no-repeat}section#playground .container .count span{display:block;text-align:center;font-size:3rem;color:#fff;text-shadow:0 0 1rem #fff,0 0 1rem #fff}section#playground .container .live{display:block;position:absolute;top:5rem;right:5%;width:20%}section#playground .container .live .heart{display:block;width:20%;margin:1% auto;background:url(/images/heart.png) bottom center/contain no-repeat}section#playground .container .live .heart::before,section#playground .way .killed::before{content:'';display:block;padding-top:100%}section#playground .weapon{display:block;z-index:2;background:url(/images/weapon.png) 50% 0/auto 100% no-repeat;width:100%;height:30%;position:absolute;bottom:1rem;left:0;animation:3.8s linear .2s forwards weapon_moving;-webkit-animation:3.8s linear .2s forwards weapon_moving;transform:translateY(-200%)}@keyframes weapon_moving{0%{transform:translateY(-200%)}100%{transform:translateY(-5%)}}@-webkit-keyframes weapon_moving{0%{transform:translateY(-200%)}100%{transform:translateY(-5%)}}section#playground .bullet{display:block;z-index:5;width:5%;margin-left:-2.5%;position:absolute;left:50%}section#playground .bullet::before{background:rgba(var(--color),1);background:radial-gradient(rgba(var(--color),.8),rgba(var(--color),1));display:block;padding-top:100%}section#playground .bullet.red{--color:190,55,45}section#playground .bullet.green{--color:39,174,96}section#playground .bullet.blue{--color:52,152,219}section#playground .bullet.yellow{--color:254,202,87}section#playground .bullet.pink{--color:243,104,224}section#playground .bullet.orange{--color:230,126,34}section#playground .container .list_medicine{position:absolute;bottom:0;left:0;z-index:3;height:20%;width:calc(100% - 2rem);display:flex;margin:1rem;border-radius:1rem;background:rgba(255,255,255,.8);overflow:hidden;animation:.5s linear 4s forwards list_medicine_moving;-webkit-animation:.5s linear 4s forwards list_medicine_moving;transform:translateY(120%)}@keyframes list_medicine_moving{0%{transform:translateY(120%)}100%{transform:translateY(0)}}@-webkit-keyframes list_medicine_moving{0%{transform:translateY(120%)}100%{transform:translateY(0)}}section#playground .container .list_medicine>span{flex-basis:calc(100% / 6);width:calc(100% / 6);display:block;position:relative;z-index:1;transform:translateY(100%)}@keyframes list_medicine_bullet_movingx{0%{transform:translateY(-100%)}100%{transform:translateY(10%)}}@-webkit-keyframes list_medicine_bullet_movingx{0%{transform:translateY(-100%)}100%{transform:translateY(10%)}}section#playground .container .list_medicine>span::before{content:'';display:block;height:100%;background:center center/auto 70% no-repeat;transform:translateY(10%);transition:.3s}section#playground .container .list_medicine>span:hover{cursor:pointer;background:rgba(0,0,0,.05)}section#playground .container .list_medicine>span:active{background:rgba(0,0,0,.1)}section#playground .container .list_medicine>span:hover::before{transform:translateY(-10%)}section#playground .container .list_medicine>span.red{animation:.5s linear 4.1s forwards list_medicine_moving;-webkit-animation:.5s linear 4.1s forwards list_medicine_moving}section#playground .container .list_medicine>span.red::before{background-image:url(/images/medicine_red.png)}section#playground .container .list_medicine>span.green{animation:.5s linear 4.2s forwards list_medicine_moving;-webkit-animation:.5s linear 4.2s forwards list_medicine_moving}section#playground .container .list_medicine>span.green::before{background-image:url(/images/medicine_green.png)}section#playground .container .list_medicine>span.blue{animation:.5s linear 4.3s forwards list_medicine_moving;-webkit-animation:.5s linear 4.3s forwards list_medicine_moving}section#playground .container .list_medicine>span.blue::before{background-image:url(/images/medicine_blue.png)}section#playground .container .list_medicine>span.yellow{animation:.5s linear 4.4s forwards list_medicine_moving;-webkit-animation:.5s linear 4.4s forwards list_medicine_moving}section#playground .container .list_medicine>span.yellow::before{background-image:url(/images/medicine_yellow.png)}section#playground .container .list_medicine>span.pink{animation:.5s linear 4.5s forwards list_medicine_moving;-webkit-animation:.5s linear 4.5s forwards list_medicine_moving}section#playground .container .list_medicine>span.pink::before{background-image:url(/images/medicine_pink.png)}section#playground .container .list_medicine>span.orange{animation:.5s linear 4.6s forwards list_medicine_moving;-webkit-animation:.5s linear 4.6s forwards list_medicine_moving}section#playground .container .list_medicine>span.orange::before{background-image:url(/images/medicine_orange.png)}section#playground .way{display:block;position:absolute;z-index:1;width:40%;height:100%;top:0;left:50%;margin-left:-20%;background:rgba(255,255,255,.2);opacity:0;animation:4s linear forwards way_fade_in;-webkit-animation:4s linear forwards way_fade_in}@keyframes way_fade_in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes way_fade_in{0%{opacity:0}100%{opacity:1}}section#playground .way .killed{display:block;z-index:10;position:absolute;left:50%;width:60%;margin-left:-30%;background:url(/images/killed.gif) center center/contain no-repeat}section#playground .way .virus{display:block;position:absolute;background:center center/100% no-repeat;left:50%;animation:.4s linear infinite alternate virus_moving;-webkit-animation:.4s linear infinite alternate virus_moving}@keyframes virus_moving{0%{background-size:100%}100%{background-size:90%}}@-webkit-keyframes virus_moving{0%{background-size:100%}100%{background-size:90%}}section#playground .way .virus.size_1{width:44%;margin-left:-22%}section#playground .way .virus.size_2{width:48%;margin-left:-24%}section#playground .way .virus.size_3{width:52%;margin-left:-26%}section#playground .way .virus.size_4{width:56%;margin-left:-28%}section#playground .way .virus.size_5{width:60%;margin-left:-30%}section#playground .way .virus.size_6{width:64%;margin-left:-32%}section#playground .way .virus.size_7{width:68%;margin-left:-34%}section#playground .way .virus.size_8{width:72%;margin-left:-36%}section#playground .way .virus.size_9{width:76%;margin-left:-38%}section#playground .way .virus.size_10{width:80%;margin-left:-40%}section#playground .way .virus.red{background-image:url(/images/virus_red.png)}section#playground .way .virus.green{background-image:url(/images/virus_green.png)}section#playground .way .virus.blue{background-image:url(/images/virus_blue.png)}section#playground .way .virus.yellow{background-image:url(/images/virus_yellow.png)}section#playground .way .virus.pink{background-image:url(/images/virus_pink.png)}section#playground .way .virus.orange{background-image:url(/images/virus_orange.png)}section#playground .way .virus::before{padding-top:100%;display:block;background:rgba(var(--color),1);background:radial-gradient(rgba(var(--color),.8),rgba(var(--color),1))}section#leaderboard,section#lose,section#win{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}section#win .container{width:600px;max-width:calc(100vw - 2rem);height:calc(100vh - 2rem);background:url(/images/background_win.jpg) center center/cover no-repeat;border-radius:1rem;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:1;overflow:hidden;box-sizing:border-box}section#leaderboard .container h2,section#lose .container h2,section#win .container h2{padding:1rem;background:rgba(0,0,0,.8);margin:0;border-radius:1rem;color:#fff}section#lose .container .score,section#win .container .score{font-size:5rem;display:block;text-align:center;padding-top:1rem;text-shadow:0 0 1rem #fff,0 0 1rem #fff,0 0 1rem #fff,0 0 1rem #fff,0 0 1rem #fff}section#lose .container .restart,section#win .container .restart{display:flex;margin:1rem 0;align-items:center;justify-content:center;cursor:pointer;width:25rem;max-width:calc(100vw - 2rem);height:4rem;border:.5rem solid rgba(0,0,0,.05);border-radius:1rem;background:orange;text-transform:uppercase;font-size:1.5rem}section#leaderboard .container,section#lose .container{width:600px;max-width:calc(100vw - 2rem);height:calc(100vh - 2rem);border-radius:1rem;position:relative;z-index:1;box-sizing:border-box;display:flex;overflow:hidden}section#lose .container .restart:before,section#win .container .restart:before{content:'Thử lại'}section#lose .container{background:url(/images/background_lose.jpg) center center/cover no-repeat;align-items:center;justify-content:center;flex-direction:column}section#leaderboard .container{background:url(/images/background_livingroom.jpg) center center/cover no-repeat;align-items:center;justify-content:center;flex-direction:column}section#leaderboard .container .table{margin:1rem 0;width:100%;background:rgba(0,0,0,.4);padding:1rem;color:#fff}section#leaderboard .container .table .row{background:rgba(0,0,0,.2);color:#fff;padding:.5rem;display:flex}section#leaderboard .container .table .row:nth-child(2n){background:rgba(0,0,0,.05)}section#leaderboard .container .table .row .name{display:flex;align-items:center;flex-grow:1;padding:0 1rem;flex-shrink:0;font-weight:700;width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}section#leaderboard .container .table .row .score{display:flex;align-items:center;flex-grow:1;padding:0 1rem;flex-shrink:0;width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fade_out{animation:1s linear forwards fade_out;-webkit-animation:1s linear forwards fade_out}@keyframes fade_out{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes fade_out{0%{opacity:1}100%{opacity:0}}@media screen and (max-width:800px){section#home form h1{font-size:4rem}}@media screen and (max-width:600px){section#home form h1{font-size:3rem}section#home form .fieldset .field .left{flex-basis:150px;display:flex;align-items:center;width:150px;flex-shrink:0;padding:0 1rem}}@media screen and (max-width:400px){section#home form h1{font-size:2.5rem}section#home form .fieldset .field .left{flex-basis:100px;display:flex;align-items:center;width:100px;flex-shrink:0;padding:0 1rem}}