body{font-family:Roboto,sans-serif;background-color:#435ed4;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}.text-green{color:#12e177}.text-orange{color:#ffc72a}.status-message{margin-bottom:30px;font-size:1.2rem;font-weight:lighter}.status-message span{font-weight:400}.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{font-size:2.5rem;width:80px;height:80px;border-right:2px solid #fff;display:flex;padding:0;overflow:hidden;transition:all .2s;position:relative;background-color:#435ed4;text-align:center;align-items:center;justify-content:center;transition:background-color .3s;cursor:pointer}.board .board-row .square:last-child{border-right:none}.board .board-row .square:hover{background-color:#122642}.board .board-row .square.winning{animation:scaleText 1.4s infinite}@keyframes scaleText{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.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}}.board-row:last-child .square{border-bottom:none}.square:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:60%;background-image:radial-gradient(circle,#12e177 0%,#435ed4 80%);border-radius:50%;opacity:.4;z-index:-1}.app-header{margin-bottom:40px;text-align:center}.app-title{font-size:2rem;margin-bottom:10px}.app-subtitle{font-size:1.2rem}.btn-primary{font-size:1rem;color:#fff;background-color:#ffc72a;border:none;border-radius:5px;padding:8px 16px;cursor:pointer;transition:background-color .3s}.btn-primary:hover{background-color:#f6b500}.history-wrapper{width:300px;text-align:center;margin-bottom:20px}.history-wrapper .history{display:inline-block;padding:0;margin:0}.history-wrapper .history li{list-style:none;text-align:left;position:relative;padding-left:14px;margin-bottom:8px}.history-wrapper .history li:before{content:"";border-radius:50%;display:inline-block;height:5px;width:5px;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%)}.history-wrapper .history li .btn-move{background-color:#333;color:#fff;border:none;padding:10px 20px;border-radius:5px;font-size:16px;cursor:pointer;display:block;margin:0 0 5px;width:200px}.history-wrapper .history li .btn-move:hover{background-color:#555}.history-wrapper .history li .btn-move:focus{outline:none}.history-wrapper .history li .btn-move:active{background-color:#111}.history-wrapper .history li .btn-move.active{font-weight:700;color:#12e177}.btn-reset{background-color:#435ed4;color:#fff;padding:12px 18px;border-radius:5px;font-size:16px;cursor:pointer;display:block;margin:25px 0 5px;width:200px;transition:all .2s;box-shadow:0 0 0 1px #ffc72a}.btn-reset:hover{background-color:#555}.btn-reset:active{background-color:#111}.btn-reset.active{font-weight:700}.btn-reset.active{background-color:#ffc72a;box-shadow:none}