*{margin:0;padding:0;box-sizing:border-box}.panel{top:10%;left:5%;width:20vw;position:absolute}.container{width:100vw;height:100vh;display:grid;place-items:center;background-color:#b3cdc4}.distance_board{width:800px;height:800px;background:#fff;border:5px solid #000;display:grid;grid-template-columns:repeat(1fr,50);grid-template-rows:repeat(1fr,50)}.pencil_active{filter:opacity(50%)}.pencil_button{width:40px;height:40px;border-radius:50%;border:2px solid #fff}.wall_pencil{background-color:#000}.start_pencil{background-color:#adff2f}.end_pencil{background-color:red}.row{display:flex}.tile{background-color:#fff;width:100%}.search_path{background-color:#7fffd4}.wall{background-color:#000}.visited_path{background-color:blue}.short_path{background-color:#00c056}.start{background-color:#adff2f}.end{background-color:red}