@import url(https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Nunito:wght@700;800;900;1000&display=swap);html{--font-mochi:"Mochiy Pop One",sans-serif;--font-nunito:"Nunito",sans-serif;--default-color:hsla(0,0%,100%,.301);--yellow-color:#f5d001;--red-color:#df391f;--light-blue-color:#a6d8e2;--dark-blue-color:#006eff;--light-btn-back:#e4fdf6;scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#a6d8e2;background-color:var(--light-blue-color);box-sizing:border-box;height:100%;margin:0;overflow:hidden;padding:0}button{border:none;cursor:pointer;outline:none;user-select:none;-webkit-user-select:none}.App{height:100vh;overflow:hidden;position:relative}@media screen and (min-width:900px){.App{flex-direction:row;justify-content:space-evenly}}.main{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center}.board-square{grid-gap:10px;display:grid;gap:10px;grid-template-columns:auto auto auto}.box{border:1px solid hsla(0,0%,96%,.89);border-radius:10%;box-shadow:0 0 2px hsla(0,0%,80%,.644);color:#fff;font-family:var(--font-mochi);font-size:6em;font-weight:900;height:8.5rem;line-height:0;text-align:center;width:8.5rem}.x{background-color:var(--red-color)}.o{background-color:var(--yellow-color)}.default{background-color:var(--default-color)}.box:hover{box-shadow:0 0 15px #888}.board-action{display:flex;flex-direction:row;justify-content:space-evenly}.board-action button{border-radius:10px;box-shadow:0 0 5px rgba(9,20,71,.301);color:#fff;font-family:var(--font-nunito);font-size:1.1rem;margin:20px 0;padding:.5rem;width:8.5rem}.board-action .reset-btn{background-color:var(--dark-blue-color)}.board-action .prev-btn{background-color:#029645}.board-action .reset-btn:hover{background-color:var(--light-btn-back);color:#005fad}.board-action .prev-btn:hover{background-color:var(--light-btn-back);color:#00885b}.modal{background-color:rgba(225,240,255,.89);color:var(--yellow-color);display:none;font-family:var(--font-mochi);font-size:2.5em;height:100vh;left:0;overflow:hidden;position:absolute;text-align:center;top:0;width:100vw;z-index:10}.modal .container{color:#04387c;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.modal button{background-color:hsla(0,0%,100%,.966);border:1px solid #c4c4c4;border-radius:10px;box-shadow:0 0 5px rgba(88,88,88,.178);color:#7a7a7a;font-family:var(--font-nunito);font-size:.4em;font-weight:700;height:30px}.modal button:hover{background-color:#04387c;color:hsla(0,0%,100%,.966)}@media screen and (min-width:900px){.main{flex-direction:row;justify-content:space-evenly}}@media screen and (max-width:900px){.board-action button{margin:40px 0}.box{font-size:4.5em;height:6rem;width:6rem}}@media screen and (max-width:500px){.board-square{gap:6px}.board-action{align-items:center;flex-direction:column;justify-content:space-around;margin-top:30px}.board-action button{font-size:.8rem;margin:15px 0 0;width:7rem}.modal{font-size:2em}}@media screen and (max-width:420px){.box{font-size:3.5em;height:4.5rem;width:4.5rem}}@media screen and (max-width:320px){.box{font-size:2.5em;height:4rem;width:4rem}}.scoreboard{display:flex;gap:30px;text-align:center}.player{background-color:#fff;border-radius:15px;box-shadow:0 0 8px hsla(0,0%,53%,.815);user-select:none;-webkit-user-select:none}.player div{border-radius:15px 25px 25px 15px}.x-score{background-color:var(--red-color)}.o-score{background-color:var(--yellow-color)}.player h3{color:#fff;font-family:var(--font-nunito);font-size:1.1em;margin:0;text-shadow:.5px .5px #b8b8b8}.player-score{font-family:var(--font-mochi);font-size:2.2em;line-height:1;margin:0;text-shadow:1px 1px gray}.player-score._x{color:var(--red-color)}.player-score._o{color:var(--yellow-color)}@media screen and (min-width:900px){.player div{border-radius:15px 15px 0 0}.player h3{font-size:1.45em;padding:20px 30px}.player-score{font-size:3em;padding:20px 30px 30px}}@media screen and (max-width:900px){.player{display:flex}.scoreboard{margin:10% 0 20%}.player h3{font-size:1em;padding:10px}.player-score{font-size:1.6em;padding:10px 18px}}@media screen and (max-width:500px){.scoreboard{margin:0 0 20%}}@media screen and (max-width:430px){.player div{border-radius:10px}.player h3{font-size:.83em;padding:9px 6px 5px}.player-score{font-size:1.3em;padding:8px 10px 10px}}@media screen and (max-width:300px){.player h3{font-size:.79em}.player-score{font-size:1.1em}}
/*# sourceMappingURL=main.6ac238c8.css.map*/