@import url(https://fonts.googleapis.com/css?family=Montserrat:700);*{box-sizing:border-box;margin:0;padding:0}body{background:url(/tictactoe/static/media/background.d98da1e0028225d25e20.jpg);min-height:100vh;overflow-x:hidden}body,button{font-family:Century Gothic,Futura,sans-serif}button{font-size:4vw}.page{align-items:center;display:flex;flex-direction:column;gap:1em;height:100vh;overflow:hidden;position:relative}.restart-btn{background:#b67658;border:none;border-radius:5px;color:#fff;cursor:pointer;left:10px;padding:1em;top:10px}.restart-btn:hover{background:#d49375}.dark-shadow{background:rgba(0,0,0,.884);bottom:0;left:0;right:0;top:0}.dark-shadow,.menu{position:absolute;z-index:1}.menu{align-items:center;background:#c1d8da;border-radius:20px;display:flex;flex-direction:column;justify-content:center;left:50%;padding:2em;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:80%}.menu button{background:#437275;border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:6vw;font-weight:600;margin-bottom:1em;padding:.5em;width:100%}.menu button:hover{background:#315c5f}.menu .instructions{color:#02181b;font-size:4vw;font-weight:500}.menu .instructions span{color:#58989e}.choose-player{align-items:center;background:#c1d8da;border-radius:20px;color:#fff;display:none;gap:1em;grid-template-columns:1fr;grid-template-rows:auto 1fr;justify-content:space-around;left:50%;padding:2em;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.choose-player h2{color:#032325;font-size:6vw;font-weight:500}.choose-first-player{align-items:center;display:flex;gap:2vw;height:100%;justify-content:center}.hidden{opacity:0;transition:visibility 0s .5s,opacity .5s linear;visibility:hidden}.choose-first-player button{align-items:center;background:#437275;border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-family:Century Gothic,Futura,sans-serif;font-size:10vw;height:30vw;justify-content:center;width:30vw}.choose-first-player button:hover{background:#315c5f}.first-player{align-items:center;color:#fff;display:flex;font-size:1rem;font-weight:500;justify-content:space-around;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;z-index:1}.first-player h2{font-size:10vw}.scores{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);background:linear-gradient(to bottom right,hsla(0,0%,100%,.7),hsla(0,0%,100%,.5));border-radius:0 0 20px 20px;box-shadow:5px 5px 20px rgba(2,37,39,.63);color:#aa5b36;font-size:5vw;font-weight:500;padding:1em 2em;text-align:center}.scores .round{font-size:4vw;text-align:center}.scores .round,.scores span{color:#3a2b25;font-weight:600}.scores span{font-size:5vw}.game{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);background:linear-gradient(to bottom right,hsla(0,0%,100%,.7),hsla(0,0%,100%,.5));border-radius:20px;box-shadow:5px 5px 20px rgba(2,37,39,.63);box-sizing:border-box;display:flex;flex:1 1;flex-direction:column;font-size:4vw;margin-bottom:2em;overflow:auto;padding:1em 2em;width:90vw}.game-board{align-items:center;display:flex;height:-webkit-min-content;height:min-content;justify-content:center;margin:2em 0}.game-finished{background:linear-gradient(to bottom right,#011718,rgba(3,43,44,.8));color:#fff}.game-finished .status,.game-finished button{color:#fff}ol,ul{text-align:center}.board-row:after{clear:both;content:"";display:table}.game-info{grid-gap:1em;display:grid;gap:1em;grid-template-rows:auto auto 1fr}.status,.status-div{display:flex;flex-direction:column}.status,.title{color:#27201d;font-size:4vw;font-weight:600;margin-bottom:.5em}.game-finished .title{color:#fff}.status span{color:#5e4c45;font-size:5vw;font-weight:600}.winner{color:#aa5b36;display:block;font-size:7vw;font-weight:600}.nextround-btn{background:#ac7258;border:none;border-radius:40px;cursor:pointer;margin-bottom:2em;padding:1em;width:100%}.nextround-btn:hover{background:#ca9982}.game-history{align-items:center;display:flex;justify-content:space-between}.sort-btn{background:#ac7258;border:none;border-radius:5px;color:#fff;cursor:pointer;padding:.5em 1em}.sort-btn span{font-size:3vw}.sort-btn:hover{background:#ca9982}.history-list{height:100%;overflow:auto}.list-btn{background:rgba(57,101,105,.6);border:none;border-radius:30px;color:#fff;cursor:pointer;font-family:Century Gothic,Futura,sans-serif;font-weight:500;margin-bottom:.5em;padding:.5em 1em}.game-finished .list-btn{background:rgba(91,161,167,.6)}.list-btn:hover{background:rgba(56,110,114,.8)}.selected-list-btn{font-weight:600}.selected-list-btn,.selected-list-btn:hover{background:rgba(97,176,180,.85)}::-webkit-scrollbar{width:2vw}::-webkit-scrollbar-track{background:#f1f1f1bb}::-webkit-scrollbar-thumb{background:#051618}::-webkit-scrollbar-thumb:hover{background:#115357}@media screen and (min-width:320px){button{font-size:3vw}.menu .instructions,.scores,.scores .round{font-size:3.5vw}.scores span{font-size:5vw}.restart-btn{position:absolute}.game{font-size:1rem}.status,.title{font-size:3.5vw}.status span{font-size:4.5vw}.winner{font-size:5.5vw}.sort-btn span{font-size:2.5vw}::-webkit-scrollbar{width:3px}}@media screen and (min-width:481px){button{font-size:.9rem}.menu button{font-size:5vw}.menu .instructions{font-size:2.5vw}.choose-player h2{font-size:4vw}.choose-first-player button{font-size:10vw;height:25vw;width:25vw}.first-player{padding:0 1em}.first-player h2{font-size:7vw}.scores{font-size:1rem}.scores .round{font-size:1.2rem}.scores span{font-size:2rem}.status,.title{font-size:2.5vw}.status span{font-size:3vw}.winner{font-size:4vw}.sort-btn{padding:1em}.sort-btn span{font-size:.7rem}.list-btn{padding:1em 2em}}@media screen and (min-width:769px){.page{justify-content:center}.scores{margin-bottom:auto}.menu{width:60%}.menu button{font-size:4vw}.menu .instructions{font-size:2vw}.choose-player{padding:5em}.choose-player h2{font-size:3vw}.choose-first-player button{font-size:7vw;height:15vw;width:15vw}.game{align-items:center;flex:unset;flex-direction:row;gap:2em;justify-content:space-evenly;margin:0 0 auto;overflow:hidden;padding:4em;width:-webkit-max-content;width:max-content}.game-board{margin:0;overflow:hidden}.game-info{gap:2em;height:50vw;overflow:hidden}.status,.title{font-size:1rem}.status span{font-size:1.2rem}.winner{font-size:1.7rem}.game-history{align-items:unset;flex-direction:column}.sort-btn{align-self:flex-end}.history-list{padding-right:5px}ol,ul{text-align:left}}@media screen and (min-width:1025px){.menu{width:50%}.menu button{font-size:3vw}.menu .instructions{font-size:1.5vw}.choose-player h2{font-size:2vw}.choose-first-player button{font-size:5vw;height:10vw;width:10vw}.first-player h2{font-size:5vw}.game{gap:3em;padding:5em;width:-webkit-max-content;width:max-content}}@media screen and (min-width:1201px){.menu{width:40%}.menu button{font-size:2vw}.menu .instructions{font-size:1.2vw}.choose-player h2{font-size:1.7vw}.choose-first-player button{font-size:3vw;height:9vw;width:9vw}.first-player h2{font-size:3vw}.game-info{height:35em}}@media screen and (min-width:1201px) and (max-height:800px){.game{align-items:unset;margin-bottom:2em;padding:2em 5em}.game,.game-info{height:100%}.status,.title{font-size:3vh}button{font-size:2vh}.sort-btn span{font-size:1.5vh}}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}.countdown-container{-webkit-animation:background_color 3s cubic-bezier(.9,0,.1,1) .875s forwards;animation:background_color 3s cubic-bezier(.9,0,.1,1) .875s forwards;background-color:#e2b29b;font-family:Montserrat,sans-serif;height:30vh;width:80vw}@-webkit-keyframes background_color{33.3333333333%{background-color:#ca8d71}66.6666666667%{background-color:#5daeb4}to{background:#0093a0}}@keyframes background_color{33.3333333333%{background-color:#ca8d71}66.6666666667%{background-color:#5daeb4}to{background:#0093a0}}.countdown{align-items:center;border-radius:50%;box-shadow:0 0 0 1.875vmin,inset 3.75vmin 3.75vmin 7.5vmin rgba(0,0,0,.125),3.75vmin 3.75vmin 7.5vmin rgba(0,0,0,.125);color:#fff;display:flex;font-size:37.5vmin;font-weight:700;height:40vw;justify-content:center;left:50%;overflow:hidden;position:absolute;text-shadow:3.75vmin 3.75vmin 7.5vmin rgba(0,0,0,.125);top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40vw}@media (min-width:600px){.countdown{box-shadow:0 0 0 1.25vmin,inset 2.5vmin 2.5vmin 5vmin rgba(0,0,0,.125),2.5vmin 2.5vmin 5vmin rgba(0,0,0,.125);font-size:25vmin;height:1em;text-shadow:2.5vmin 2.5vmin 5vmin rgba(0,0,0,.125);width:1em}}@media screen and (min-width:769px){.countdown-container{height:50vh;width:60vw}}@media screen and (min-width:1025px){.countdown-container{width:40vw}}@media screen and (min-width:1201px){.countdown-container{width:30vw}}.countdown:before{-webkit-animation:timer_countdown 3s 1s forwards,timer_beat 1s .875s 3;animation:timer_countdown 3s 1s forwards,timer_beat 1s .875s 3;content:"3"}@-webkit-keyframes timer_beat{40%,80%{-webkit-transform:none;transform:none}50%{-webkit-transform:scale(1.125);transform:scale(1.125)}}@keyframes timer_beat{40%,80%{-webkit-transform:none;transform:none}50%{-webkit-transform:scale(1.125);transform:scale(1.125)}}@-webkit-keyframes timer_countdown{0%{content:"3"}33.3333333333%{content:"2"}66.6666666667%{content:"1"}to{content:"0"}}@keyframes timer_countdown{0%{content:"3"}33.3333333333%{content:"2"}66.6666666667%{content:"1"}to{content:"0"}}.countdown:after{-webkit-animation:timer_indicator 3s linear 1s forwards;animation:timer_indicator 3s linear 1s forwards;background-color:rgba(0,0,0,.125);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-100}@-webkit-keyframes timer_indicator{to{-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes timer_indicator{to{-webkit-transform:translateY(100%);transform:translateY(100%)}}.square{background:transparent;border:2px solid #a88b7e;color:#2b2320;float:left;font-size:10vw;font-weight:500;height:20vw;line-height:34px;margin-right:-1px;margin-top:-1px;max-height:200px;max-width:200px;padding:0;text-align:center;width:20vw}.square:hover{background:#67a9ac3d;cursor:pointer}.square:focus{outline:none}.winner-square,.winner-square:hover{background:#528488}.kbd-navigation .square:focus{background:#ddd}@media screen and (min-width:769px){.square{font-size:7vw;height:15vw;width:15vw}}@media screen and (min-width:1201px){.square{font-size:5rem}}@media screen and (min-width:1201px) and (max-height:800px){.square{font-size:5vh;height:15vh;width:15vh}}
/*# sourceMappingURL=main.e9c5b827.css.map*/