@import url(https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap);*{box-sizing:border-box;font-family:Mochiy Pop One,sans-serif;margin:0;padding:0}body{background-color:#fff}.app-container{grid-gap:1rem;align-items:center;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:992px;min-height:100vh;padding:2rem 1rem;width:100%}.text-box{margin:auto}.title{color:#1c2630;font-size:3rem;font-weight:700;line-height:1.5}.title span{color:#9149f9;display:block}.start-btn{background-color:initial;border:2px solid #9149f9;border-radius:2rem;cursor:pointer;font-size:.8rem;margin-top:2rem;outline:none;padding:1.25rem 2.25rem;transition:all .25s}.start-btn:hover{background-color:#9149f9;color:#fff}.start-btn:active{-webkit-transform:scale(.9);transform:scale(.9)}.board-area{margin:0 auto;width:320px}.players{display:grid;grid-template-columns:repeat(2,1fr);width:100%}.player{border-bottom:4px solid #e3e3e3;color:#e3e3e3;font-size:1rem;margin-bottom:2rem;padding-bottom:.75rem}.player span{font-size:1.25rem;margin-left:.5rem}.player.first.active{border-color:#3ac7a5;color:#3ac7a5}.player.second.active{border-color:#2b85eb;color:#2b85eb}.board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);height:320px;margin:0 auto;position:relative;width:320px}.board,.square{background-color:initial}.square{align-items:center;border:none;cursor:pointer;display:flex;font-size:48px;font-weight:700;justify-content:center;transition:all .3s ease-in-out;z-index:1}.square:first-child,.square:nth-child(2){border-bottom:2px solid #e3e3e3;border-right:2px solid #e3e3e3}.square:nth-child(3){border-bottom:2px solid #e3e3e3}.square:nth-child(4),.square:nth-child(5){border-right:2px solid #e3e3e3}.square:nth-child(7),.square:nth-child(8){border-right:2px solid #e3e3e3;border-top:2px solid #e3e3e3}.square:nth-child(9){border-top:2px solid #e3e3e3}.square.win.X{background-color:#a0eedc83}.square.win.O{background-color:#82b6f283}.square:hover{background-color:#f9f9f9}.square:focus{outline:none}.winner.X,.x{color:#3ac7a5}.o,.winner.O{color:#2b85eb}.status{color:#000;font-size:1.75rem;font-weight:700;margin-top:2.5rem;position:relative;text-align:center}@media screen and (max-width:768px){.app-container{grid-template-columns:repeat(1,1fr);min-height:auto}.text-box{margin:2rem auto;text-align:center}.title{font-size:1.5rem}.start-btn{font-size:.6rem;padding:.75rem 1.5rem}}
/*# sourceMappingURL=main.18493907.css.map*/