@font-face{font-family:"Raleway";font-style:normal;font-weight:400;font-display:swap;src:url(/sorting-visualizer/static/media/Raleway-Regular.9942588a.ttf)}@font-face{font-family:"Raleway";font-style:normal;font-weight:700;font-display:swap;src:url(/sorting-visualizer/static/media/Raleway-Bold.f49f3d2d.ttf)}@font-face{font-family:"Raleway";font-style:normal;font-weight:300;font-display:swap;src:url(/sorting-visualizer/static/media/Raleway-Light.466d154f.ttf)}@font-face{font-family:"Pacifico";font-style:normal;font-weight:400;font-display:swap;src:url(/sorting-visualizer/static/media/Pacifico-Regular.9b94499c.ttf)}*,:after,:before{box-sizing:border-box}html{scroll-behavior:smooth}body,html{margin:0;padding:0}body{font-family:Raleway;background-color:#2b4162;padding-bottom:8rem}ul{list-style:none;padding:0}::-moz-focus-inner,::-moz-focus-outer{border:0}::-webkit-scrollbar{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}:disabled{opacity:1%;cursor:not-allowed}@media (hover:none){:disabled{opacity:1%}}::selection{color:#2b4162;background-color:#fa9f42}.hide{display:none}input,select{outline:none}.sorted{-webkit-animation:sorted .8s forwards;animation:sorted .8s forwards;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes sorted{0%{transform:scale(1)}50%{transform:scale(.99)}75%{transform:scale(1.01)}to{transform:scale(1)}}@keyframes sorted{0%{transform:scale(1)}50%{transform:scale(.99)}75%{transform:scale(1.01)}to{transform:scale(1)}}.shake{-webkit-animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;perspective:1000px}@-webkit-keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.card{background-color:#e0e0e2;border-radius:.5rem;width:100%;height:100%;margin:1rem auto;padding:.5rem;box-shadow:.7rem .7rem .5rem rgba(0,0,0,.1)}.card:first-of-type{margin-top:0}.card h2.title{border-bottom:2px solid #fa9f42;padding-bottom:.8rem;width:80%;margin:1.3rem auto}.controls{text-align:center;position:relative;margin:0 1rem;position:-webkit-sticky;position:sticky;top:0}.controls .error-message{position:absolute;top:27%;left:50%;transform:translate(-50%,-70%);opacity:0;z-index:-1;transition:all .4s ease-out;color:#721817;font-size:.7rem;font-weight:700;width:60%;border-radius:.5rem;padding-top:.1rem;background-color:#fa9f42}.controls .show-error{z-index:0;top:35.5%;opacity:1}.bars-container{margin-top:-1.2rem}.bars{margin:3rem 0 1rem;height:300px;display:flex;justify-content:center;align-items:flex-end;position:relative}.invalid-inputs{top:60%;transition:all .4s ease-out .2s}.invalid-inputs,.invalid-inputs h1{position:absolute;left:50%;transform:translate(-50%,-50%)}.invalid-inputs h1{top:27%;text-transform:uppercase;color:#721817!important;font-weight:700!important;font-size:2rem;width:200%!important}.svg{width:100%;margin:auto}.hide-invalid{top:50%;opacity:0}@media (max-width:480px){.invalid-inputs h1{top:30%;font-size:1.7rem}}@media (max-width:413px){.invalid-inputs h1{top:33%;font-size:1.6rem}}@media (max-width:390px){.invalid-inputs h1{font-size:1.5rem}}@media (max-width:368px){.invalid-inputs h1{font-size:1.4rem}}@media (max-width:346px){.invalid-inputs h1{top:36%;font-size:1.3rem}}.bar{display:inline-block;width:20%;border-radius:.5rem;margin:.5rem .1rem;background-color:#577590;box-shadow:.3rem .5rem .5rem rgba(0,0,0,.2);position:relative}.bar p{font-size:.8rem;margin:0 0 .5rem;color:#e0e0e2;position:absolute;top:-1.5rem;left:50%;transform:translateX(-50%);text-shadow:.25rem .25rem .25rem rgba(0,0,0,.5)}@media (max-width:520px){.bar p{font-size:.7rem}}@media (max-width:475px){.bar p{font-size:.6rem}}@media (max-width:425px){.bar p{font-size:.5rem}}@media (max-width:375px){.bar p{font-size:.4rem}}.button{padding:.5rem 1rem;color:#e0e0e2;background-color:#0b6e4f;border:none;font-family:inherit;font-size:.8rem;border-radius:.5rem;cursor:pointer;outline:none;margin:.5rem 0;transition:all .2s}.button:last-child{margin-bottom:0}.button:hover{transform:translateY(-.1rem);box-shadow:.1rem .1rem .5rem rgba(0,0,0,.2)}.button:active{transform:translateY(0);box-shadow:none}.button:disabled{opacity:1%;cursor:not-allowed}.button.burgundy{background-color:#721817}.button.new-array{width:100%;padding:1rem;font-size:1rem;border-radius:.7rem}.button::selection{color:inherit;background-color:transparent}.button.play-control{padding:1rem 1.5rem;width:50%;font-size:1.4rem}.button.decrement,.button.increment{width:3rem;background-color:#2b4162;color:#e0e0e2;border-radius:.5rem;border:3px solid #fa9f42;cursor:pointer;outline:none;padding:.5rem 0}.button.decrement:hover,.button.increment:hover{transform:none;box-shadow:none}.button.decrement:active,.button.increment:active{color:#721817}.button.decrement:disabled,.button.increment:disabled{cursor:not-allowed}@media (hover:none){.button:hover{transform:none;box-shadow:none}.button:disabled{opacity:1%}}@media (max-width:425px){.button.play-control{padding:.7rem 1.5rem;font-size:1.2rem}}.color-legend{display:flex;justify-content:space-evenly;flex-wrap:wrap}.color-wheel{background:url(/sorting-visualizer/static/media/color-wheel.8cf82dbd.PNG) no-repeat 50%/cover;height:10px;width:10px;margin-right:.5rem}.color-status{display:flex;align-items:center;margin-bottom:1rem;margin-right:.5rem}.color-square{height:10px;width:10px;margin-right:.5rem}.color-desc{color:#fff;font-size:.7rem;display:flex;align-items:center}.play-controls{display:flex;background-color:#fa9f42;flex-wrap:wrap;border-radius:1rem;margin:.5rem auto 0;padding:3rem 1rem .5rem;width:100%}.play-controls>*{width:100%}.play-controls .buttons{display:flex;justify-content:space-around;align-items:center;font-size:2rem;color:#721817;height:4.5rem}.play-controls .buttons svg{width:30%}.play-controls svg{cursor:pointer;transform:scale(.2)}.play-controls svg:active{color:#0b6e4f}.play-controls svg:disabled{opacity:1%;cursor:not-allowed}@media (max-width:600px){.play-controls{width:100%}}.dropdown{width:100%;background-color:#fa9f42;color:#e0e0e2;border-radius:1rem;padding:.6rem 0 1rem;margin-bottom:2rem;cursor:pointer;box-shadow:.5rem .5rem 1rem rgba(0,0,0,.2);position:relative}.dropdown:last-child{margin-bottom:0}.dropdown.small{background-color:#2b4162;box-shadow:none}label{display:inline-block;color:#721817;font-weight:700;margin-bottom:1rem;font-size:1.2rem}.dropdown h2{margin:.2rem 0 0;font-weight:400;position:relative}.dropdown.small h2{font-size:1rem}.dropdown ul{width:100%;background-color:#721817;border-radius:1rem;overflow:hidden;transition:all .3s ease-out;position:absolute;top:80%;z-index:20}.dropdown.small ul{background-color:#fa9f42}@media (hover:none){.dropdown ul{height:16.5rem}}.dropdown svg{transform:rotate(0);position:absolute;top:0;right:5%;color:#721817;transition:transform .3s ease-out;height:100%}.dropdown.small svg{color:#fa9f42}.dropdown .flip{transform:rotate(180deg)}.dropdown ul li:not(:last-of-type){border-bottom:1px solid #829191}.dropdown ul li{padding:1rem 0;background-color:transparent;border:none;width:100%;cursor:pointer;color:inherit;font-family:inherit;font-size:1rem;transition:all .2s}.dropdown.small ul li{font-size:.8rem;padding:1.2rem 0}.dropdown ul li:focus{outline:none}.dropdown ul li:hover{color:#fa9f42}.dropdown.small ul li:hover{color:#721817}.dropdown .collapsed{height:0}.range{display:flex;flex-direction:column}.range:not(:last-of-type),.range label{margin-bottom:1rem}.range label{color:#721817;font-weight:700;font-size:1.2rem}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:100%;height:2em;height:3em;padding:.375em;background-color:#2b4162;border-radius:2em;outline:none;border:2px solid #fa9f42;cursor:pointer}input[type=range]:disabled{cursor:not-allowed}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;z-index:10;width:1.5em;height:1.5em;width:2.3em;height:2.3em;background-color:#fa9f42;border-radius:50%;cursor:pointer}input[type=range]::-moz-range-thumb{z-index:10;width:1.5em;height:1.5em;width:2.3em;height:2.3em;background-color:#fa9f42;border:none;border-radius:50%;cursor:pointer}input[type=range]::-moz-range-track{background-color:transparent}.range-labels{display:flex;justify-content:space-between;font-size:.9rem;font-weight:700;color:#2b4162}.range-labels p{margin:.5rem 0 0}#sortSpeed{direction:rtl}.counter{display:flex;justify-content:space-around;align-items:flex-start;width:60%;margin:1.3rem auto}.counter .counter-clicked{color:#721817}input[type=number]{text-align:center;font-family:inherit;border-radius:.5rem;border:3px solid #fa9f42;color:#e0e0e2;background-color:#2b4162;width:30%;padding:.8rem .5rem;margin-top:0;height:100%;align-self:center}.SortingVisualizer{display:flex;flex-wrap:wrap;justify-content:space-between;margin:auto;position:relative}.Bars{text-align:center;width:60%;padding:0 1rem;margin:0}.Controls{width:40%}@media (max-width:966px){.Bars{margin-bottom:1rem}.Bars,.Controls{width:100%}}input#playRange{display:block;position:absolute;top:-24%;width:90%!important;margin:0 auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:100%;height:.5em;padding:0;background-color:#2b4162;border-radius:2em;border:none;outline:none;cursor:pointer}input#playRange:disabled{cursor:not-allowed}input#playRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;z-index:10;width:1.5em;height:1.5em;background-color:#721817;border-radius:50%;cursor:pointer}input#playRange::-moz-range-thumb{z-index:10;width:1.5em;height:1.5em;background-color:#721817;border:none;border-radius:50%;cursor:pointer}input#playRange::-moz-range-track{background-color:transparent}.Layout_Layout__2BpO9{text-align:center}.Layout_Layout__2BpO9 header{font-family:"Pacifico";letter-spacing:.3rem;color:#577590;text-shadow:.25rem .25rem .25rem rgba(0,0,0,.2)}.Layout_Layout__2BpO9 header>h1{display:inline-block;border-bottom:5px groove #bf4e30;padding:.3rem}
/*# sourceMappingURL=main.4dcf158e.chunk.css.map */