@keyframes weightedTileAnimation{0%{transform:scale(0)}75%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes wallTileAnimation{0%{transform:scale(0)}75%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes visitedTileAnimation{0%{transform:scale(0);opacity:.5}75%{transform:scale(1.1);opacity:.75}100%{transform:scale(1);opacity:1}}@keyframes pathTileAnimation{0%{transform:scale(0.5)}50%{transform:scale(1.3)}100%{transform:scale(1)}}*,*::after,*::before{margin:0;padding:0;box-sizing:inherit}html{font-size:62.5%}body{box-sizing:border-box;height:100vh;background-color:#fefefe}h1{font-size:2.4rem}h2{font-size:2.2rem}h3{font-size:2rem}h4{font-size:1.8rem}h5{font-size:1.6rem}h6{font-size:1.4rem}input,button{border:none;outline:none;font-family:inherit}button{cursor:pointer;font-size:1.5rem}table{border-spacing:0;border-collapse:collapse}body{font-family:"Inconsolata";color:#333}a{text-decoration:none}::selection{background-color:#aaa;color:white}.navbar{display:flex;justify-content:center;padding:1rem;background:radial-gradient(white 0%, #eee 100%)}.footer{position:fixed;bottom:0;width:100%;padding:1rem;background:radial-gradient(white 0%, #eee 100%);color:#333;font-size:1.2rem;text-align:center}#controls-container{height:8%;display:flex;align-items:center;justify-content:center}#controls-container>*{margin:0 1rem 0 1rem;opacity:.9}#controls-container>*:hover{opacity:1}#controls-container>span{display:flex;align-items:center;height:5rem;border:1px dotted black;padding:2rem;font-size:1.5rem;text-align:center}#visualize-toggle-btn{height:4rem;width:18rem;color:whitesmoke}#visualize-toggle-btn.start{background-color:#12a336}#visualize-toggle-btn.cancel{background-color:#de2612}#clear-walls-btn,#clear-weighted-tiles-btn{height:4rem;width:12rem;color:whitesmoke;background-color:#777}#grid-type-toggle-btn{height:4rem;width:20rem;color:whitesmoke;background-color:#11a7d1}#square-grid{display:none;width:100%;height:100%;overflow:hidden}#square-grid.active{display:block}.square-tile--start{background-color:#1c53eb}.square-tile--goal{background-color:orangered}.square-tile--unvisited{border:1px solid lightslategray}.square-tile--wall{background-color:#333333;border:1px solid lightgrey;animation-name:wallTileAnimation;animation-duration:.2s;animation-timing-function:ease-out}.square-tile--weighted{animation-name:weightedTileAnimation;animation-duration:.2s;animation-timing-function:ease-out;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIiB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiBmaWxsPSIjMDQ0NzBiIj4NCiAgPHBhdGggZD0iTTM3OC4zMSAzNzguNDlMMjk4LjQyIDI4OGgzMC42M2M5LjAxIDAgMTYuOTgtNSAyMC43OC0xMy4wNiAzLjgtOC4wNCAyLjU1LTE3LjI2LTMuMjgtMjQuMDVMMjY4LjQyIDE2MGgyOC44OWM5LjEgMCAxNy4zLTUuMzUgMjAuODYtMTMuNjEgMy41Mi04LjEzIDEuODYtMTcuNTktNC4yNC0yNC4wOEwyMDMuNjYgNC44M2MtNi4wMy02LjQ1LTE3LjI4LTYuNDUtMjMuMzIgMEw3MC4wNiAxMjIuMzFjLTYuMSA2LjQ5LTcuNzUgMTUuOTUtNC4yNCAyNC4wOEM2OS4zOCAxNTQuNjUgNzcuNTkgMTYwIDg2LjY5IDE2MGgyOC44OWwtNzguMTQgOTAuOTFjLTUuODEgNi43OC03LjA2IDE1Ljk5LTMuMjcgMjQuMDRDMzcuOTcgMjgzIDQ1LjkzIDI4OCA1NC45NSAyODhoMzAuNjNMNS42OSAzNzguNDljLTYgNi43OS03LjM2IDE2LjA5LTMuNTYgMjQuMjYgMy43NSA4LjA1IDEyIDEzLjI1IDIxLjAxIDEzLjI1SDE2MHYyNC40NWwtMzAuMjkgNDguNGMtNS4zMiAxMC42NCAyLjQyIDIzLjE2IDE0LjMxIDIzLjE2aDk1Ljk2YzExLjg5IDAgMTkuNjMtMTIuNTIgMTQuMzEtMjMuMTZMMjI0IDQ0MC40NVY0MTZoMTM2Ljg2YzkuMDEgMCAxNy4yNi01LjIgMjEuMDEtMTMuMjUgMy44LTguMTcgMi40NC0xNy40Ny0zLjU2LTI0LjI2eiIvPg0KPC9zdmc+DQo=);background-repeat:no-repeat;background-position:center}.square-tile--visited{background-color:#36ebd9;border:1px solid whitesmoke;animation-name:visitedTileAnimation;animation-duration:.5s;animation-timing-function:ease-out}.square-tile--path{background-color:#f2d830;border:1px solid whitesmoke;animation-name:pathTileAnimation;animation-duration:.2s;animation-timing-function:ease-out}#hexagon-grid{display:none;width:100%;height:100%;overflow:hidden}#hexagon-grid.active{display:block}.hexagon-tile--start{fill:#1c53eb}.hexagon-tile--goal{fill:orangered}.hexagon-tile--unvisited{fill:transparent;stroke:lightslategray;stroke-width:1px}.hexagon-tile--wall{fill:#333333;stroke:lightgrey;stroke-width:1px;animation-name:wallTileAnimation;animation-duration:.2s;animation-timing-function:ease-out}.hexagon-tile--weighted{animation-name:weightedTileAnimation;animation-duration:.2s;animation-timing-function:ease-out;pointer-events:none;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIiB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiBmaWxsPSIjMDQ0NzBiIj4NCiAgPHBhdGggZD0iTTM3OC4zMSAzNzguNDlMMjk4LjQyIDI4OGgzMC42M2M5LjAxIDAgMTYuOTgtNSAyMC43OC0xMy4wNiAzLjgtOC4wNCAyLjU1LTE3LjI2LTMuMjgtMjQuMDVMMjY4LjQyIDE2MGgyOC44OWM5LjEgMCAxNy4zLTUuMzUgMjAuODYtMTMuNjEgMy41Mi04LjEzIDEuODYtMTcuNTktNC4yNC0yNC4wOEwyMDMuNjYgNC44M2MtNi4wMy02LjQ1LTE3LjI4LTYuNDUtMjMuMzIgMEw3MC4wNiAxMjIuMzFjLTYuMSA2LjQ5LTcuNzUgMTUuOTUtNC4yNCAyNC4wOEM2OS4zOCAxNTQuNjUgNzcuNTkgMTYwIDg2LjY5IDE2MGgyOC44OWwtNzguMTQgOTAuOTFjLTUuODEgNi43OC03LjA2IDE1Ljk5LTMuMjcgMjQuMDRDMzcuOTcgMjgzIDQ1LjkzIDI4OCA1NC45NSAyODhoMzAuNjNMNS42OSAzNzguNDljLTYgNi43OS03LjM2IDE2LjA5LTMuNTYgMjQuMjYgMy43NSA4LjA1IDEyIDEzLjI1IDIxLjAxIDEzLjI1SDE2MHYyNC40NWwtMzAuMjkgNDguNGMtNS4zMiAxMC42NCAyLjQyIDIzLjE2IDE0LjMxIDIzLjE2aDk1Ljk2YzExLjg5IDAgMTkuNjMtMTIuNTIgMTQuMzEtMjMuMTZMMjI0IDQ0MC40NVY0MTZoMTM2Ljg2YzkuMDEgMCAxNy4yNi01LjIgMjEuMDEtMTMuMjUgMy44LTguMTcgMi40NC0xNy40Ny0zLjU2LTI0LjI2eiIvPg0KPC9zdmc+DQo=);background-repeat:no-repeat;background-position:center}.hexagon-tile--visited{fill:#36ebd9;stroke:whitesmoke;stroke-width:1px;animation-name:visitedTileAnimation;animation-duration:.5s;animation-timing-function:ease-out}.hexagon-tile--path{fill:#f2d830;stroke:whitesmoke;stroke-width:1px;animation-name:pathTileAnimation;animation-duration:.2s;animation-timing-function:ease-out}#app-container{height:92vh}#grid-container{height:92%}