@import url(https://fonts.googleapis.com/css?family=Lato:400,700);@-webkit-keyframes notification{0%{-webkit-transform:translateY(80px);transform:translateY(80px);opacity:0}50%{-webkit-transform:translateY(-90px);transform:translateY(-90px);opacity:1}to{-webkit-transform:translateY(-70px);transform:translateY(-70px);opacity:1}}@keyframes notification{0%{-webkit-transform:translateY(80px);transform:translateY(80px);opacity:0}50%{-webkit-transform:translateY(-90px);transform:translateY(-90px);opacity:1}to{-webkit-transform:translateY(-70px);transform:translateY(-70px);opacity:1}}@-webkit-keyframes dissapear{0%{opacity:1}to{opacity:0}}@keyframes dissapear{0%{opacity:1}to{opacity:0}}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,body.loggedOut .loginBox,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,input{background-color:#f5f8fc}body{line-height:1;font-family:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:100%}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}input{padding:10px;border:0;-webkit-box-shadow:0 2px 4px rgba(50,50,93,.1),0 0 0 1px rgba(42,47,69,.16);box-shadow:0 2px 4px rgba(50,50,93,.1),0 0 0 1px rgba(42,47,69,.16);border-radius:5px;font-size:14px}button:focus,input:focus{outline:0}.loginBox,.notification,.player__board span{-webkit-box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);background-color:#fff;padding:40px;border-radius:5px}.loginBox .loginBox__title{text-align:center;font-size:26px;margin-bottom:20px}.loginBox input{width:200px}.notification{opacity:0;position:absolute;bottom:0;left:50px;-webkit-box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);padding:20px 50px;text-align:center;border-radius:50px;-webkit-animation:notification .5s ease-out forwards,dissapear .5s ease-in forwards;animation:notification .5s ease-out forwards,dissapear .5s ease-in forwards;-webkit-animation-delay:.5s,2s;animation-delay:.5s,2s;color:#fff}.chat .chat__container{overflow-x:hidden}.chat .chat__container .chat__messages{word-break:break-all;overflow:scroll;scroll-behavior:smooth;width:220px;padding:20px 10px;background-color:#fff;margin-bottom:10px;height:50vh;border-radius:10px;-webkit-box-shadow:0 3px 36px rgba(23,55,87,.1),0 5px 15px rgba(0,0,0,.07);box-shadow:0 3px 36px rgba(23,55,87,.1),0 5px 15px rgba(0,0,0,.07)}.chat .chat__container .chat__messages li{margin-bottom:10px}.chat .chat__container .chat__messages li span{font-weight:600}.chat .chat__container .chat__messages li .self{color:#5856d6}.chat .chat__container .chat__messages li .out{color:#ff9500}.chat .chat__form{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;top:-50px}.chat .chat__form input{height:50px;width:120%;padding:0 25px;-webkit-box-shadow:0 6px 12px -2px rgba(50,50,93,.25),0 3px 7px -3px rgba(0,0,0,.3);box-shadow:0 6px 12px -2px rgba(50,50,93,.25),0 3px 7px -3px rgba(0,0,0,.3)}.chat .chat__form,.gameContainer,.gameContainer .main .controls{display:-webkit-box;display:-ms-flexbox;display:flex}.gameContainer{width:90%;margin:0 auto;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.gameContainer .canvas,.gameContainer .chatMessages{background-color:#fff;height:80vh;border-radius:10px;-webkit-box-shadow:0 3px 36px rgba(23,55,87,.1),0 5px 15px rgba(0,0,0,.07);box-shadow:0 3px 36px rgba(23,55,87,.1),0 5px 15px rgba(0,0,0,.07)}.gameContainer .main{margin-right:100px}.gameContainer .main #jsCanvas{width:500px;height:500px}.gameContainer .main .controls{margin-top:25px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gameContainer .main .controls,.gameContainer .main .controls .buttonContainer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gameContainer .main .controls .colors{margin:20px;display:-webkit-box;display:-ms-flexbox;display:flex}.gameContainer .main .controls .colors:hover .color{opacity:.95;-webkit-transform:translateX(-3px);transform:translateX(-3px)}.gameContainer .main .controls .colors .color,.gameContainer .main .controls button{-webkit-box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);cursor:pointer}.gameContainer .main .controls .colors .color{height:40px;width:40px;border-radius:25px;-webkit-transition:opacity .1s linear,scale .1s linear,-webkit-transform .1s linear;transition:opacity .1s linear,scale .1s linear,transform .1s linear;transition:opacity .1s linear,scale .1s linear,transform .1s linear,-webkit-transform .1s linear}.gameContainer .main .controls .colors .color:hover{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}.gameContainer .main .controls .colors .color:hover~.color{-webkit-transform:translateX(3px);transform:translateX(3px)}.gameContainer .main .controls .colors .color.selectedColor{-webkit-box-shadow:none;box-shadow:none}.gameContainer .main .controls button{margin-left:15px;padding:5px 7px;min-width:40px;border-radius:5px;font-weight:600;border:2px solid #8e8e93;color:#8e8e93;font-size:14px;-webkit-transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}.gameContainer .main .controls button:active{-webkit-transform:scale(.98);transform:scale(.98)}.gameContainer .chat{width:200px}.player__board{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:36px;grid-gap:10px;margin-bottom:30px}.player__board span{-webkit-box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);padding:10px;text-align:center;border-radius:20px;margin-right:20px;width:100%}.player__board span:last-child{margin-right:0}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{height:100%}body .gameContainer,body .loginBox{display:none}body.loggedIn .gameContainer{display:-webkit-box;display:-ms-flexbox;display:flex}