@import"https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&family=Space+Grotesk:wght@400;700&display=swap";*{box-sizing:border-box;margin:0;font-family:space grotesk,arial}:root{--nav-clr: hsl(205, 32%, 30%);--nav-btn-clr: hsl(218, 21%, 21%);--nav-btn-border-clr: hsl(218, 21%, 11%);--nav-btn-accent-clr: hsl(22, 99%, 63%);--nav-btn-accent-border-clr: hsl(22, 99%, 43%);--body-clr: hsl(205, 23%, 41%);--default-cell-clr: hsl(40, 12%, 71%);--cell-checking-clr: hsl(204, 76%, 61%);--visited-cell-clr: hsl(0, 0%, 39%);--final-path-cell-clr: hsl(47, 100%, 67%);--wall-cell-clr: hsl(0, 0%, 21%);--starting-cell-clr: hsl(161, 82%, 24%);--ending-cell-clr: hsl(355, 100%, 38%);--user-node-clr: hsl(30, 100%, 34%);--cell-width-large: 90px;--cell-width-small: 60px}#root{min-height:100vh;display:flex;flex-direction:column}.header{position:sticky;z-index:2;top:0;width:100%;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background-color:var(--nav-clr);padding-left:1.5rem}.btn,.select-container{background-color:var(--nav-btn-clr);border:1px solid var(--nav-btn-border-clr);color:#fff;font-size:1.5rem;padding:.25em .75em;border-radius:.5rem;margin:1rem .5rem 1rem 0;cursor:pointer;font-family:inherit}.btn:hover,.btn:focus{background-color:var(--nav-btn-border-clr);box-shadow:0 0 8px 0 var(--nav-btn-border-clr)}.btn:disabled{background-color:#696969;box-shadow:none;cursor:not-allowed;border:1px solid dimgrey}.btn-accent{background-color:var(--nav-btn-accent-clr);border-color:var(--nav-btn-accent-border-clr)}.btn-small{font-size:1rem;margin-left:.5rem}.btn-accent:hover,.btn-accent:focus{background-color:var(--nav-btn-accent-border-clr);box-shadow:0 0 8px 0 var(--nav-btn-accent-border-clr)}.main{background-color:var(--body-clr);flex-grow:1;display:flex;justify-content:space-between}.grid-node{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.cells-container{padding:2rem;display:grid;justify-content:center;align-content:center;gap:2px;overflow-x:auto;min-height:95%;min-width:90%}.cells-container-small-nodes{grid-template-columns:repeat(auto-fill,var(--cell-width-small))}.cells-container-large-nodes{grid-template-columns:repeat(auto-fill,var(--cell-width-large))}.node{background-color:var(--default-cell-clr);border:1px solid grey;display:inline-block;margin:0}.start-node{background-color:var(--starting-cell-clr)}.end-node{background-color:var(--ending-cell-clr)}.visited-node{background-color:var(--visited-cell-clr)}.visited-node-animation{animation:visited-node-animation 1s ease-in-out;animation-fill-mode:forwards}@keyframes visited-node-animation{0%{animation-timing-function:ease-out;transform:scale(1);transform-origin:center center;background-color:#50abe7}10%{animation-timing-function:ease-in;transform:scale(.91);background-color:#50abe7}17%{animation-timing-function:ease-out;transform:scale(.98)}33%{animation-timing-function:ease-in;transform:scale(.87)}45%{animation-timing-function:ease-out;transform:scale(1)}}@keyframes re-visited-animation{0%{animation-timing-function:ease-out;transform:scale(1);transform-origin:center center;background-color:#50abe7}10%{animation-timing-function:ease-in;transform:scale(.91);background-color:#50abe7}17%{animation-timing-function:ease-out;transform:scale(.98)}33%{animation-timing-function:ease-in;transform:scale(.87)}45%{animation-timing-function:ease-out;transform:scale(1)}}.final-path-node{background-color:var(--final-path-cell-clr)}.final-path-animation{animation:final-path-animation 1s ease-in-out;animation-fill-mode:forwards}@keyframes final-path-animation{0%{transform:translate(0)}10%{transform:translate(-2px,-2px)}20%{transform:translate(2px,-2px)}30%{transform:translate(-2px,2px)}40%{transform:translate(2px,2px)}50%{transform:translate(-2px,-2px)}60%{transform:translate(2px,-2px)}70%{transform:translate(-2px,2px)}80%{transform:translate(-2px,-2px)}90%{transform:translate(2px,-2px)}to{transform:translate(0)}}.wall-node{background-color:var(--wall-cell-clr);animation:adding-walls-animation .3s ease-in-out;animation-fill-mode:forwards}@keyframes adding-walls-animation{0%,to{transform:rotate(0);transform-origin:50% 50%;background-color:var(--wall-cell-clr)}10%{transform:rotate(8deg);background-color:#4d4d4d}20%,40%,60%{transform:rotate(-10deg);background-color:#4d4d4d}30%,50%,70%{transform:rotate(10deg);background-color:#4d4d4d}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}}.user-node{background-color:var(--user-node-clr);animation:user-node-animation .3s ease-in-out;animation-fill-mode:forwards}@keyframes user-node-animation{0%,to{transform:rotate(0);transform-origin:50% 50%;background-color:var(--user-node-clr)}10%{transform:rotate(8deg);background-color:#c76300}20%,40%,60%{transform:rotate(-10deg);background-color:#c76300}30%,50%,70%{transform:rotate(10deg);background-color:#c76300}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}}.node-small{height:var(--cell-width-small);width:var(--cell-width-small)}.node-large{height:var(--cell-width-large);width:var(--cell-width-large)}.side-bar{border-left:1px solid var(--nav-clr);overflow-y:auto;max-width:14rem}.switch{position:relative;z-index:1;display:inline-block;width:36px;height:10px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:10px;width:10px;left:0;bottom:0;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:10px}.slider.round:before{border-radius:50%}.side-bar{z-index:1}.side-bar .header{color:#fff;background-color:var(--body-clr);padding:0 .5em .5em 0}.side-bar .instruction-item{color:#d4d0c9;font-size:1.1rem;font-weight:700;line-height:1.5rem;padding-top:.2em;padding-right:.2em}.path-score{display:flex;justify-content:space-between;padding-bottom:.5rem}.path-score h3{color:#d4d0c9;padding-left:.5em}.path-score input{width:3rem;margin-right:.5em;border-radius:.3em;background-color:#ccc;border:1px solid black;font-size:1rem;text-align:center;font-weight:700;font-style:italic}.user-path-info,.user-path-success,.user-path-error{border:1px solid;margin:10px 0;padding:15px 10px 15px 50px;background-repeat:no-repeat;background-position:10px center}.user-path-info{color:#00529b;background-color:#bde5f8;background-image:url(https://i.imgur.com/ilgqWuX.png)}.user-path-info span{font-style:italic;padding-right:.2em;background-color:#5db1fa}.user-path-success{color:#4f8a10;background-color:#dff2bf;background-image:url(https://i.imgur.com/Q9BGTuy.png)}.user-path-error{color:#d8000c;background-color:#ffbaba;background-image:url(https://i.imgur.com/GnyDvKN.png)}.user-path-btns-container{display:flex}.hover{position:absolute;bottom:20px}.hide{display:none}