body,main{display:grid;place-items:center}body,header,main{place-items:center}@font-face{font-family:Outfit;src:url("./fonts/outfit.ttf")}:root{--primary:#000000;--secondary:#343e43;--light-green:#01ff237a;--dark-gray:#474d4c;--light-red:#ff0000;--blue:#2900ff}*{margin:0;padding:0}[role=button],a,input,select,textarea{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.disabled{display:none!important}html{height:100%}body{font-family:Outfit,sans-serif;text-transform:uppercase;height:100vh;letter-spacing:.08em;background:var(--primary);color:var(--primary)}[data-field-turn=''] .result-conveyer__get-winner-sign,header{display:none}header{position:fixed;width:100%;height:4rem;top:0;background:#fff}main{padding:10px;border-radius:10px;width:100%}.main__upper-section{position:fixed;top:.5em;width:100%;height:max-content;padding:10px;display:flex;justify-content:space-around;gap:1em;align-items:center}.main__restart-btn{width:50px;height:50px;background:url(./assets/icon-restart.svg),var(--light-green);background-repeat:no-repeat;background-position:center,center;background-size:50%,100%;border-radius:10px;box-shadow:0 -5px 0 rgba(0,0,0,.3);color:#f7f7f7}.main__handlePlayer-turn-display{display:flex;justify-content:center;align-items:center;gap:10px;font-size:1.2rem;padding:10px 25px;box-shadow:0 10px 10px rgba(0,0,0,.3);border-radius:10%;color:var(--light-green)}[data-field-turn=turn-x] .main__get-turn-sign{background-image:url(./assets/icon-x-gray.svg)}[data-field-turn=turn-o] .main__get-turn-sign{background-image:url(./assets/icon-o-gray.svg)}.main__get-turn-sign,.result-conveyer__get-winner-sign{width:20px;height:20px;background-size:100%;background-repeat:no-repeat;background-position:center}.main__seperator,span{width:100%;height:1px;background:rgba(0,0,0,.5)}.main__game-board{width:310px;min-height:310px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);overflow:hidden;gap:20px;padding:20px 5px}.game-board__field{color:var(--woody-brown);border-radius:5px;font-weight:700;display:grid;place-items:center;font-size:3.5rem;outline:2px solid var(--opac-black);outline:rgba(255,255,255,.2) solid 2px;transition:.5s;box-shadow:0 10px 10px rgba(0,0,0,.5)}.game-initializer__handlePlayer-picker,.main__summary{border-radius:10px;display:grid;place-items:center}.game-board__state{width:100%;height:100%;background-size:60%;background-repeat:no-repeat;background-position:center;transition:.5s}.main__summary-section{display:grid;gap:15px;grid-template-columns:1fr 1fr 1fr;margin-top:50px;width:90%}.main__summary{padding:10px 20px}.main__summary:first-child{background:var(--dark-gray)}.main__summary:nth-child(2){background:var(--light-green)}.main__summary:nth-child(3){background:var(--light-red)}.main__display-name{font-size:.65rem}.game-board__field [data-field-turn]{transition:.5s}.game-board__field [data-field-turn=turn-x]:hover{background-image:url(./assets/icon-x-outline.svg)}.game-board__field [data-field-turn=turn-o]:hover{background-image:url(./assets/icon-o-outline.svg)}[data-field-state=set-x]{background-image:url(./assets/icon-x.svg)!important}[data-field-state=set-o]{background-image:url(./assets/icon-o.svg)!important}.game-board--field-won-x{background:var(--light-red)}.game-board--field-won-o{background:var(--blue)}.game-board--field-won-x>[data-field-state=set-x]{background-image:url(./assets/icon-x-transparent.svg)!important}.game-board--field-won-o>[data-field-state=set-o]{background-image:url(./assets/icon-o-transparent.svg)!important}.game-initializer{height:100vh;width:100vw;display:grid;align-content:center;justify-items:center;gap:50px}.game-initializer__handlePlayer-picker{height:250px;width:90%;box-shadow:0 10px 10px rgba(0,0,0,.5);grid-template-rows:75px 1fr 75px;color:var(--light-green);font-size:1rem}.game-initializer__notice{color:rgba(255,255,255,.4)}.game-initializer__sign-selector{display:grid;width:80%;height:80%;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;background:#393939;position:relative;padding:10px}.game-initializer--hide-label{border:0;clip-path:rect(1px 1px 1px 1px);clip-path:rect(1px,1px,1px,1px);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[class*=game-initializer__select]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;transition-duration:.3s;cursor:pointer;position:absolute;width:50%;height:100%}[class*=game-initializer__select]:first-of-type{left:0}[class*=game-initializer__select]:last-of-type{right:0}.game-initializer__sign--x{background:url(./assets/icon-x-gray.svg),#393939}.game-initializer__sign--o{background:url(./assets/icon-o-gray.svg),#393939}[class*=game-initializer__select]:first-of-type:checked~.game-initializer__sign--x{background:url(./assets/icon-x-transparent.svg),var(--light-green)}[class*=game-initializer__select]:last-of-type:checked~.game-initializer__sign--o{background:url(./assets/icon-o-transparent.svg),var(--light-green)}.game-initializer__sign,[class*=game-initializer__select]:last-of-type:checked~.game-initializer__sign{background-position:center,100%!important;background-repeat:no-repeat,no-repeat!important;background-size:25%,100%!important;border-radius:15px;overflow:hidden;transition:.5s}.game-initializer__action-btn,.result-conveyer__continue-btn,.result-conveyer__reset-btn{height:50px;padding-bottom:5px;display:grid;place-items:center;border-radius:10px;font-weight:700;box-shadow:inset 0 -3px 2px rgba(0,0,0,.3)}.game-initializer__action-btn{background:var(--light-red);width:80%}.result-conveyer__action-section{display:flex;justify-content:center;align-items:center;gap:1em;width:100%}.result-conveyer__reset-btn{width:25%;background:var(--light-green)}.result-conveyer__continue-btn{width:40%;background:var(--light-red)}[role=button]{transition:.3s}[class*=clicked]{transform:scale(.95) translateY(5px);box-shadow:0 0 0,inset 0 2px 10px rgba(0,0,0,.4);filter:brightness(1.2)}.result-conveyer{position:fixed;background:var(--dark-gray);height:max-content;text-align:center;width:100%;padding:40px 0;box-shadow:0 0 0 100vh rgba(0,0,0,.3);display:grid;place-items:center;gap:20px}.greyish-text,.result-conveyer__result{color:var(--light-green)}.greyish-text{font-size:2rem}.result-conveyer__brief{display:flex;justify-content:center;align-items:center;gap:10px;height:50px;margin-bottom:10px;color:#00d9ff}.result-conveyer__get-winner-sign{width:40px;height:40px}[data-field-turn=turn-x] .result-conveyer__get-winner-sign{background-image:url(./assets/icon-x.svg)}[data-field-turn=turn-o] .result-conveyer__get-winner-sign{background-image:url(./assets/icon-o.svg)}@media (min-width:37.5em){main{gap:2em}.main__game-board{width:450px;min-height:450px;gap:1.7em;margin-top:50px}.main__summary-section{width:60%}.main__upper-section{top:2em}.main__display-name{font-size:.8rem}.game-initializer{width:35em}.game-initializer__action-btn{width:50%}}@media (min-width:56.25em){main{gap:0;width:70%;margin-top:5em}.main__upper-section{justify-content:space-evenly;gap:0}.main__game-board{width:350px;min-height:350px;gap:1.7em;margin-top:0}.result-conveyer__action-section{width:45%}}