footer ul{padding:0;display:flex;flex-wrap:wrap;gap:30px;justify-content:center;align-content:center}footer ul li{display:flex;align-items:center;gap:5px;list-style:none}.nav-bar-bg{margin-bottom:1rem;background-color:#333}.nav-bar{margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:1rem;color:#fff;max-width:70rem}.nav-links{list-style:none;display:flex;align-items:center;margin:0;padding:0}.nav-links li{margin-right:20px}.nav-links li a{text-decoration:none;color:#fff;background-color:#555;padding:5px 15px;border-radius:5px;transition:background-color .3s ease}.nav-links li a:hover{background-color:#777}.distance-select{margin-right:1rem}.algorithm-select,.distance-select{padding:5px 10px;background-color:#555;color:#ddd;border-radius:5px;border:none;cursor:pointer}.algorithm-select:hover{background-color:#777}.node{width:25px;height:25px;display:inline-block;margin:1px;border-radius:20%;background-color:var(--clr-node-outline)}.wall{background-color:var(--clr-wall-node)}.start{background-color:var(--clr-start-node)}.target{background-color:var(--clr-target-node)}.keep-visited{background-color:var(--clr-visited-end);animation:keepVisitedAnimation 1.5s ease-out forwards}.visited{background-color:var(--clr-visited-end);animation:removeVisitedAnimation 1.5s ease-out forwards}@keyframes keepVisitedAnimation{0%{transform:scale(.3);background-color:var(--clr-visited-start);border-radius:50%;box-shadow:0 0 10px 0 var(--clr-visited-start)}50%{background-color:var(--clr-visited-mid);box-shadow:0 0 5px 3px var(--clr-visited-mid)}75%{transform:translateY(-2px);background-color:var(--clr-visited-end);box-shadow:0 0 5px 2px var(--clr-visited-end)}to{transform:scale(1) translateY(0);box-shadow:none}}@keyframes removeVisitedAnimation{0%{transform:scale(.3);background-color:var(--clr-visited-start);border-radius:50%;box-shadow:0 0 10px 0 var(--clr-visited-start)}25%{background-color:var(--clr-visited-mid);box-shadow:0 0 5px 3px var(--clr-visited-mid)}50%{transform:translateY(-2px);background-color:var(--clr-visited-end);box-shadow:0 0 5px 2px var(--clr-visited-end)}75%{transform:scale(1) translateY(0);box-shadow:none}to{background-color:var(--clr-node-outline)}}.short-path{background-color:var(--clr-node-shortest-path);animation:shortestPath 1.5s ease-out forwards}@keyframes shortestPath{0%{background-color:var(--clr-node-shortest-path-start);box-shadow:0 0 5px var(--clr-node-shortest-path-start),0 0 10px var(--clr-node-shortest-path-start);border-radius:50%;transform:scale(.4)}50%{box-shadow:0 0 7px var(--clr-node-shortest-path),0 0 15px var(--clr-node-shortest-path);transform:translateY(-5px)}to{box-shadow:none;transform:scale(1) translateY(0)}}.grid{display:flex;flex-direction:column}.grid-row{display:flex}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;--clr-start-node: hsl(137, 83%, 47%);--clr-target-node: hsl(0, 100%, 50%);--clr-wall-node: hsla(184, 77%, 63%, .872);--clr-node-outline: hsl(0, 0%, 25%);--clr-node-shortest-path-start: hsl(60, 100%, 63%);--clr-node-shortest-path: hsl(35, 100%, 60%);--clr-visited-node: hsla(188, 100%, 43%, .75);--clr-visited-start: hsla(210, 100%, 50%, .75);--clr-visited-mid: hsla(270, 53%, 44%, .746);--clr-visited-end: hsla(270, 31%, 50%, .536)}body{margin:0;-webkit-user-select:none;user-select:none}