body{text-align:center;margin:0;padding:0;border:0;box-sizing:border-box}hr{width:300px;text-align:center;border:1px solid black;margin:auto}#board{width:412px;height:412px;background-color:#bbada0;border:6px solid #bbada0;margin:0 auto;display:flex;flex-wrap:wrap}.tile{width:90px;height:90px;margin:5px;background-color:#cdc1b5;display:flex;justify-content:center;align-items:center}.around{background-color:#c2fbdb}.blackPiece{width:70px;height:70px;background-color:#000;border-radius:50%}.whitePiece{width:70px;height:70px;background-color:#fff;border-radius:50%}.select{background-color:#c59769;box-shadow:0 0 10px}#checkWinner{display:none}.btn{border:3px solid black;width:120px;padding:10px 0;font-size:20px;margin:2rem;cursor:pointer}.btn:hover{background-color:#c2fbdb}.rule{width:500px;margin:auto;padding:50px 0;text-align:left}.rule p{font-size:18px;margin:16px 0}@media screen and (max-width: 600px){hr{width:300px}#board{width:332px;height:332px}.tile{width:70px;height:70px;margin:5px}.blackPiece,.whitePiece{width:50px;height:50px}.rule{width:320px;padding:50px 0}.btn{margin:1rem}}*{margin:0;padding:0;box-sizing:border-box}.room{display:block;width:calc(50% - 2px);padding:12px;text-align:left;border:1px solid black}.room:hover{background-color:#cbd5e1}.room li{display:flex}.login_box,.roomName_box{background-color:#fff;border:4px solid black;transform:translate(-50%,-50%);width:300px;height:250px;top:50%;left:50%;position:absolute}.login_title,.roomName_title{font-weight:700;font-size:1.875rem;line-height:2.25rem;margin:1.25rem}.login_input,.roomName_input{padding:1rem;--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));border-radius:.375rem;border:none}.lobby_title,.room_title{font-size:2.25rem;line-height:2.5rem;font-weight:700;margin-top:1.25rem;margin-bottom:1.25rem}.lobby_container{position:relative;width:300px;margin:auto}.room_list_title{font-size:1.5rem;line-height:2rem;font-weight:600;margin-top:1.25rem;margin-bottom:1.25rem}.create_room_btn{position:absolute;top:0;right:0;border:1px solid black;border-radius:6px;padding:6px;cursor:pointer}.create_room_btn:hover{background-color:#cbd5e1}.mask{position:fixed;top:0;left:0;width:100%;height:100%}.roomList{display:flex;flex-wrap:wrap;gap:4px}.vsDiv{display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:20px}.vsDiv h2{font-size:1.5rem;line-height:2rem;font-weight:600;width:fit-content;padding-left:1.25rem;padding-right:1.25rem}.backLobbyBtn{position:absolute;border:1px solid black;border-radius:6px;padding:8px;top:20px;left:20px;cursor:pointer}.backLobbyBtn:hover{background-color:#cbd5e1}@media (min-width: 768px){.lobby_container,.accordion,hr{width:500px}.vsDiv{flex-direction:row}}.accordion{background-color:#eee;color:#444;cursor:pointer;margin-top:18px;padding:18px;width:300px;text-align:center;border:none;outline:none;transition:.4s}.accordion:hover{background-color:#ccc}.panel{padding:0 18px;background-color:#fff;display:block;overflow:hidden;max-height:800px;transition:max-height .2s ease-out}.panel_close{padding:0 18px;background-color:#fff;display:block;overflow:hidden;max-height:0;transition:max-height .2s ease-out}