*{margin:0;padding:0;font-family:Calibri}body{background:#02ccff4d;align-items:center;min-width:100vw;min-height:100vh;display:flex;overflow:hidden}.ball{border-radius:100px;padding:35%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ball.selected{animation:2s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #000000b3}70%{box-shadow:0 0 0 10px #0000}to{box-shadow:0 0 #0000}}.board{background:#e6e6e6;border:1px solid #000;flex-direction:column;width:60vmin;height:60vmin;display:flex}.board-container{justify-content:center;width:100%;display:flex;position:relative}.board__row{border-bottom:1px solid #000;flex-direction:row;width:100%;height:100%;display:flex;position:relative}.board__row__tile{border-right:1px solid #000;width:100%;height:100%;position:relative}.board__row__tile__even{background-image:linear-gradient(45deg,#02ccff4d,#fff)}.board__row__tile__odd{background-image:linear-gradient(45deg,#fff,#02ccff4d)}.board__row__tile.selected{background:#000}.board__row__tile.openList{background:#00a300}.board__row__tile.closedList{background:#a30000}.board__row__tile.finalPath{background:#0084ff}.menu{border-right:2px solid #000;flex-direction:column;width:200px;height:100vh;display:flex;left:0}.menu>*{border-top:2px solid #000;width:100%;height:20%;position:relative}.menu>:first-child{background:#5bc0eb;border-top:none}.menu>:nth-child(2){background:#fde74c}.menu>:nth-child(3){background:#9bc53d}.menu>:nth-child(4){background:#34e5b3}.menu>:nth-child(5){background:#e55934}.menu>:nth-child(6){background:#fa7921}.menu .boardSize__input,.menu .numberOfColors__input,.menu .paintPath__input{text-align:center;background:#fff;border:none;outline:none;width:30%;height:30%;font-size:24px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.menu .header{text-align:center;background:0 0;width:100%;font-size:24px;font-weight:400}.menu .restartGameButton{background:#fff;width:60%;height:30%;font-size:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.menu .scoreOutput{text-align:center;font-size:24px}.menu .nextBallColor{border-radius:100px;width:0;height:0;padding:13%;position:absolute;top:50%;transform:translateY(-50%)}.menu .nextBallColor:first-child{left:10px}.menu .nextBallColor:nth-child(2){left:50%;transform:translate(-50%,-50%)}.menu .nextBallColor:nth-child(3){right:10px}.menu .nextBallColors{background:#000000bf;width:100%;height:50%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.color1{background:radial-gradient(circle at 65% 15%,#fff 1px,#ffffe0 3%,#ff0 60%,#ffffe0 100%)}.color2{background:radial-gradient(circle at 65% 15%,#add8e6 1px,#00f 3%,#00008b 60%,#00f 100%)}.color3{background:radial-gradient(circle at 65% 15%,pink 1px,red 3%,#8b0000 60%,red 100%)}.color4{background:radial-gradient(circle at 65% 15%,#fff 1px,#0f0 3%,#006400 60%,#0f0 100%)}.color5{background:radial-gradient(circle at 65% 15%,#ff0 1px,orange 3%,#ff4500 60%,orange 100%)}.color6{background:radial-gradient(circle at 65% 15%,violet 1px,#9370db 3%,purple 60%,#9370db 100%)}.color7{background:radial-gradient(circle at 65% 15%,#add8e6 1px,#00008b 3%,#000 60%,#00008b 100%)}.color8{background:radial-gradient(circle at 65% 15%,#fff 1px,#90ee90 3%,#0ff 60%,#90ee90 100%)}.color9{background:radial-gradient(circle at 65% 15%,#d3d3d3 1px,gray 3%,#a9a9a9 60%,gray 100%)}