@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";*{padding:0;margin:0;box-sizing:border-box;font-family:Outfit}#root{min-height:100vh;animation:fade-in 1.5s}.custom-navbar{background-color:#3a3a3a00;padding:10px 20px;z-index:1000;position:fixed;height:40px;width:100vw;top:0;color:#fff;font-size:1.25rem;text-decoration:none}.material-symbols-outlined{font-size:1.5rem;vertical-align:middle}.me-2{margin-right:.5rem}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}@media (max-width :480px){.custom-navbar{background-color:#161616}}.sidebar{width:230px;background-color:#1d1d1d80;color:#faebd7;display:flex;flex:1;flex-direction:column;padding:20px 10px;box-sizing:border-box;margin-top:40px;left:0;overflow-y:auto;z-index:10;position:fixed;top:0;height:100vh;box-shadow:2px 0 8px #131313;animation:slide-in .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sidebar::-webkit-scrollbar{display:none}@keyframes slide-in{0%{width:0px}to{width:230px}}.sidebar ul{list-style:none;padding:10px}.sidebar ul li{font-size:20px;padding:5px;position:relative}.sidebar ul li:hover{transform:scale(1.05);border-radius:5px;transition:.4s ease}.sidebar ul li:after{content:" ";width:80%;height:2px;position:absolute;top:37px;left:5px;transition:left .4s ease}.sidebar ul li:hover:after{background-color:#0ff;animation:liner .3s ease}@keyframes liner{0%{width:0px}to{width:80%}}.sidebar ul li:before{content:" ";width:2.7px;height:37px;position:absolute;top:2px;left:153px;transition:top .4s ease}.sidebar ul li:hover:before{background-color:#0ff;animation:vert .3s ease}@keyframes vert{0%{height:0px}to{height:37px}}.sidebar ul li span{padding:13px}a{text-decoration:none;color:#faebd7}.sorts{display:none;margin-left:18%;margin-top:0}.sorts span{font-weight:600;margin:0;color:#bbb6b6;font-size:15px;padding:0}.sorts ul li{font-size:14px}.sorts ul li:hover{color:#fff}.sorts ul li:before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;z-index:-1;border-radius:10px}.sorts ul li:hover:after{background-color:transparent}.sorts ul li:hover:before{left:0;background-color:#0ff}.visible{display:block}.layout{display:flex;flex-direction:column;width:100%;height:100%;position:relative;z-index:0;background-position:left;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;overflow-x:hidden}.content{display:flex;flex:1}.main,.title{background:#d4010100;padding:10px;border-radius:8px}.main{min-height:100vh;flex:1;padding:20px;overflow-y:auto;display:inline-flex;justify-content:end;align-items:center;color:#fff}.title{display:inline-block}.titlename{font-size:100px;font-weight:700;margin-right:50px;border-right:5px solid;width:100%;white-space:nowrap;overflow:hidden;animation:typing 3s steps(11),cursor .4s step-end infinite alternate}@keyframes cursor{50%{border-color:transparent}}@keyframes typing{0%{width:0}to{width:100}}.animation::-webkit-scrollbar{display:none}.layout .About_sort .Heading{display:block;font-size:1.5em;margin-block-start:.83em;margin-block-end:.83em;font-weight:700;font-size:30px;text-align:center;padding:5px;color:#0ff}.layout .About_sort{color:#fbfbfb;padding:2vw;font-size:17px;max-width:60vw;position:relative;transition:color .3s ease,transform .3s ease}.About{position:relative;background-color:#1f1f1f;background-position:left;display:inline-block;max-width:55vw;margin-right:5vw;margin-left:7vw;margin-bottom:20px;border-radius:10px}@property --angle{syntax: "<angle>"; initial-value:0deg ; inherits: false;}.About:after,.About:before{content:" ";top:-4px;left:-3px;width:101%;height:101%;border-radius:8px;position:absolute;z-index:-1;background:conic-gradient(from var(--angle),transparent 1%,cyan);animation:cir 2s linear infinite}.About:before{filter:blur(.2rem)}@keyframes cir{0%{--angle:0deg}to{--angle:360deg}}.bton{position:relative;height:40px;width:60px;border:.5px solid cyan;background-color:#fff0;color:#fff;border-radius:5px;transition:color .3s ease,transform .3s ease}.bton:before{content:" ";height:110%;width:110%;position:absolute;left:-2px;top:-1px;z-index:-1}.bton:hover:before{filter:blur(1.5rem);opacity:.5;background-color:#0ff}.bton:hover{transform:scale(1.1);color:#000;background-color:#3bffff;border:.5px solid white}@media (max-width: 768px){.layout,.content{flex-direction:column}.main{padding:10px}.titlename{font-size:8vw;border-right:2px solid}.About{margin-top:5vh;max-width:100%;padding:10px}.About:after{display:none}.Heading{font-size:1.3rem}.bton{width:65px;height:30px;font-size:.8rem}}@media (max-width: 480px){.titlename{font-size:10vw;border-right:1px solid}.vantaa{top:-105vh}.About{max-width:100%;padding:10px;margin:0;border-radius:0}.About:before,.About:after{display:none}.layout .About_sort{max-width:89vw;font-size:15px}.Heading{font-size:25px;text-align:center}.bton{width:71px;height:37px;font-size:18px}}.footeer{width:100%;font-family:Ubuntu,monospace,Courier;color:#afafaf;padding-top:30px;padding-bottom:50px;position:relative;background-color:#161616;font-size:20px;white-space:nowrap}.footer-container{display:flex;flex-direction:row;justify-content:center}.footer-title{color:#d17f3f;font-size:20px}.footer-content{float:left;margin-left:6vw;margin-bottom:15px;vertical-align:top;text-decoration:none}.credits{position:absolute;bottom:10px;white-space:initial;width:100%;text-align:center}.credits span{font-size:15px}@media (max-width: 768px){.footeer{font-size:16px;padding:20px;white-space:normal}.footer-container{flex-direction:column;align-items:center;gap:10px}.footer-content{margin-left:0;text-align:center}.footer-title{font-size:20px}}@media (max-width: 480px){.footeer{font-size:14px;padding:15px}.footer-title{font-size:18px}.credits span{font-size:12px}}.parent{overflow-x:hidden}.bg{background-image:url(/Sorting_Visualizerr/assets/sort1-Chrpsrs2.jpg);background-position:left;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;height:100vh}.graphs{display:flex;justify-content:center;transform:rotate(180deg);top:0;min-height:83vh;margin-left:10px;margin-right:10px;transform:rotateX(180deg)}.graph{transition:height .3s ease;background:linear-gradient(0deg,#23dae4 30%,#290c3a);margin:.5px;display:"inline-block";border-radius:10px}.graph.default{background:linear-gradient(0deg,#23dae4 30%,#290c3a)}.graph.red{background:linear-gradient(0deg,#e51215,#3a0c1d)}.graph.green{background:linear-gradient(0deg,#24e512,#3a0c1d)}.sortop{display:flex;justify-content:space-between;flex-direction:row;margin-top:-3px;margin-bottom:0}.algoname{color:#fff;display:flex;align-items:self-end;margin-left:15vw}.algoname p{font-size:50px;margin-top:33px}.controls{display:flex;justify-content:right;align-items:baseline;margin-top:45px;padding:8px}.btnn{border-radius:5px;border:none;margin-left:5px;height:40px;width:57px;z-index:0;position:relative;transition:background-color .3s ease,color .3s ease}.btnn:after,.btnn:before{content:" ";border-radius:5px;height:100%;width:100%;position:absolute;top:0;left:0;z-index:-1;background-color:#ad3079}.btnn:hover{transform:scale(1.03);border:.5px solid cyan;color:#0ff}.btnn:hover:before{background-color:#0ff;filter:blur(.5rem)}.slider_div{background-color:#fff0;display:flex;flex-direction:column;justify-content:center;margin-left:5px;align-items:center}.slider_div span{font-weight:700;font-size:15px;color:#ffebcd}.slider{width:200px}.slider[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:200px;background-color:transparent}.slider[type=range]:focus{outline-color:#f8b195}.slider[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:#f67280;background:-webkit-linear-gradient(left,rgba(246,114,128,1) 0%,rgba(192,108,132,1) 50%,rgba(53,92,125,1) 100%);background:linear-gradient(to right,#f67280,#c06c84,#355c7d);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#f67280",endColorstr="#355c7d",GradientType=1)}.slider[type=range]::-moz-range-track{-moz-appearance:none;-webkit-appearance:none;appearance:none;height:3px;background:#f67280;background:-moz-linear-gradient(left,rgba(246,114,128,1) 0%,rgba(192,108,132,1) 50%,rgba(53,92,125,1) 100%);background:linear-gradient(to right,#f67280,#c06c84,#355c7d);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#f67280",endColorstr="#355c7d",GradientType=1)}.slider[type=range]::-ms-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:#f67280;background:-moz-linear-gradient(left,rgba(246,114,128,1) 0%,rgba(192,108,132,1) 50%,rgba(53,92,125,1) 100%);background:-webkit-linear-gradient(left,rgba(246,114,128,1) 0%,rgba(192,108,132,1) 50%,rgba(53,92,125,1) 100%);background:linear-gradient(to right,#f67280,#c06c84,#355c7d);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#f67280",endColorstr="#355c7d",GradientType=1)}.slider[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #f8b195;border-radius:50%;height:20px;width:20px;position:relative;bottom:8px;background:#222 url(http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png) center no-repeat;background-size:50%;box-shadow:0 3px 5px #0006;cursor:grab}.slider[type=range]::-moz-range-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:2px solid #f8b195;border-radius:50%;height:20px;width:20px;position:relative;bottom:8px;background:#222 url(http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png) center no-repeat;background-size:50%;box-shadow:0 3px 5px #0006;cursor:grab}.slider[type=range]::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #f8b195;border-radius:50%;height:20px;width:20px;position:relative;bottom:8px;background:#222 url(http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png) center no-repeat;background-size:50%;box-shadow:0 3px 5px #0006;cursor:grab}:is():active{cursor:grabbing}.cu{background:linear-gradient(184deg,#1c1c1c 23%,#005454);align-items:center;display:flex;flex-direction:row}.cu1{display:flex;flex-direction:column}.error-message{background-color:#f003;color:red;padding:10px;margin-top:10px;border-radius:5px;font-weight:700}@media (max-width:480px){.algoname p{font-size:30px;margin-top:43px;margin-left:-43px}.sortop{display:flex;justify-content:flex-start;flex-direction:column;margin-top:0;margin-bottom:0}.bg{background-attachment:scroll}.controls{display:flex;justify-content:flex-start;align-items:flex-end;margin-top:-9px;padding:8px;flex-wrap:wrap;z-index:1}.controls .btnn{width:40px}.graphs{height:79vh;min-height:0vh;margin:0 3.5vw}.graph{margin:0}}@media (max-height:800px){.graphs{height:72.7vh}}.dec{background:linear-gradient(184deg,#1c1c1c 23%,#005454);box-shadow:0 0 20px 5px #00000080;background-position:left;background-size:cover;display:flex;flex-direction:column;padding:30px;color:#faebd7}.top{display:flex;flex-direction:row;justify-content:center}.top .information{margin-right:7.5vw;padding-right:3vw;font-size:17px;max-width:950px;position:relative;margin-bottom:20px}.top{padding:30px}.top .complexity{max-width:500px;background:#0000}.card{position:relative;margin:4vw;background-color:#3a3a3a;color:#f5f5f5;max-width:900px;z-index:0}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.card:after,.card:before{content:"";position:absolute;height:100%;width:100%;background-image:conic-gradient(from var(--angle),transparent 20%,#FF6B1B);top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;padding:3px;border-radius:10px;animation:spin 2s linear infinite}.card:before{filter:blur(1.5rem);opacity:.5}@keyframes spin{0%{--angle: 0deg}to{--angle: 360deg}}.card-text{background-color:#161616;padding:10px}.nav-item{cursor:pointer}.nav-link{background-color:#353535;margin-right:2px;color:#ff6b1b}.nav-link:hover{border:none;color:#d15c1f}.act{background-color:#161616}td,th{padding:8px;font-size:18px;text-align:left;position:relative}tr:not(:last-child){border-bottom:1px solid #D17F3C}tr:hover{box-shadow:0 0 10px 5px #d3d3d380;transition:box-shadow .3s ease-in-out}td:not(:last-child),th:not(:last-child){border-right:1px solid #D17F3C}@media (max-width:480px){.top{flex-direction:column}.top .information{margin-right:0;padding-right:0;font-size:15px}td{font-size:15px}.card{margin:10px 0}.dec{padding:0}}.back{background-position:left;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-color:#1a1a1a;min-height:100vh;padding:1vh}.compare{display:flex;min-width:50vw;min-height:77vh;flex-direction:row;justify-content:center;align-items:center;border:2px solid white;margin-top:14vh}.controlls{position:absolute;height:10vh;width:80%;background-color:#1a1a1a;top:16vh;display:flex;justify-content:center;align-items:center;flex-direction:row}.controlls button{border-radius:5px;margin:8px;height:30px;width:45px;position:relative;background-color:transparent;color:#fff;border:1px solid cyan;transition:background-color .3s ease,color .3s ease,transform .3s ease}.controlls button:hover{transform:scale(1.1)}.graph1,.graph2{min-width:47vw;min-height:67vh;display:flex;justify-content:center;align-items:flex-end}.graph1{border-right:2px solid white}.bars{transition:height .3s ease;background-color:#0ff;display:inline-block;margin:.5px;border-radius:3px}.bars.red{background-color:red}.bars.green{background-color:green}.bars.default{background-color:#0ff}.controlls select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:10px;background-color:#303030;color:#fff;padding:10px;border:none}.algoselector{margin-right:9vw}.algoselector2{margin-left:9vw}.Analysis{display:flex;flex-direction:row;border:1px solid white;height:40vh;width:100%;margin-top:8vh}.info-graph1{height:40vh;border-right:1px solid white;width:49vw;color:#fff;padding:15px;text-align:justify}.info-graph2{height:40vh;width:49vw;color:#fff;padding:15px;text-align:justify}.text{margin-left:4vw}@media (max-width: 480px){.compare{flex-direction:column;min-height:auto;width:100%;border:none}.graph1,.graph2{width:100%;border-bottom:2px solid white}.graph1{border-right:none;margin-top:27vh}.controlls{padding:0;height:28vh;flex-wrap:wrap}.controlls button{width:50px;height:28px;font-size:.7rem}.bars{width:5%;margin:0}}