@import url(https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap);h1{border-radius:3px;box-sizing:initial;font-family:"Noto Serif",serif;font-size:3.3rem;margin-bottom:1rem;padding:.2rem .6rem;width:19rem}.main{margin-top:1.8rem;text-align:center}.bottomBtns{display:flex;justify-content:space-between;margin-top:.5rem;padding:10px}#homeBtn,#soundBtn{background-color:#28a745;border:2px solid #28a745;border-radius:25px;box-shadow:0 4px 6px #0000001a;color:#fff;font-size:.9rem;font-weight:700;padding:6px 12px;text-align:center;transition:all .2s ease-in-out}#homeBtn:hover,#soundBtn:hover{background-color:#218838;border-color:#1e7e34;box-shadow:0 6px 8px #00000026;cursor:pointer}.participantInfo{align-items:center;border-radius:1px;box-shadow:2px 2px 6px #cecccc,-1px -1px 5px #cecccc;display:flex;justify-content:space-between;margin:1rem auto;padding:.7rem 1rem;width:19rem}.participantInfo img{border-radius:50%;height:60px;width:60px}.playerTurn{margin:.8rem auto}.online-container{align-items:center;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;flex-direction:column;font-family:Arial,sans-serif;height:100vh;justify-content:center;text-align:center;width:100vw}.online-container>h2{color:#333;font-size:2.8rem;margin-bottom:1rem}.online-container>p{color:#666;font-size:1.2rem;margin-bottom:3rem}.back-to-home{background-color:#4285f4;border:none;border-radius:4px;box-shadow:0 4px 6px #0000001a;color:#fff;font-size:14px;font-weight:900;height:40px;letter-spacing:2px;margin-top:.9rem;text-align:center;transition:background-color .3s ease;width:190px}.back-to-home:hover{background-color:#357ae8;cursor:pointer}.user-info{display:flex;flex-direction:column}.user-info>div{font-size:2rem}.user-info span{font-weight:800}.user-info .note{color:brown;margin-top:1.8rem}.error-message{color:red;font-size:.9rem;margin-bottom:.4rem}.user-info>input{border:3px solid #ccc;border-radius:5px;font-size:16px;margin-top:10px;outline:none;padding:10px;transition:border-color .3s ease,box-shadow .3s ease}.user-info>input:focus{border-color:#85b7d9;box-shadow:0 0 5px #85b7d980}.user-info>button{background-color:#4caf50;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;margin-top:.7rem;outline:none;padding:10px;transition:background-color .3s ease}.user-info>button:hover{background-color:#45a049}.room-joined{background-color:#f9f9f9;border:15px solid #ccc;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin:20px auto;padding:20px 45px;text-align:center;width:30rem}.room-joined h3{color:#333;font-size:1.5rem;margin-bottom:2rem}.room-joined h5{color:#555;font-size:18px;margin-bottom:10px}.participants{border:4px solid #ddd;border-radius:8px;margin-bottom:1.5rem;padding:20px}.user,.user>.left{align-items:center;display:flex;justify-content:space-between}.pic img{border-radius:50%;height:3.125rem;margin-right:10px;margin-top:10px;width:3.125rem}.info{text-align:left}.name{color:#333;font-size:26px}.email,.name{font-weight:700}.email{color:#777;font-size:12px}.roomJoinedBtns{background-color:#007bff;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;margin:7px 0;padding:10px;transition:background-color .3s ease;width:100%}.roomJoinedBtns:hover{background-color:#0056b3}.overlay{align-items:center;background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.box{animation:popUp .3s ease-out;background:#fff;border-radius:8px;box-shadow:0 0 10px #00000080;max-width:19rem;padding:10px;width:100%}.content{align-items:center;border:2px solid;display:flex;flex-direction:column;justify-content:center;padding:20px}.content>h4{font-family:"Noto Serif",serif;font-size:1.8rem;margin:1rem}.cross{background-color:#fff;border:3px solid red;border-radius:2px;color:red;font-family:Fredoka,sans-serif;font-size:3rem;height:4rem;margin-bottom:1rem;margin-right:.9rem;padding:0 1.3rem;width:5rem}.cross:hover{background-color:red;color:#fff;cursor:pointer}.circle{background-color:#fff;border:3px solid blue;border-radius:2px;color:blue;font-family:Fredoka,sans-serif;font-size:3rem;height:4rem;margin-bottom:1rem;padding:0 1rem;width:5rem}.circle:hover{background-color:blue;color:#fff;cursor:pointer}@media screen and (max-width:480px){.online-container>h2{font-size:1.8rem}.online-container>p{font-size:.8rem}.user-info{margin:auto;width:85%}.user-info>div{font-size:1.8rem}.room-joined{border:10px solid #ccc;border-radius:6px;margin:50px auto;padding:10px 20px;width:22rem}.room-joined h3{font-size:1.5rem}.room-joined h5{font-size:1.125rem}.participants{border-radius:4px;padding:8px}.pic img{height:2.7rem;width:2.7rem}.name{font-size:1.4rem}.email{font-size:10px}.roomJoinedBtns{font-size:14px}.role{font-size:12px}.error-message{font-size:1rem!important}.small-error-message{font-size:.6rem!important}.content>h4{font-size:1.5rem;margin:1.2rem}.cross{margin-bottom:1.2rem;margin-right:.6rem;padding:0 1rem}.circle,.cross{height:4rem;width:4.5rem}.circle{margin-bottom:1rem;padding:0}}@media screen and (max-width:380px){.online-container>h2{font-size:3rem;padding-left:20px;padding-right:20px}.online-container>p{font-size:1.2rem;padding-left:50px;padding-right:50px}.room-joined{border:8px solid #ccc;padding:8px 16px;width:20rem}.room-joined h3{font-size:1.4rem}.room-joined h5{font-size:1rem}.pic img{height:2.4rem;margin-right:6px;margin-top:8px;width:2.4rem}.name{font-size:1.3rem}.email{font-size:8px}.roomJoinedBtns{font-size:12px}.role{font-size:10px}}.square{background-color:#f5f5f5;border:none;font-family:Fredoka,sans-serif;font-size:5rem;height:100%;line-height:100%;width:100%}.x{color:red}.o{color:blue}.xHover:hover{background-color:#f003;cursor:pointer}.oHover:hover{background-color:#0000ff40;cursor:pointer}.animate-font{animation:fontPopUp .4s}@keyframes fontPopUp{0%{font-size:0}to{font-size:5rem}}.restricted{cursor:progress!important}.restricted:hover{background-color:#f5f5f5}.board{display:grid;grid-template-columns:repeat(3,6.33rem);grid-template-rows:repeat(3,6.33rem);justify-content:center;place-items:center}.board>div{border:5px solid #020202bb;height:100%;width:100%}.board>div:nth-child(3n+1){border-left:none}.board>div:nth-child(3n){border-right:none}.board>div:nth-child(-n+3){border-top:none}.board>div:nth-child(n+7){border-bottom:none}.scoreBoard{align-items:center;border-radius:1px;box-shadow:2px 2px 6px #cecccc,-1px -1px 5px #cecccc;display:flex;justify-content:space-around;margin:2rem auto auto;padding:.5rem;width:19rem}.forO,.forX{transition:color .3s}.forX>div:first-child{font-family:Fredoka,sans-serif;font-size:2.2rem}.forO>div:first-child{font-family:Fredoka,sans-serif;font-size:2.1rem}.forDraw>div:first-child{font-family:Fredoka,sans-serif;font-size:1.8rem;padding-top:3px}.forO>div:nth-child(2),.forX>div:nth-child(2){font-size:.6rem;font-weight:700}.forDraw>div:nth-child(2){font-size:.8rem;font-weight:600;margin-top:2px;padding-bottom:2px}.modal-overlay{align-items:center;background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.modal{animation:popUp .3s ease-out;background:#fff;border-radius:8px;box-shadow:0 0 10px #00000080;max-width:19rem;padding:10px;width:100%}.modal-content{border:2px solid;padding:10px;text-align:center}.modal-content h2{font-family:"Noto Serif",serif;font-size:1.3rem;margin:1rem auto}.modal-content h4{font-size:1rem;margin:1rem auto 2rem}h6{font-family:"Noto Serif",serif}.winnerX{border:3px solid red;border-radius:2px;color:red}.winnerO,.winnerX{background-color:#fff;font-family:Fredoka,sans-serif;font-size:3.2rem;margin:.8rem .5rem 1.4rem;padding:3px 1.1rem}.winnerO{border:3px solid blue;border-radius:2px;color:blue}.modalBtn{background-color:#000;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;letter-spacing:1px;margin-bottom:1rem;padding:10px 16px}.modalBtn,.modalBtn:hover{border:2px solid #000;font-weight:700}.modalBtn:hover{background-color:#fff;box-sizing:initial;color:#000}@keyframes popUp{0%{transform:scale(.1)}to{transform:scale(1)}}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;margin:0}body{display:grid;place-items:center}html{font-size:100%}.button-container{background:linear-gradient(135deg,#ffcc70,#ff9472);box-shadow:0 10px 20px #0003;height:100%;justify-content:center;padding:1.25rem}.button-container,.button-container .inner{align-items:center;border-radius:.625rem;display:flex}.button-container .inner{background-color:#fff;box-shadow:0 4px 8px #0000001a;flex-direction:column;padding:3.125rem 1.25rem;position:relative;width:21.5rem}.btns{background-color:#ff9472;border:1px solid #ff9472;border-radius:.25rem;box-shadow:2px 2px 7px hsla(0,0%,50%,.884);color:#ffffffe6;font-size:1.7rem;font-weight:500;margin:1rem 0;padding:.7rem 1rem;text-align:center;transition:all .15s ease-in-out;vertical-align:middle}.btns:hover{background-color:#ff7854;cursor:pointer;transform:scale(1.025)}@media screen and (max-width:480px){.button-container .inner{width:19rem}}@media screen and (max-width:380px){html{font-size:95%}.button-container .inner{padding:2.2rem 1rem;width:18rem}}@media screen and (max-width:330px){html{font-size:85%}.button-container .inner{padding:2rem 0,8rem;width:17rem}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}
/*# sourceMappingURL=main.ba7e7068.css.map*/