.app{display:flex;flex-direction:column;justify-content:center;min-height:100vh}.app .link{text-decoration:none;color:inherit}.app .submit-button{display:flex;align-items:center;justify-content:center;background-color:#3f915a;font-size:12px;padding:10px 45px;border:1px solid transparent;border-radius:8px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer}.app .submit-button:hover{background-color:#15782e}.app .navBar{height:65px;display:flex;justify-content:space-between;align-items:center;background-color:#3f915a;padding:0 20px;flex-shrink:0}.app .navBar h1{color:#eee}.app .navBar h1:hover{color:#000}.app .navBar .navLinks{display:flex;align-items:center;gap:25px;height:65px}.app .navBar .navLinks .link{font-size:20px;color:#eee;display:flex;justify-content:center;align-items:center;height:100%;padding:0 5px}.app .navBar .navLinks .link:hover{background-color:#15782e}.app .navBar .navLinks .submit-button{background-color:#eee;color:#15782e;font-size:13px;padding:10px 30px;font:bold;border:1px solid}@media (max-width: 600px){.app .navBar{height:45px;padding:0 5px}.app .navBar h1{font-size:17px}.app .navBar .navLinks{gap:2px;height:45px}.app .navBar .navLinks .link{font-size:16px}.app .navBar .navLinks .submit-button{font-size:12px;padding:5px}}.app .page-container{flex-grow:1;display:flex;flex-direction:column}.app .page-container .home{display:flex;justify-content:center;padding:20px}.app .page-container .home .home-cards{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:20px;max-width:1000px;width:100%}.app .page-container .home .home-cards .home-card{background-color:#f9f9f9;border-radius:10px;box-shadow:0 4px 8px #0000001a;padding:20px;text-align:center;transition:transform .3s ease}.app .page-container .home .home-cards .home-card:hover{transform:translateY(-5px);background-color:#dbebe3}.app .page-container .home .home-cards .home-card img{width:100%;height:350px;object-fit:cover;border-radius:8px 8px 0 0}.app .page-container .home .home-cards .home-card h3{font-size:1.5rem;margin:15px 0}.app .page-container .home .home-cards .home-card p{font-size:1rem;margin-bottom:20px}.app .page-container .home .home-cards .home-card .submit-button{padding:10px 5px;width:100%;font-size:13px;color:#fff;border:1px solid;border-radius:0}@media (max-width: 600px){.app .page-container .home{padding:0}.app .page-container .home .home-cards{grid-template-columns:repeat(1,1fr);max-width:550px}.app .page-container .home .home-cards .home-card{padding:7px}.app .page-container .home .home-cards .home-card img{height:300px}}.app .footer-container{background-color:#3f915a;display:flex;height:70px;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}.app .footer-container .social-icons{display:flex;gap:15px;margin-bottom:10px}.app .footer-container .social-icons .icon{color:#eee;size:10px}.app .footer-container span{font-size:18px;color:#eee}.app .register-page{display:flex;flex-grow:1;align-items:center;justify-content:center}.app .register-page .auth-container{border:1px solid;border-radius:30px;box-shadow:0 5px 15px #00000059;height:480px;width:680px}.app .register-page .auth-container .register-form-container{display:flex;flex-direction:row;gap:10px;height:100%}.app .register-page .auth-container .register-form-container .register-form{flex:3;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:7px}.app .register-page .auth-container .register-form-container .register-form h1{color:#3f915a}.app .register-page .auth-container .register-form-container .register-form input{background-color:#eee;border:solid 1px rgb(63,145,90);margin:13px 5px;padding:10px 15px;font-size:13px;border-radius:8px;width:220px}.app .register-page .auth-container .register-form-container .register-form .submit-button{margin-top:13px;width:100px;color:#fff}.app .register-page .auth-container .register-form-container .register-form .gmail-button{font-size:12px;padding:10px 45px;border:1px solid;font-weight:600;color:#3f915a;letter-spacing:.5px;cursor:pointer;margin-top:15px;width:250px}.app .register-page .auth-container .register-form-container .register-info{flex:4;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#3f915a;border-radius:150px 30px 30px 150px;gap:10px}.app .register-page .auth-container .register-form-container .register-info .submit-button{color:#fff;border:2px solid}.app .register-page .auth-container .register-form-container .register-info h2{color:#fff}.app .register-page .auth-container .register-form-container .register-info span{font-size:17px;color:#fff}.app .login-page{display:flex;flex-grow:1;align-items:center;justify-content:center}.app .login-page .auth-container{border:1px solid;border-radius:30px;box-shadow:0 5px 15px #00000059;height:480px;width:680px}.app .login-page .auth-container .login-form-container{display:flex;flex-direction:row;gap:10px;height:100%}.app .login-page .auth-container .login-form-container .login-form{flex:3;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:7px}.app .login-page .auth-container .login-form-container .login-form h1{color:#3f915a;margin-bottom:20px}.app .login-page .auth-container .login-form-container .login-form input{background-color:#eee;border:solid 1px rgb(63,145,90);margin:13px 5px;padding:10px 15px;font-size:13px;border-radius:8px;width:220px}.app .login-page .auth-container .login-form-container .login-form .submit-button{margin-top:13px;width:100px;color:#fff}.app .login-page .auth-container .login-form-container .login-form .gmail-button{font-size:12px;padding:10px 30px;border:1px solid;font-weight:600;color:#3f915a;letter-spacing:.5px;cursor:pointer;margin-top:15px;width:250px}.app .login-page .auth-container .login-form-container .login-info{flex:4;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#3f915a;border-radius:150px 30px 30px 150px;gap:10px}.app .login-page .auth-container .login-form-container .login-info .submit-button{color:#fff;border:2px solid}.app .login-page .auth-container .login-form-container .login-info h2{color:#fff}.app .login-page .auth-container .login-form-container .login-info span{font-size:17px;color:#fff}.sorting-visualizer{display:flex;flex-direction:column;flex-grow:1}.sorting-visualizer .setting{height:70px;border:1px solid;display:flex;align-items:center;justify-content:center;flex-direction:row}.sorting-visualizer .setting .checkbox-container{display:flex;gap:5px}.sorting-visualizer .setting .checkbox-container input{cursor:pointer}.sorting-visualizer .setting button{width:80px;height:30px;font-size:12px;margin:0 7px;border:1px solid;color:#3f915a;letter-spacing:.5px;cursor:pointer}.sorting-visualizer .setting button:hover{background-color:#bed8c5}.sorting-visualizer .setting .special-button{background-color:#3f915a;color:#eee}.sorting-visualizer .setting .adjustSpeed{margin:0 5px}.sorting-visualizer .setting .adjustSpeed select{height:30px;border:1px solid rgb(63,145,90);width:100px;background-color:#f5f5f5;color:#3f915a;padding:0 5px;font-size:12px;cursor:pointer}.sorting-visualizer .setting .adjustSpeed select:hover{background-color:#bed8c5}.sorting-visualizer .setting .array-generator{margin:0 10px;width:170px}.sorting-visualizer .setting .array-generator .slider-container{display:flex;justify-content:center;align-items:center;gap:5px}.sorting-visualizer .setting .array-generator .slider-container p{width:20px}.sorting-visualizer .setting .array-generator .userArrayInput{height:30px}@media (max-width: 1120px){.sorting-visualizer .setting .array-generator{margin:0 6px;width:130px}.sorting-visualizer .setting .array-generator input{width:120px}.sorting-visualizer .setting button{width:65px;font-size:11px;margin:0 5px}}@media (max-width: 830px){.sorting-visualizer .setting .checkbox-container{font-size:12px;gap:2px}.sorting-visualizer .setting .array-generator{margin:0 3px;width:100px}.sorting-visualizer .setting .array-generator p{font-size:10px}.sorting-visualizer .setting .array-generator input{width:90px}.sorting-visualizer .setting .adjustSpeed{margin:0 3px}.sorting-visualizer .setting .adjustSpeed select{width:80px;font-size:10px}.sorting-visualizer .setting button{width:45px;font-size:8px;margin:0 2px;padding:0}}.sorting-visualizer .algoInfo{height:34px;display:flex;align-items:center;justify-content:center}.sorting-visualizer .interface{height:350px;display:flex;align-items:flex-end;gap:5px;justify-content:center}.sorting-visualizer .interface .sorting-bar{background-color:#304962;width:40px;display:flex;color:#eee;justify-content:center;transition:height .3s ease}.sorting-visualizer .interface .sorting-bar.comparing{background-color:#ef3602}.sorting-visualizer .interface .sorting-bar.swapped{background-color:#6c04f3}.sorting-visualizer .interface .sorting-bar.pivot{background-color:#1115e1}.sorting-visualizer .interface .sorting-bar.sorted{background-color:#3f915a}@media (max-width: 1100px){.sorting-visualizer .interface .sorting-bar{width:25px}}@media (max-width: 830px){.sorting-visualizer .interface{gap:2px}.sorting-visualizer .interface .sorting-bar{width:19px}}@media (min-height: 840px){.sorting-visualizer .interface{height:420px;margin-bottom:30px}}.sorting-visualizer .explanation{display:flex;flex-direction:row;height:280px;margin-top:30px}.sorting-visualizer .explanation .word-explanation{flex:4;height:100%;background-color:#bed8c5;padding:10px 15px;overflow-x:auto;box-sizing:border-box}.sorting-visualizer .explanation .word-explanation h2{display:flex;align-items:center;justify-content:center;margin-bottom:10px}.sorting-visualizer .explanation .word-explanation .step{font-size:21px;margin-bottom:5px}.sorting-visualizer .explanation .code-explanation{flex:2;background-color:#f6faf7;margin:0;height:100%;padding:0 0 0 20px;overflow-x:auto}.sorting-visualizer .explanation .code-explanation code{font-family:Monaco,Consolas,monospace;color:#24292e;font-size:16px}code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#9a6e3a;background:#ffffff80}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function,.token.class-name{color:#dd4a68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.DS-visualizer{display:flex;flex-direction:column;flex-grow:1}.DS-visualizer .setting{height:70px;border:1px solid;display:flex;align-items:center;justify-content:center;flex-direction:row}.DS-visualizer .setting button{width:80px;height:30px;font-size:12px;margin:0 7px;border:1px solid;color:#3f915a;letter-spacing:.5px;cursor:pointer}.DS-visualizer .setting button:hover{background-color:#bed8c5}.DS-visualizer .setting .special-button{background-color:#3f915a;color:#eee}.DS-visualizer .setting .selectDS{margin:0 5px}.DS-visualizer .setting .selectDS select{height:30px;border:1px solid rgb(63,145,90);width:100px;background-color:#f5f5f5;color:#3f915a;padding:0 5px;font-size:12px;cursor:pointer}.DS-visualizer .setting .selectDS select:hover{background-color:#bed8c5}.DS-visualizer .algoInfo{height:34px;display:flex;align-items:center;justify-content:center}.DS-visualizer .stack-interface{height:350px;display:flex;align-items:flex-end;justify-content:center}.DS-visualizer .stack-interface .stack-container{width:300px;height:310px;display:flex;flex-direction:column-reverse;align-items:center;margin-bottom:20px}.DS-visualizer .stack-interface .stack-container .stack-element{width:70%;height:30px;background-color:#bed8c5;border:1px solid #000;margin:3px 0;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in}.DS-visualizer .stack-interface .stack-container .stack-element.peeked{background-color:#15782e}.DS-visualizer .stack-interface .stack-container .stack-element.dropping-diagonal{animation:drop-diagonal .6s ease-in-out forwards}@keyframes drop-diagonal{0%{transform:translate(-50px,-50px)}to{transform:translate(0)}}.DS-visualizer .stack-interface .stack-container .stack-element.popping-diagonal{animation:pop-diagonal .6s ease-in-out forwards}@keyframes pop-diagonal{0%{transform:translate(0)}to{transform:translate(-50px,-50px)}}.DS-visualizer .queue-interface{height:350px;display:flex;align-items:center;justify-content:center}.DS-visualizer .queue-interface .queue-container{display:flex;width:400px;position:relative;margin-bottom:20px}.DS-visualizer .queue-interface .queue-container .queue-block{width:50px;height:50px;background-color:#bed8c5;border:.2px solid #000;display:flex;align-items:center;justify-content:center}.DS-visualizer .queue-interface .queue-container .queue-block.peeked{background-color:#15782e}.DS-visualizer .queue-interface .queue-container .queue-block.enqueue-animation{position:absolute;width:50px;height:50px;background-color:#bed8c5;border:1px solid black;display:flex;align-items:center;justify-content:center;z-index:10;animation:drop-into-queue .6s ease-in-out forwards;transition:left .6s ease-in-out}@keyframes drop-into-queue{0%{transform:translateY(0)}to{transform:translateY(70px)}}.DS-visualizer .queue-interface .queue-container .queue-block.dequeue-animation{position:absolute;width:50px;height:50px;background-color:#bed8c5;border:1px solid black;display:flex;align-items:center;justify-content:center;z-index:10;animation:dequeue-move .6s ease-in-out forwards}@keyframes dequeue-move{0%{transform:translateY(0)}to{transform:translateY(-60px)}}.DS-visualizer .explanation-container{height:280px;margin-top:20px;background-color:#bed8c5;overflow-x:auto}.DS-visualizer .explanation-container h1{display:flex;align-items:center;justify-content:center;margin-bottom:10px;size:25px;text-transform:uppercase}.DS-visualizer .explanation-container p{text-indent:40px;font-size:22px;padding:0 10px;margin-bottom:10px}.DS-visualizer .explanation-container .DS-operation{padding:5px 10px;font-size:22px}.my-sorting-visualizer{display:flex;flex-direction:column;flex-grow:1}.my-sorting-visualizer .setting{height:70px;border:1px solid;display:flex;align-items:center;justify-content:center;flex-direction:row}.my-sorting-visualizer .setting button{width:80px;height:30px;font-size:12px;margin:0 7px;border:1px solid;color:#3f915a;letter-spacing:.5px;cursor:pointer}.my-sorting-visualizer .setting button:hover{background-color:#bed8c5}.my-sorting-visualizer .setting .adjustSpeed{margin:0 5px}.my-sorting-visualizer .setting .adjustSpeed select{height:30px;border:1px solid rgb(63,145,90);width:100px;background-color:#f5f5f5;color:#3f915a;padding:0 5px;font-size:12px;cursor:pointer}.my-sorting-visualizer .setting .adjustSpeed select:hover{background-color:#bed8c5}.my-sorting-visualizer .setting .slider-container{margin:0 10px;display:flex;justify-content:center;align-items:center;gap:5px}.my-sorting-visualizer .setting .slider-container p{width:20px}.my-sorting-visualizer .algoInfo{height:34px;display:flex;align-items:center;justify-content:center}.my-sorting-visualizer .interface{height:350px;display:flex;align-items:flex-end;gap:5px;justify-content:center}.my-sorting-visualizer .interface .sorting-bar{background-color:#304962;width:40px;transition:height .3s ease}.my-sorting-visualizer .interface .sorting-bar.comparing{background-color:#ef3602}.my-sorting-visualizer .interface .sorting-bar.swapped{background-color:#6c04f3}.my-sorting-visualizer .interface .sorting-bar.sorted{background-color:#3f915a}@media (max-width: 1100px){.my-sorting-visualizer .interface .sorting-bar{width:25px}}@media (max-width: 830px){.my-sorting-visualizer .interface{gap:2px}.my-sorting-visualizer .interface .sorting-bar{width:19px}}.my-sorting-visualizer .code-implementaion-container{margin-top:30px;height:500px;padding:0;display:flex;flex-direction:row}.my-sorting-visualizer .code-implementaion-container .code-editor-container{flex:3;height:100%}.my-sorting-visualizer .code-implementaion-container .implementation-guide{flex:2;background-color:#bed8c5;height:100%;padding:10px;box-sizing:border-box;overflow-x:auto}.my-sorting-visualizer .code-implementaion-container .implementation-guide h2{display:flex;align-items:center;justify-content:center;margin-bottom:5px}.my-sorting-visualizer .code-implementaion-container .implementation-guide p{font-size:18px;margin-bottom:10px}.my-sorting-visualizer .code-implementaion-container .implementation-guide h3{text-indent:20px}.my-sorting-visualizer .code-implementaion-container .implementation-guide li{font-size:17px}@media (max-width: 1100px){.my-sorting-visualizer .code-implementaion-container{height:600px;flex-direction:column}.my-sorting-visualizer .code-implementaion-container .code-editor-container,.my-sorting-visualizer .code-implementaion-container .implementation-guide{flex:unset;height:300px}}.PathFinder{align-items:center;justify-content:center;display:flex;flex-direction:row;gap:20px;margin:8px 5px;background-color:#eeeff0;flex-grow:1}.PathFinder .buttons{display:inline-block;outline:0;border:0;cursor:pointer;background:#fcfcfd;box-shadow:0 2px 4px #2d234266,0 7px 13px -3px #2d23424d,inset 0 -3px #d6d6e7;height:48px;padding:5px;font-size:16px;border-radius:6px;color:#36395a}.PathFinder .buttons.red{color:red;font-weight:700}.PathFinder .buttons.selected{background:#38b048;box-shadow:0 2px 4px #72ad8566,0 7px 13px -3px #267c444d,inset 0 -3px #0d933e}.PathFinder .setting{flex:1;display:flex;flex-direction:column;height:90vh;align-items:center;gap:25px;border:solid .1mm gray;border-radius:10px;box-shadow:#00000040 0 25px 50px -12px;overflow:auto;background-color:#dbebe3}.PathFinder .setting .title-h1{margin-top:15px;margin-bottom:5px;font-style:italic}.PathFinder .setting .buttons-container{width:100%;display:flex;align-items:center;justify-content:center;gap:5px}.PathFinder .setting .label-container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;width:150px;margin-left:50px}.PathFinder .setting .label-container .icon{width:35px;height:35px}.PathFinder .setting .label-container .icon.start{background-color:#0f0}.PathFinder .setting .label-container .icon.end{background-color:#bd1010}.PathFinder .setting .label-container .icon.wall{background-color:#000}.PathFinder .setting .label-container .icon.visited{background-color:#04f7f7}.PathFinder .setting .label-container .icon.path{background-color:#0099f9}.PathFinder .interface{flex:5;display:flex;height:90vh;overflow:auto;flex-direction:column;align-items:center;background-color:#dbebe3;border:solid .1mm gray;border-radius:10px;box-shadow:#00000040 0 25px 50px -12px}.PathFinder .interface .message-Container{margin-top:10px;font-size:17px}.PathFinder .interface .gridContainer{display:grid;gap:1px;margin-top:15px;margin-bottom:10px}.PathFinder .interface .gridContainer .grid-item{border:1.5px solid #e1d8d8}.PathFinder .interface .gridContainer .grid-item.unvisited{background-color:#fcfcfd}.PathFinder .interface .gridContainer .grid-item.startPoint{background-color:#0f0}.PathFinder .interface .gridContainer .grid-item.endPoint{background-color:#bd1010}.PathFinder .interface .gridContainer .grid-item.wall{animation:constructing-animation .5s ease-out forwards}@keyframes constructing-animation{0%{background-color:#7c818100;box-shadow:0 0 #212121b3}50%{background-color:#16181880;box-shadow:0 0 10px 5px #2c2d2d80}to{background-color:#000;box-shadow:0 0 20px 10px #04040400}}.PathFinder .interface .gridContainer .grid-item.visited{animation:spreading-animation 1s ease-out forwards}@keyframes spreading-animation{0%{background-color:#b7cece00;box-shadow:0 0 #f0f0f0b3}50%{background-color:#58c0c080;box-shadow:0 0 10px 5px #1aebeb80}to{background-color:#04f7f7;box-shadow:0 0 20px 10px #1aebeb00}}.PathFinder .interface .gridContainer .grid-item.path{background-color:#0099f9}.compare-perf .setting{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px groove black}.compare-perf .setting h2{margin-top:10px;margin-bottom:10px}.compare-perf .setting .speed-filter{margin-bottom:20px}.compare-perf .setting .speed-filter select{margin-left:5px;height:30px;border:1px solid rgb(63,145,90);width:70px;background-color:#f5f5f5;color:#3f915a;padding:0 3px;font-size:12px;cursor:pointer}.compare-perf .setting .speed-filter select:hover{background-color:#bed8c5}.compare-perf .chart-container{width:70%;height:520px;margin:0 auto}@media (max-width: 768px){.compare-perf .chart-container{width:80%;height:500px}}@media (max-width: 480px){.compare-perf .chart-container{width:95%;height:350px}}.manage-time-data{display:flex;justify-content:center;align-items:center;padding:10px}.manage-time-data table{width:80%;border-collapse:collapse;background-color:#fff;text-align:center}.manage-time-data table thead{background-color:#3f915a;color:#fff}.manage-time-data table thead th{padding:5px;font-size:16px}.manage-time-data table tbody tr:nth-child(2n){background-color:#f9f9f9}.manage-time-data table tbody tr td{padding:5px;font-size:14px}.manage-time-data table tbody tr button{background-color:red;color:#fff;border:none;padding:5px 6px;cursor:pointer}.manage-time-data table tbody tr button:hover{background-color:#d00}@media (max-width: 400px){.manage-time-data .manage-time-data table thead th{font-size:8px;padding:5px}}.rotate-screen{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#abc8b3;text-align:center;color:#000;padding:20px;font-size:1.5rem;font-weight:700}.rotate-screen p{margin:0}