body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}#root{min-height:calc(100vh - 40px);padding:20px 0;background-color:#e7e7e7;background:#e7e7e7;background:-webkit-gradient(linear,left bottom,left top,color-stop(75%,#e7e7e7),to(#fff));background:linear-gradient(0deg,#e7e7e7 75%,#fff);min-width:340px;position:relative;overflow:hidden}.connect-four{text-align:center;padding-bottom:20px}h1{color:#b6532e;margin:20px 20px 35px}h2{margin-top:0;margin-bottom:0;color:#0066a7}.description{line-height:1.2;font-size:16px;-webkit-transform:perspective(400px) rotateX(22deg);transform:perspective(400px) rotateX(22deg);margin:-20px auto auto;padding:0 15px;color:#3f1e12}.description,.play-app{max-width:400px;position:relative;z-index:1}.play-app{background:url(/react_connect-four/static/media/field-bg.a4e5c23e.png) no-repeat;background-size:100% 100%;background-position:top;min-height:380px;margin:0 auto}.playing-field{flex-wrap:wrap;margin:0 auto;padding-top:21px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform:perspective(700px) rotateX(-7deg);transform:perspective(700px) rotateX(-7deg);padding-left:20px;padding-right:20px}.playing-field,.playing-field__square{display:flex;box-sizing:border-box;justify-content:center;align-items:center}.playing-field__square{width:46px;height:42px;margin:1px;border:1px solid #00334e;border-radius:50%;padding:0;font-size:2rem;font-weight:700;background-color:#e7e7e7;color:transparent;box-shadow:inset 0 -3px 0 1px #002f52;cursor:pointer}.playing-field__square[data-id="28"],.playing-field__square[data-id="29"],.playing-field__square[data-id="30"],.playing-field__square[data-id="31"],.playing-field__square[data-id="32"],.playing-field__square[data-id="33"],.playing-field__square[data-id="34"],.playing-field__square[data-id="35"],.playing-field__square[data-id="36"],.playing-field__square[data-id="37"],.playing-field__square[data-id="38"],.playing-field__square[data-id="39"],.playing-field__square[data-id="40"],.playing-field__square[data-id="41"]{background-color:#c6c6c6;background:#c6c6c6}.play-informstions{display:flex;align-items:flex-start;justify-content:center;padding-top:19px;height:28px;overflow:hidden}.play-informstions div{margin:0 10px}.play-informstions p{padding:0;margin:3px 0 0;-webkit-transform:perspective(600px) rotateX(35deg);transform:perspective(600px) rotateX(35deg)}.play-informstions p,.reset{line-height:1;font-size:10px}.reset{background-color:#0074b3;border-radius:50%;cursor:pointer;color:#fff;font-weight:700;text-transform:capitalize;width:50px;height:30px;display:flex;align-items:flex-start;justify-content:center;box-shadow:inset 0 -3px 2px 1px rgba(0,0,0,.8),0 1px 3px 1px rgba(0,0,0,.77)}.reset,.reset p{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.reset p{margin-top:7px;text-shadow:0 1px 0 #999}.reset:hover{background-color:#02669c;color:#ebebeb;box-shadow:inset 0 -2px 3px 0 rgba(0,0,0,.84)}.reset:hover,.reset:hover p{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.reset:hover p{margin-top:9px}.green.move,.green.winner,.yellow.move,.yellow.winner{border-radius:50%;color:#fff;font-weight:700;text-transform:uppercase;width:50px;height:30px;display:flex;align-items:flex-start;justify-content:center;box-shadow:inset 0 -3px 2px 1px rgba(0,0,0,.77);font-size:10px;text-transform:capitalize;line-height:1;text-shadow:0 1px 0 #5f5f5f}.yellow.winner{-webkit-animation:winner-color-yellow 2s infinite;animation:winner-color-yellow 2s infinite}.green.winner{-webkit-animation:winner-color-green 2s infinite;animation:winner-color-green 2s infinite}.bg-red{position:relative}.bg-red:before{content:"";display:block;width:20px;height:16px;border-radius:50%;border:2px solid rgba(255,0,0,.75);position:absolute;left:51%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#root .bg-yellow{background-color:#cdae00;background:url(/react_connect-four/static/media/bg-yellow-chip.e5f61603.png) no-repeat #cdae00;background-size:95% 95%;background-position:50%}#root .bg-green,#root .bg-yellow{box-shadow:inset 0 1px 2px 0 #002f52,inset 0 -1px 0 0 #002f52}#root .bg-green{background-color:#008d49;background:url(/react_connect-four/static/media/bg-green-chip.b14693ff.png) no-repeat #008d49;background-size:95% 95%;background-position:50%}.yellow{background-color:#cdae00;background:#cdae00}.green{background-color:#008d49;background:#008d49}.table{background-color:#c6c6c6;background:#c6c6c6;background:-webkit-gradient(linear,left bottom,left top,from(#757575),to(#c6c6c6));background:linear-gradient(0deg,#757575,#c6c6c6);position:absolute;z-index:0;top:312px;bottom:0;left:0;right:0}@-webkit-keyframes winner-color-yellow{45%{background-color:#cdae00}50%{background-color:red}55%{background-color:#cdae00}}@keyframes winner-color-yellow{45%{background-color:#cdae00}50%{background-color:red}55%{background-color:#cdae00}}@-webkit-keyframes winner-color-green{45%{background-color:#008d49}50%{background-color:red}55%{background-color:#008d49}}@keyframes winner-color-green{45%{background-color:#008d49}50%{background-color:red}55%{background-color:#008d49}}@media only screen and (max-width:480px){.play-app{max-width:340px;min-height:320px}.playing-field__square{width:39px;height:35px}.play-informstions{padding-top:8px}.description{max-width:320px;margin-top:-20px}.play-informstions p{margin-top:2px}.reset p{margin-top:7px}h1{margin-top:0;margin-bottom:25px}.table{top:254px}.playing-field__square[data-id="28"],.playing-field__square[data-id="29"],.playing-field__square[data-id="30"],.playing-field__square[data-id="31"],.playing-field__square[data-id="32"],.playing-field__square[data-id="33"],.playing-field__square[data-id="34"]{background-color:#c6c6c6;background:#c6c6c6}}
/*# sourceMappingURL=main.71015521.chunk.css.map */