@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@500;700&display=swap);*{box-sizing:border-box;font-family:Outfit,sans-serif;margin:0;padding:0;-webkit-user-select:none;-ms-user-select:none;user-select:none}body{align-items:center;background-color:var(--dark-navy);display:flex;height:100vh;justify-content:center;overflow:hidden;width:100vw}.App{height:470px;width:460px}.App,.new-game-menu{align-items:center;display:flex;flex-direction:column}.game-icons{align-items:center;display:flex;flex-direction:row;height:32px;justify-content:space-between;margin-bottom:40px;width:80px}.icon-x{color:var(--light-blue)}.icon-o{color:var(--light-yellow)}.mark-select{align-items:center;display:flex;flex-direction:column;gap:18px;height:205px;padding:25px 0;width:100%}.mark-select p:first-of-type,.mark-select p:nth-of-type(2){color:#a8bfc9;text-transform:uppercase}.mark-select p:nth-of-type(2){mix-blend-mode:normal;opacity:.5}.mark-buttons-wrapper{align-items:center;background-color:var(--dark-navy);border-radius:10px;display:flex;flex-direction:row;height:72px;justify-content:center;padding:8px;width:412px}.mark-buttons-wrapper button{border:none;border-radius:10px;height:100%;width:50%}.new-game-buttons{margin-top:40px;width:460px}.new-game-buttons button{margin-bottom:20px;width:100%}.game-container{flex-direction:column;height:624px;width:460px}.game-container,.game-header{align-items:center;display:flex;justify-content:space-between}.game-header{flex-direction:row;position:relative;width:100%}.flex-nested{align-items:center;display:flex;flex-direction:row;flex-grow:1;justify-content:center}.svg-wrapper{display:flex;justify-content:space-between;width:70px}.game-header .turn-tracker{align-items:center;border-radius:10px;box-shadow:inset 0 -4px 0 #10212a;color:#a8bfc9;display:flex;flex-direction:row;height:52px;justify-content:space-around;padding:0 22px;position:absolute;right:calc(50% - 70px);width:140px}.game-grid{-ms-grid-rows:1fr 1fr 1fr;-ms-grid-columns:1fr 1fr 1fr;grid-gap:20px;display:-ms-grid;display:grid;gap:20px;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;width:100%}.game-grid svg{height:50%;width:50%}.cursor-pointer{cursor:pointer}.game-grid>div{transition:box-shadow .1s linear,background-color .1s linear}.grid-box{box-shadow:inset 0 -8px 0 #10212a}.grid-box,.grid-box-pressed{align-items:center;background-color:#1f3641;background-position:50%;background-repeat:no-repeat;background-size:50%;border-radius:15px;display:flex;height:140px;justify-content:center;width:140px}.grid-box-pressed{box-shadow:inset 0 -4px 0 #10212a}.bg-light-blue{background-color:#31c3bd;box-shadow:inset 0 -4px 0 #26928f}.bg-light-blue,.bg-light-yellow{align-items:center;border-radius:15px;display:flex;height:140px;justify-content:center;width:140px}.bg-light-yellow{background-color:#f2b137;box-shadow:inset 0 -4px 0 #e09a18}.game-footer{display:flex;flex-direction:row;justify-content:space-between;width:100%}.tracker{align-items:center;border-radius:15px;display:flex;flex-direction:column;height:72px;justify-content:space-around;padding:20px;width:140px}.tracker-x{background-color:var(--light-blue)}.tracker-ties{background-color:var(--silver)}.tracker-o{background-color:var(--light-yellow)}.debug{color:#fff}.modal{align-items:center;background-color:var(--semi-dark-navy);display:flex;flex-direction:column;height:266px;justify-content:space-around;padding:50px;top:calc(50% - 133px);z-index:100}.modal,.modal-overlay{left:0;position:fixed;right:0}.modal-overlay{background-color:rgba(0,0,0,.5);bottom:0;height:120vh;top:0;width:120vw;z-index:99}.board-state-announcement{align-items:center;display:flex;flex-direction:row;gap:25px;justify-content:center}.board-state-announcement p{white-space:nowrap}.modal-buttons-wrapper{align-items:center;display:flex;flex-direction:row;gap:16px;justify-content:center}.modal-buttons-wrapper .button-1{border-radius:10px;box-shadow:inset 0 -4px 0 #cc8b13;font-weight:700;height:52px;width:146px}.modal-buttons-wrapper .button-secondary-2{border-radius:10px;box-shadow:inset 0 -4px 0 #6b8997;font-weight:700;height:52px;width:76px}@media (max-width:500px){.new-game-menu{width:100vw}.mark-select{width:90vw}.mark-buttons-wrapper{width:80vw}.mark-buttons-wrapper button{width:50%}.new-game-buttons{width:90vw}.game-container{gap:20px;justify-content:center;width:90vw}.game-footer{width:100%}.tracker{width:26.66667vw}.game-grid{gap:5vw;width:90vw}.grid-box,.grid-box-pressed{height:26.66667vw;width:26.66667vw}.board-state-announcement p{font-size:24px;white-space:nowrap}.board-state-announcement svg{height:30px;width:30px}}:root{--light-blue:#31c3bd;--light-blue-hover:#65e9e4;--light-yellow:#f2b137;--light-yellow-hover:#ffc860;--dark-navy:#1a2a33;--semi-dark-navy:#1f3641;--silver:#a8bfc9;--silver-hover:#dbe8ed}.bg-xo{background-image:url(/static/media/icon-x-outline.a591bdf22fd3be0addcb.svg)}.bg-oo{background-image:url(/static/media/icon-o-outline.44ebb2196ec7043f1e17.svg)}.bg-x{background-image:url(/static/media/icon-x.042bae7b703d99ffb943.svg)}.bg-o{background-image:url(/static/media/icon-o.f042011abf3476e67a39.svg)}.heading-L{font-size:40px;font-weight:700;letter-spacing:2.5px}path{height:100%;width:100%}.heading-M{font-size:24px;font-weight:700;letter-spacing:1.5px}.heading-S{font-size:20px;font-weight:700;letter-spacing:1.25px}.heading-XS{font-size:16px;font-weight:700;letter-spacing:1px}.body{font-size:14px;font-weight:500;letter-spacing:.8px}.grey-border{box-shadow:inset 0 -8px 0 #10212a}.grey-border,.grey-border-pressed{background-color:#1f3641;border-radius:15px}.grey-border-pressed{box-shadow:inset 0 -4px 0 #10212a}button{align-items:center;display:flex;justify-content:center}button p{margin-bottom:8px}.button-1{align-items:center;background-color:#f2b137;background-color:var(--light-yellow);border:none;border-radius:15px;box-shadow:inset 0 -8px 0 #cc8b13;color:#1a2a33;color:var(--dark-navy);display:inline-flex;height:67px;justify-content:center;width:410px}.button-1:hover{background-color:#ffc860;background-color:var(--light-yellow-hover);cursor:pointer}.button-2{align-items:center;background-color:#31c3bd;background-color:var(--light-blue);border:none;border-radius:15px;box-shadow:inset 0 -8px 0 #118c87;color:#1a2a33;color:var(--dark-navy);display:inline-flex;height:67px;justify-content:center;width:410px}.button-2:hover{background-color:#65e9e4;background-color:var(--light-blue-hover);cursor:pointer}.button-secondary-1{background-color:#f2b137;background-color:var(--light-yellow)}.button-secondary-1:hover{background-color:#ffc860;background-color:var(--light-yellow-hover)}.button-secondary-2{align-items:center;background-color:#a8bfc9;border:none;border-radius:10px;box-shadow:inset 0 -4px 0 #6b8997;color:#1a2a33;color:var(--dark-navy);display:inline-flex;height:52px;justify-content:center;width:226px}.button-secondary-2:hover{background-color:#dbe8ed;background-color:var(--silver-hover);cursor:pointer}.button-secondary-1{align-items:center;background-color:#a8bfc9;background-color:var(--silver);border:none;border-radius:10px;box-shadow:inset 0 -4px 0 #cc8b13;color:#1a2a33;color:var(--dark-navy);display:inline-flex;height:52px;justify-content:center;width:226px}.button-secondary-1:hover{background-color:#dbe8ed;background-color:var(--silver-hover);box-shadow:inset 0 -4px 0 #6b8997;cursor:pointer}.button-square{align-items:center;background-color:#a8bfc9;background-color:var(--silver);border:none;border-radius:10px;box-shadow:inset 0 -4px 0 #6b8997;color:#1a2a33;color:var(--dark-navy);display:inline-flex;height:52px;justify-content:center;width:52px}.button-square:hover{background-color:#dbe8ed;background-color:var(--silver-hover);cursor:pointer}.bg-silver{background-color:#a8bfc9;background-color:var(--silver)}.bg-dark-navy{background-color:#1a2a33;background-color:var(--dark-navy);cursor:pointer}.bg-semi-dark-navy{background-color:#1f3641;background-color:var(--semi-dark-navy)}.bg-dark-navy:hover{background-color:rgba(168,191,201,.05)}.fill-silver{fill:#a8bfc9;fill:var(--silver)}.fill-dark-navy{fill:#1a2a33;fill:var(--dark-navy)}.color-light-yellow{color:#f2b137;color:var(--light-yellow)}.color-light-blue{color:#31c3bd;color:var(--light-blue)}.color-silver{color:#a8bfc9;color:var(--silver)}
/*# sourceMappingURL=main.552a2d86.css.map*/