#root{max-width:1280px;margin:0 auto;padding:2rem}.text-center{text-align:center}.container{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.puzzle-wrapper{width:100%;display:flex;align-items:center;justify-content:space-around}.grid{position:relative;width:fit-content;box-shadow:0 0 20px 4px #00000030;display:grid;grid-template-columns:repeat(4,80px);align-items:center;justify-items:center;border-radius:18px;padding:12px;gap:10px;background-color:#aebee3}.grid.active:after{content:"Not Solvable!";position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background-color:#d3d3d3c3;font-size:24px;font-weight:600;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.btn-container{margin:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.btn{width:12rem;padding:12px 8px;font-size:18px;font-weight:700;border:none;cursor:pointer;border-radius:20px}.btn-shuffle{background-color:purple}.btn-solve{background-color:#87cefa}.btn-reset{background-color:orange}.heading{font-size:x-large}.instructions-container{display:flex;flex-direction:column;align-items:start;justify-content:flex-start}.instructions-container>p{margin:0}@media screen and (max-width:768px){.puzzle-wrapper{flex-direction:column}}.tile{width:80px;height:80px;border:1px solid lightskyblue;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;background-color:#f0f8ff}.tile:hover{cursor:pointer;background-color:#87cefa}.tile.empty{background-color:#696969}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000;background-color:#f5f5f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}