@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap";:root{--black: #0000003b;--grey-200: #eeeeee;--grey-400: #bdbdbd;--grey-600: #757575;--blue: #3f51b5;--red: #f50057;--teal-400: #26a69a;--teal-600: #00897b}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Roboto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh}#root{height:100vh;display:flex;flex-direction:column}h1{text-align:center;padding-top:1rem;margin-bottom:1rem}.blue{color:var(--blue)}.red{color:var(--red)}.ta-left{text-align:left}.grid-width{width:calc(var(--gridSize) * 40px + 8px)}.grid-border{display:flex;flex-wrap:wrap;margin:20px auto;padding:2px;border-width:2px;border-style:solid}.grid-size{width:calc(var(--gridSize) * 40px + 8px);height:calc(var(--gridSize) * 40px + 8px)}.server-status{width:fit-content;margin-top:20px;margin-left:auto;margin-right:auto}.guide-link{position:absolute;bottom:5em;left:0;right:0;width:fit-content;margin:auto}.textfield{width:420px;margin-bottom:40px}.text-input{display:flex;flex-direction:column;align-items:center;margin:auto}.winner-container{height:100px}.margin-auto{margin:auto}.square-button{width:100%;aspect-ratio:1 / 1;background-color:var(--grey-200);border:1px solid var(--grey-400);font-size:clamp(.8rem,2.5vw,1.5rem);font-weight:600;display:flex;justify-content:center;align-items:center;transition:border .15s ease-in-out}.square-button:hover{border:3px solid var(--grey-600)}.square-button[disabled]:hover{border:1px solid var(--grey-400)}.square-button[value=O]{color:var(--red)}.square-button[value=X]{color:var(--blue)}.players-container{width:500px;height:100px;margin:auto;display:flex;justify-content:space-between;align-items:flex-end}.players-container h3{margin-bottom:20px}.button-group-center{display:flex;flex-direction:column;align-items:center;justify-content:center}.text-right{text-align:right}.game-id-container{height:24px;position:absolute;right:10px;bottom:40px}.restart-button{width:fit-content;margin:10px auto}.color-teal{background-color:var(--teal-400)}.color-teal:checked{background-color:var(--teal-600)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
