*{font-family:cursive;margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background-color:#4c43d4;color:#fff;padding:0;margin:0}button{background:none;border:none;outline:none}button:hover{cursor:pointer}.app{font-size:20px;display:flex;flex-direction:column;align-items:center;padding:0 20px;row-gap:40px;height:100vh}.app h1{margin-top:20px}.app h3{text-align:center}.action-cta-wrap{display:flex;column-gap:10px}.text-green{color:#12e177}.text-orange{color:#ffc72a}.choose-mode-wrap{display:flex;flex-direction:column;row-gap:20px;justify-content:center;height:40%}.choose-player-wrap{display:flex;flex-direction:column;row-gap:20px}.status-message{font-size:1.2rem;font-weight:lighter;text-align:center}.status-message span{font-weight:400}.btn{font-size:.8rem;color:#fff;border-radius:15px;padding:12px 18px;transition:all .2s;background-color:#4c43d4;box-shadow:0 0 0 1px #ffc72a}.btn.active{background-color:#ffc72a;box-shadow:none}.board{margin-top:35px}.board .board-row{display:flex;flex-direction:row;border-bottom:2px solid #fff}.board .board-row:last-child{border-bottom:none}.board .board-row .square{width:80px;height:80px;border-right:2px solid #fff;font-size:2.5rem;padding:0;overflow:hidden;transition:all .2s}.board .board-row .square:last-child{border-right:none}.board .board-row .square.winning{animation:scaleText 1.4s infinite}@keyframes scaleText{0%{transform:2.5rem}50%{font-size:3.5rem}to{font-size:2.5rem}}.bg-balls{position:fixed;top:0;left:0;right:0;bottom:0;min-width:100%;z-index:-1}.bg-balls:before,.bg-balls:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%}.bg-balls:before{background-color:#ffc72a;right:-75px;bottom:-75px}@media screen and (min-width: 476px){.bg-balls:before{width:220px;height:220px;right:-110px;bottom:-110px}}.bg-balls:after{background-color:#12e177;top:-75px;left:-75px}@media screen and (min-width: 476px){.bg-balls:after{width:220px;height:220px;top:-110px;left:-110px}}