body{font-family:Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{font-size:10px}body{background-color:#1a2b33;color:#a9bec9;font-size:1.6rem;font-style:normal;font-weight:200}#root{justify-content:center}#root,.board{align-items:center;display:flex;flex-direction:column}.board{flex-wrap:wrap;gap:15px;justify-content:space-between}.size3{height:330px;width:330px}.size4{height:360px;width:360px}.size5{height:400px;width:400px}@media(max-width:1024px){.board{gap:6px}.size3,.size4,.size5{height:300px;width:300px}}.square{cursor:pointer}.dark{border-radius:10px}.square{align-items:center;border:none;display:flex;flex-direction:row;font-family:Indie Flower,cursive;font-size:9rem;font-style:normal;font-weight:900;height:100px;justify-content:center;width:100px}.size4 .square{font-size:7rem;height:78px;width:78px}.size5 .square{font-size:6rem;height:68px;width:68px}@media(max-width:1024px){.square{height:90px;width:90px}.size4 .square{font-size:7rem;height:70px;width:70px}.size5 .square{font-size:6rem;height:55px;width:55px}}.button{border-radius:10px}.header{justify-content:space-between;width:330px}.header,.header-turn{align-items:center;display:flex;flex-direction:row}.header-turn{color:#a9bec9;column-gap:6px;height:42px;justify-content:center;padding:2px 12px;width:130px}.return-icon{rotate:45deg;transform:scaleX(-1)}@media(max-width:1024px){.header{width:300px}}.symbol-font{font-family:Indie Flower,cursive}.logo{align-items:center;column-gap:4px;display:flex;flex-direction:row;height:42px;justify-content:center}.symbol-font{font-size:4rem;font-style:normal;font-weight:900}.score-item{border-radius:10px}.score{flex-direction:row;justify-content:space-between;width:330px}.score,.score-item{align-items:center;display:flex}.score-item{flex-direction:column;height:50px;justify-content:center;width:100px}.score-item,.score-number{color:#1a2b33}.player-x{background-color:#31c4be}.play-times{background-color:#a9bec9}.player-o{background-color:#f0b336}@media(max-width:1024px){.score{width:300px}.score-item{height:50px;width:90px}}.confetti-container{height:100%;width:100%;z-index:100}.confetti{animation:confetti 5s ease-in-out -2s infinite;background-color:#f2d74e;height:15px;left:50%;position:absolute;transform-origin:left top;width:15px}.confetti:first-child{animation-delay:0;background-color:#f2d74e;left:10%}.confetti:nth-child(2){animation-delay:-5s;background-color:#95c3de;left:20%}.confetti:nth-child(3){animation-delay:-3s;background-color:#ff9a91;left:30%}.confetti:nth-child(4){animation-delay:-2.5s;background-color:#f2d74e;left:40%}.confetti:nth-child(5){animation-delay:-4s;background-color:#95c3de;left:50%}.confetti:nth-child(6){animation-delay:-6s;background-color:#ff9a91;left:60%}.confetti:nth-child(7){animation-delay:-1.5s;background-color:#f2d74e;left:70%}.confetti:nth-child(8){animation-delay:-2s;background-color:#95c3de;left:80%}.confetti:nth-child(9){animation-delay:-3.5s;background-color:#ff9a91;left:90%}.confetti:nth-child(10){animation-delay:-2.5s;background-color:#f2d74e;left:100%}@keyframes confetti{0%{transform:rotate(15deg) rotateY(0deg) translate(0)}25%{transform:rotate(5deg) rotateY(1turn) translate(-5vw,20vh)}50%{transform:rotate(15deg) rotateY(2turn) translate(5vw,60vh)}75%{transform:rotate(5deg) rotateY(3turn) translate(-10vw,80vh)}to{transform:rotate(15deg) rotateY(4turn) translate(10vw,110vh)}}.buttons-wrapper,.popup-content,.popup__bg,.rectangular-button{width:100%}@keyframes showBackdrop{0%{opacity:0}to{opacity:1}}@keyframes showModal{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}.popup__bg{align-items:center;animation:showBackdrop .3s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0003;bottom:0;display:flex;flex-direction:column;height:100%;justify-content:flex-start;position:absolute;right:0;top:0;z-index:70}.popup,.popup__bg{transition:all .3s}.popup{animation:showModal .3s ease-out;margin:200px auto;width:300px}.popup-content{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:20px;row-gap:20px;text-align:center}.buttons-wrapper{align-items:center;column-gap:6px;display:flex;flex-direction:row;justify-content:space-between}.close{background-color:#a9bec9}.reset{background-color:#f0b336}.rectangular-button{width:100%}.rectangular-button,.title{font-family:Roboto,sans-serif}.player-symbol{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:20px 10px;row-gap:20px;width:330px}.player-symbol h4{color:#a9bec9}.start-header{flex-direction:row;justify-content:space-between}.start-header,.start-page-buttons{align-items:center;display:flex;width:330px}.start-page-buttons{flex-direction:column;justify-content:center;row-gap:10px}.start-page-buttons .button-vs-cpu{background-color:#f0b336}.start-page-buttons .button-vs-human{background-color:#31c4be}@media(max-width:1024px){.player-symbol,.start-header,.start-page-buttons{width:300px}}.swith-button{cursor:pointer}.swith-button,.swith-button:before{border-radius:10px}.swith-item{font-family:Indie Flower,cursive}.title{font-family:Roboto,sans-serif}.X{color:#31c4be}.O{color:#f0b336}.title{font-size:1.6rem;font-style:normal;font-weight:600}.swith-button{align-items:center;background-color:#1a2b33;display:flex;flex-direction:row;height:50px;justify-content:center;overflow:hidden;position:relative}.swith-button:before{background-color:#a9bec9;content:"";height:100%;left:-50%;position:absolute;transition:.25s;width:100%}.swith-button.switch-active:before{left:50%}.swith-button.switch-active .swith-item:first-child{color:#a9bec9}.swith-button.switch-active .swith-item:last-child{color:#1a2b33}.swith-item{align-items:center;color:#a9bec9;display:flex;flex-direction:row;font-size:4.5rem;font-style:normal;font-weight:900;height:100%;justify-content:center;position:relative;transition:.6s;width:140px}.swith-item:first-child{color:#1a2b33}.wrapper{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-width:100vw;overflow:hidden;position:relative;row-gap:20px}.dark{background-color:#1e3640}@media(max-width:640px){.wrapper{row-gap:10px}}.dark{box-shadow:0 13px 27px -5px #32325d40,0 8px 16px -8px #000}.button{box-shadow:inset 0 -6px 0 #0003;cursor:pointer}.button,.dark{border-radius:10px}.difficulty-level-list,.difficulty-level-wrapper,.rectangular-button,.save-score-wrapper{width:100%}.rectangular-button{font-family:Roboto,sans-serif}.button{align-items:center;border:none;display:flex;flex-direction:row;justify-content:center;padding:12px 10px;transition:all .2s}.rectangular-button{color:#1a2b33;font-size:1.6rem;font-style:normal;font-weight:600;height:50px}.square-button{height:42px;width:42px}.gray-button{background-color:#a9bec9}.start-content{padding:20px;row-gap:20px;width:330px}.difficulty-level-wrapper,.save-score-wrapper,.start-content{align-items:center;display:flex;flex-direction:column;justify-content:center}.difficulty-level-wrapper,.save-score-wrapper{row-gap:6px}.difficulty-level-list{align-items:center;column-gap:6px;display:flex;flex-direction:row;justify-content:space-between;list-style-type:none;row-gap:6px}.difficulty-level-list li{background-color:#a9bec9}.difficulty-level-list li:hover,li.active{background-color:#f0b336}@media(max-width:1024px){.start-content{width:300px}}
/*# sourceMappingURL=main.b4c6c868.css.map*/