*{margin:0;padding:0;box-sizing:border-box}:root{--background: #1b2430;--primary: #a66eff;--text: #d3d3d3;--hover: #ffffff14;--backgroundSecondary: #252d3a}.sorting{background-color:var(--background);color:var(--primary);height:100vh;width:100%;padding:20px;overflow:scroll}.sorting::-webkit-scrollbar{width:1vh}.sorting::-webkit-scrollbar-track{background:transparent}.sorting::-webkit-scrollbar-thumb{background-color:#a76cff74}.sorting::-webkit-scrollbar-thumb:hover{background-color:#a76cffe9}.sorting::-webkit-scrollbar-corner{background:transparent}.sorting .main-heading{font-size:40px;font-weight:900;text-align:center;padding:10px;margin-bottom:10px;color:var(--text);font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;background-color:var(--backgroundSecondary)}.sorting .navbar{display:flex;flex-direction:column;gap:15px;padding:15px 20px;border-radius:10px;background-color:var(--backgroundSecondary);margin-bottom:10px}.sorting .navbar .range-container{width:100%;padding:0 10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px}.sorting .navbar .range-container label{font-size:18px;color:var(--text);font-weight:700}.sorting .navbar .range-container .slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;border-radius:2.5px;background:#d3d3d3;outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.sorting .navbar .range-container .slider:hover{opacity:1}.sorting .navbar .range-container .slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--primary);cursor:pointer;transition:.1s ease-in-out}.sorting .navbar .range-container .slider::-webkit-slider-thumb:hover{width:17.5px;height:17.5px;transition:.1s ease-in-out}.sorting .navbar .range-container *{width:30%}.sorting .navbar .buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.sorting .navbar .buttons button{border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s;background-color:#8431ff;border-radius:10px;color:#fff;font-weight:700;transition:all .2s}.sorting .navbar .buttons button:hover{background-color:#9762e6;transform:translateY(-.25rem)}.sorting .navbar .buttons button:focus,.sorting .navbar .buttons button :focus-visible{outline:4px auto -webkit-focus-ring-color}.sorting .navbar .buttons .generate{background-color:var(--text);color:#491a90}.sorting .navbar .buttons .generate:hover{background-color:#d3d3d3c6}@media screen and (max-width: 500px){.sorting .navbar .buttons{flex-direction:column}}.sorting .main{display:flex;flex-direction:column;align-items:center;background-color:var(--backgroundSecondary)}.sorting .main .heading{text-align:center;padding:20px 0;color:var(--text);font-weight:700;font-size:2rem;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.sorting .main .sorting-container{display:flex;width:80%;flex-direction:row;gap:2px;align-items:flex-end;justify-content:center;height:450px;padding:20px 20px 40px;border-radius:10px}.sorting .main .sorting-container .arrayBar{background-color:var(--primary);border-radius:5px;width:12px}@media screen and (max-width: 992px){.sorting .main .sorting-container{width:90%;gap:1px}}