@import url(https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap);
:root{--large-font-size: 2.7rem;--heading-font-size: 2.2rem;--medium-font-size: 2rem;--default-font-size: 1.6rem;--small-font-size: 1.3rem;--tiny-font-size: 1rem}@media (max-width: 1200px){:root{--large-font-size: 2.4rem;--heading-font-size: 1.9rem;--medium-font-size: 1.65rem;--default-font-size: 1.3rem;--small-font-size: 1rem;--tiny-font-size: 0.8rem}}@media (max-width: 600px){:root{--large-font-size: 2.2rem;--heading-font-size: 1.7rem;--medium-font-size: 1.45rem;--default-font-size: 1.1rem}}@media (max-width: 360px){:root{--large-font-size: 2.1rem;--heading-font-size: 1.6rem;--medium-font-size: 1.35rem;--default-font-size: .95rem;--small-font-size: 0.85rem}}*,*::after,*::before{padding:0;margin:0;box-sizing:border-box}body a,body input{color:inherit}body button{border:unset;font:inherit;color:inherit}body *:focus{outline:none}.heading{font-size:var(--heading-font-size);text-transform:uppercase;text-shadow:2px 2px 0px #444}.btn{background-color:#0a7753;padding:0.5rem 2rem;margin:0 0.5rem;border-radius:1rem;box-shadow:-2px 3px 2px #999;cursor:pointer;transition:transform 0.2s linear, border-radius 0.2s linear;user-select:none}.btn:hover,.btn:focus{transform:scale(1.05);border-radius:1.5rem 1rem}.btn:focus-visible{outline:2px solid #ccc}.none{display:none !important}.hide{visibility:hidden}.box{border-radius:0.5rem;color:#aaa;border:none;border-left:3px solid #cccccc50;border-right:3px solid rgba(204,204,204,0.313725);box-shadow:0px 3px 10px #cccccc10, 0px -2px 10px #cccccc10}body{background:url(assets/bg-ca12c4caa8f4fdcdcb43.svg);background-repeat:no-repeat;background-size:cover;min-width:100vw;min-height:100vh;font-family:"Balsamiq Sans",cursive;font-size:var(--default-font-size);color:#ccc;display:flex;flex-direction:row;justify-content:center;align-items:center;overflow-x:hidden}main{width:Min(90%, 1150px);min-height:80vh;background:#00101c;opacity:0.95;border-radius:2rem;box-shadow:2px 3px 5px #cccccc20;display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:relative;user-select:none}main #game-title,main #btn-wrapper{margin:4rem 0}main #game-type-wrapper,main #game-display-wrapper{width:100%;flex-grow:1}main #game-type-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap}main #game-display-wrapper{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.level-settings-wrapper{width:100%;position:absolute;top:0%;left:-0%;margin:4rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.level-settings-btn,.level-options{flex-grow:1}.level-settings-btn{transform:rotate(0deg);transition:transform 0.3s linear;border-radius:20%;width:clamp(30px, 3vw, 35px);-webkit-user-drag:none;cursor:pointer}.level-settings-btn:hover,.level-settings-btn:focus{transform:rotate(180deg)}.level-settings-btn:focus-visible{padding:0.3rem;outline:2px solid #cccccc80}.level-options{background-color:#081824;margin-top:1.5rem;text-transform:initial;font-size:var(--tiny-font-size);list-style:none}.level-option{padding:0.5rem 0.8rem;cursor:pointer}.level-option:not(:last-child){border-bottom:1px solid #cccccc50}.level-option:hover,.level-option:focus{background-color:#cccccc10}.level-option:focus-visible{border-radius:0.5rem;outline:2px solid #cccccc80}.current-level{color:#0a7}.repo-link{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;top:0%;right:0%;margin:clamp(1rem, 2vw, 2rem);font-size:clamp(2rem, 2vw, 2.5rem);border-radius:50%;transition:transform 0.3s linear}.repo-link:hover,.repo-link:focus{transform:scale(1.1)}.repo-link:focus-visible{outline:3px dashed #0a7753}@media (max-width: 850px){main #game-title,main #btn-wrapper{margin:3rem 0}main .level-settings-wrapper{margin:3rem}main #btn-wrapper{margin-top:1rem}main .message{margin:1.5rem 1rem}}@media (max-width: 600px){main{min-height:unset}main .level-settings-wrapper{margin:3rem 2rem}main .message{margin:1rem}}@media (max-width: 500px){main{width:100%;margin:0 0.3rem}main .level-settings-wrapper{margin:3rem 1.5rem}main #game-display-wrapper{flex-direction:column;justify-content:center}main .btn{padding:0.5rem 1.75rem}}@media (max-width: 360px){main .level-settings-wrapper{margin:3rem 1rem}main .btn{padding:0.4rem 1.5rem}}#game-type-wrapper .game-type{width:Max(33.3%, 250px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:3rem 0;margin:0 2rem;border-radius:2rem;background-color:#cccccc20;border:4px solid transparent;text-align:center;font-size:var(--medium-font-size);word-spacing:100vw;line-height:4rem;position:relative;overflow:hidden;cursor:pointer}#game-type-wrapper .game-type:hover,#game-type-wrapper .game-type:focus-visible{box-shadow:3px 5px 0px #cccccc60}#game-type-wrapper .game-type span::first-letter{font-size:var(--large-font-size)}#game-type-wrapper .game-type::before,#game-type-wrapper .game-type::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;border-radius:0 35%;background-color:#cccccc30}#game-type-wrapper .game-type::before{transform:translate(-80%, 70%)}#game-type-wrapper .game-type::after{transform:translate(80%, -70%)}#game-type-wrapper .add-border{border-color:#0a7753}.bubble-up-animation::before{animation:bubble-left 0.75s 1 linear}.bubble-up-animation::after{animation:bubble-right 0.75s 1 linear}@keyframes bubble-left{50%{transform:translate(-65%, 55%)}100%{transform:translate(-80%, 70%)}}@keyframes bubble-right{50%{transform:translate(65%, -55%)}100%{transform:translate(80%, -70%)}}@media (max-width: 1200px){#game-type-wrapper .game-type{padding:2.5rem 0}}@media (max-width: 750px){#game-type-wrapper .game-type{margin:1.5rem 2rem;padding:2rem 0;line-height:3.5rem}}@media (max-width: 600px){#game-type-wrapper .game-type{margin:1.5rem;padding:1.5rem 0;line-height:3rem}}@media (max-width: 600px){#game-type-wrapper .game-type{margin:1rem 1.5rem}}#game-board{display:grid;grid-template-rows:repeat(3, 1fr);grid-template-columns:repeat(3, 1fr);grid-gap:1rem}#game-board .grid-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:Max(5.4vw, 90px);height:Max(4.4vw, 75px);padding:1rem 2.2rem;background-color:#cccccc30;font-size:var(--large-font-size);font-weight:bolder;border-radius:0.3rem;box-shadow:inset 3px 5px 10px #0a775350;cursor:pointer}#game-board .grid-item:focus-visible{outline:3px solid #cccccc80}#game-board .available-board-item:hover,#game-board .available-board-item:focus{background-color:#cccccc50}#game-board .marked-item{box-shadow:1px 2px 3px #cccccc80}#game-board .win-index-animation{animation:shadow-rotate 1s infinite ease-out}#game-board .draw-animation{animation:blink-item 1s infinite ease-out}#game-display-wrapper .player-card,#game-display-wrapper #game-board{margin:1rem}#game-display-wrapper .player-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:20%}#game-display-wrapper .player-info{display:flex;flex-direction:row;justify-content:center;align-items:center;width:Max(100%, 180px);position:relative;padding:1rem 1.5rem;text-transform:uppercase}#game-display-wrapper .player-info span{margin:0 0.5rem}#game-display-wrapper .player-name{font-size:var(--small-font-size)}#game-display-wrapper .player-mark{-webkit-text-stroke:1px #00aa7780;font-weight:bolder}#game-display-wrapper .player-score{font-weight:bolder;margin-top:1.5rem;padding:0.5rem 1rem}.turn-indicator::before{content:"";position:absolute;top:50%;left:5%;transform:translateY(-50%);width:8px;height:8px;border-radius:0.2rem;background-color:#0a7;border-left:2px solid #fff}.scale-in-animation{animation:scale-in 0.75s 1 linear}.scale-out-animation{animation:scale-out 0.75s 1s 1 linear}@keyframes scale-in{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes scale-out{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(0)}}@keyframes shadow-rotate{0%{box-shadow:inset -3px 4px 8px #00aa7780, inset 2px -2px 6px #ffffff80}25%{box-shadow:inset -7px -6px 15px #00aa7780, inset 6px 5px 10px #ffffff80}50%{box-shadow:inset -7px -6px 12px #ffffff80, inset 6px 5px 10px #00aa7780}75%{box-shadow:inset -3px 4px 8px #ffffff80, inset 2px -2px 6px #00aa7780}100%{box-shadow:inset -3px 4px 8px #00aa7780, inset 2px -2px 6px #ffffff80}}@keyframes blink-item{to{background-color:#cccccc35}}@media (max-width: 910px){#game-display-wrapper #game-board{order:2}#game-display-wrapper .player-card,#game-display-wrapper #game-board{margin:1.5rem 2rem}}@media (max-width: 600px){#game-display-wrapper .player-info{padding:0.7rem 1rem}#game-display-wrapper .player-score{padding:0.3rem 0.8rem}}@media (max-width: 500px){#game-display-wrapper #game-board{order:unset}#game-display-wrapper .player-card{flex-direction:row;width:unset}#game-display-wrapper #game-board,#game-display-wrapper .player-card{margin:2rem 1rem}#game-display-wrapper .player-score,#game-display-wrapper .player-info{margin:0 1rem}#game-display-wrapper .turn-indicator::before{width:6px;height:6px}}@media (max-width: 360px){#game-board{grid-gap:0.6rem}#game-board .grid-item{width:Max(5.4vw, 80px);height:Max(4.4vw, 65px)}}