body{margin:0;padding:0;font-family:sans-serif}body,button,input{font-family:Varela Round,sans-serif;font-size:6vw}button{cursor:pointer}@media (min-width:768px){body{font-size:4vw}button,input{font-size:3vw}}.baloo>div{font-family:Baloo,cursive;font-size:10vw!important}.App{text-align:center}.App-logo{-webkit-animation:App-logo-spin infinite 20s linear;animation:App-logo-spin infinite 20s linear;height:80px}.App-header{background-color:#222;height:150px;padding:20px;color:#fff}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.pulse{-webkit-animation:pulse-anim .75s infinite alternate;animation:pulse-anim .75s infinite alternate}@-webkit-keyframes pulse-anim{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}25%,50%{opacity:1}to{opacity:1;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}}@keyframes pulse-anim{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}25%,50%{opacity:1}to{opacity:1;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}}.Home{position:relative;width:100vw;height:100vh;display:grid;grid-template-areas:". . ." ". board ." ". . ."}.App-logo{height:7vw;min-height:40px}.App-logo,.Board{align-self:center;justify-self:center;display:grid}.Board{grid-area:board;background-color:#000;grid-gap:1vw;grid-template:repeat(3,1fr)/repeat(3,1fr);max-width:500px;max-height:500px}.Board>div{position:relative;background-color:#fff;width:13vw;height:13vw;min-width:75px;min-height:75px;max-width:160px;max-height:160px;display:grid;-ms-flex-line-pack:center;align-content:center;font-size:4vw;margin:-1px}.round-star-label{position:absolute;right:-1vw;bottom:-1vw;display:grid;-ms-flex-align:center;align-items:center;-webkit-box-sizing:content-box;box-sizing:content-box;width:7vw;height:7vw;max-width:40px;max-height:40px;border:none;font:normal 100%/normal Arial,Helvetica,sans-serif;color:#000;text-align:center;-o-text-overflow:clip;text-overflow:clip;background:#61dafb;cursor:pointer}.round-star-label .label-text{position:relative;z-index:1;color:#fff;font-size:1vmax;-webkit-transform:rotate(-30deg);-ms-transform:rotate(-30deg);transform:rotate(-30deg)}.round-star-label:before{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.round-star-label:after,.round-star-label:before{-webkit-box-sizing:content-box;box-sizing:content-box;width:7vw;height:7vw;max-width:40px;max-height:40px;position:absolute;content:"";top:0;left:0;border:none;font:normal 100%/normal Arial,Helvetica,sans-serif;color:#000;-o-text-overflow:clip;text-overflow:clip;background:#61dafb;text-shadow:none}.round-star-label:after{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.Game{position:relative;width:100vw;height:100vh;display:grid;-ms-flex-align:center;align-items:center;justify-items:center;grid-template-areas:". . . ." ". VideoChat VideoChat ." ". gameDisplay gameDisplay ." ". gameDisplay gameDisplay ." ". . . ."}#gameDisplay{grid-area:gameDisplay}.VideoChat{grid-area:VideoChat;width:100%}@media (min-width:768px){.Game{position:relative;width:100vw;height:100vh;display:grid;-ms-flex-align:center;align-items:center;justify-items:center;grid-template-areas:". . . . ." ". VideoChat gameDisplay gameDisplay ." ". VideoChat gameDisplay gameDisplay ." ". . . . ."}}.fadeIn{-webkit-animation:fadeIn 1s ease-in forwards;animation:fadeIn 1s ease-in forwards}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeOut{-webkit-animation:fadeOut 1s ease-in forwards;animation:fadeOut 1s ease-in forwards}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.error{font-size:2vw;color:red}.VideoChat{position:relative;width:100%;height:100%;display:grid;-ms-flex-align:center;align-items:center;justify-items:center;grid-template-areas:"myVideo theirVideo"}#myVideo{background-color:#000}#myCanvas,#myVideo{grid-area:myVideo;width:50vw;height:37.5vw;max-width:320px;max-height:240px}#myCanvas{z-index:5}#theirVideo{grid-area:theirVideo;background-color:#000;width:50vw;height:37.5vw}#theirVideo,video{max-width:320px;max-height:240px}video{width:100%}@media (min-width:768px){.VideoChat{grid-template-areas:"myVideo" "theirVideo"}}
/*# sourceMappingURL=main.6eb0df35.css.map*/