@font-face{font-family:NHU;src:url(NHU-Regular.eaf936e2.ttf)}html,body{width:100%;height:100%;color:#eee;margin:0;padding:0;font-family:NHU,sans-serif;font-size:1rem;position:fixed;overflow:hidden}body{box-sizing:border-box;background-color:#111;justify-content:center;align-items:center;padding:2rem;display:flex}a,.restart{color:#63c4ff;cursor:pointer}h1{font-size:1rem}hr{width:50%;height:1px;opacity:.2;background-color:#555;border:0}#snakeCanvas{z-index:-1;position:absolute}.wrapper{max-width:67rem;height:28rem;z-index:100;justify-content:center;align-items:center;display:flex}.portrait{height:100%;opacity:.8;flex:2.4;overflow:hidden}.portrait img{height:100%;color:#0000;transform:translate(-15%)}.info{height:100%;box-sizing:border-box;background-color:#1c1c1cb3;flex:3;padding:1rem 2rem}.links{margin-bottom:0;line-height:2rem}.links a{margin-right:.5rem;padding:.5rem 0}.arrowKeys{text-align:center;opacity:1;transition:opacity .3s;position:absolute;bottom:.7rem}.arrowKeys p{margin:auto}.arrowKeys img{width:5rem}.scoreWrap{opacity:0;transition:opacity .3s;position:absolute;bottom:1rem;left:1rem}.scoreWrap p{margin:0}@media screen and (max-width:1150px){html{font-size:.9rem}}@media screen and (max-width:950px){html{font-size:.75rem}}@media screen and (max-width:850px){.wrapper{max-width:40rem;height:auto;display:block}.portrait{height:20rem}.portrait img{height:30rem;transform:translateY(-15%)}.arrowKeys{font-size:.8rem}.arrowKeys img{width:4rem}}@media screen and (max-width:550px){.wrapper{max-width:35rem}}@media screen and (max-width:450px){.wrapper{width:100%;max-width:none}.portrait{height:15rem}.portrait img{height:27rem;transform:translateY(-15%)}.info{padding:1rem}}@media screen and (max-width:360px){.portrait{height:15rem}.portrait img{height:24rem;transform:translate(-10%,-15%)}}@media screen and (max-width:300px){.portrait{height:10rem}.portrait img{height:20rem;transform:translate(-10%,-15%)}}@media screen and (max-width:270px){.portrait{display:none}}@media screen and (max-width:850px) and (max-height:680px){html{font-size:.7rem}}@media screen and (max-width:415px) and (max-height:680px){.portrait img{height:24rem}.portrait{height:10rem}}@media screen and (max-width:360px) and (max-height:680px){body{padding:1rem}.portrait img{height:23rem}.portrait{height:8rem}.info{padding:1rem}}@media screen and (max-width:300px) and (max-height:680px){.portrait img{transform:translate(-15%,-15%)}}@media screen and (max-width:850px) and (max-height:700px){.portrait{height:15rem}}@media screen and (max-width:850px) and (max-height:640px){.portrait{height:12rem}.portrait img{height:28rem}}@media screen and (max-width:850px) and (max-height:550px){.portrait{display:none}}@media screen and (max-width:400px) and (max-height:600px){.portrait img{height:24rem;transform:translate(-10%,-15%)}.portrait{height:10rem}}
/*# sourceMappingURL=index.46d876a6.css.map */