:root{--colour-1: #2f2f2f;--colour-2: #45cb85;--colour-3: #f2e2d2;--colour-4: #1c8a51;--colour-5: #0f4b2c}html{box-sizing:border-box;width:100%;height:100%}*,*:before,*:after{box-sizing:inherit}*{padding:0;margin:0}input,textarea,button,select,a,.scrubber{-webkit-tap-highlight-color:transparent}body{background-color:var(--colour-1);font-family:Roboto,sans-serif;height:100%;display:flex;flex-direction:column;justify-content:space-between}p{color:var(--colour-1);padding:10px}ul{list-style-type:none;display:flex}a{text-decoration:none;color:inherit;font-weight:700}h1{color:var(--colour-3);font-weight:700;margin-top:20px;letter-spacing:.1rem}h2{font-size:1rem;margin-left:10px}button{background:none;border:none;font-family:Roboto,sans-serif;font-weight:700;font-size:1.5rem;text-align:center;cursor:pointer}aside{background-color:var(--colour-2);border-top-right-radius:10px;border-bottom-right-radius:10px;display:flex;flex-direction:column;min-height:0;position:relative}.darken{filter:invert(50%) sepia(9%) saturate(3234%) hue-rotate(96deg) brightness(84%) contrast(92%)}.menu-and-cards-container{min-height:0;height:100%;display:flex;flex-direction:column;position:relative}.toggle-visiblity{display:flex}.menu-and-cards-subcontainer{min-height:0;height:100%;display:flex;flex-direction:column;position:relative}.algorithm-cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:5px;padding-right:2px;margin:10px;overflow-y:scroll;min-height:0;scrollbar-color:var(--colour-4) var(--colour-1);scrollbar-width:none}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--colour-1);border-radius:5px}::-webkit-scrollbar-thumb{background-color:var(--colour-4);border-radius:20px;border:3px solid var(--colour-1)}.card{display:flex;align-items:center;text-align:left;background-color:var(--colour-1);border-radius:5px;padding:10px;color:var(--colour-3);letter-spacing:.1rem}.card-darken{background-color:var(--colour-4)}.card div{background-color:#727272;height:70px;width:70px}.card div.transparent{background-color:transparent}.card img{width:100%}.card h2{flex:1}nav{display:flex;align-items:center;justify-content:space-between}nav button{transition-property:color;transition-duration:.2s;color:var(--colour-1);margin:10px 0;padding:0 20px;border-left:3px solid var(--colour-1)}nav button:active{color:var(--colour-4)}.text-highlight{position:relative}.text-highlight:after{content:"";height:3px;width:50%;background-color:var(--colour-1);position:absolute;bottom:-.1rem;left:50%;transform:translate(-50%)}.no-border{border-left:none}nav button img{height:100%;vertical-align:middle}.category-menu{display:none;padding:10px}.category-menu button{margin:0;padding:0;border:none}.category-menu ul{flex-direction:column;overflow-y:auto;scrollbar-color:var(--colour-2) var(--colour-4);scrollbar-width:thin;width:100%}.category-menu li{margin:10px;border-bottom:1px solid var(--colour-1)}.active{position:absolute;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;text-align:start;top:0;left:0;background-color:var(--colour-2);width:100%;height:100%;border-bottom-right-radius:10px}.algorithm-container{display:grid;grid-template-columns:1fr minmax(200px,1fr);grid-auto-rows:1fr;margin:20px 0;flex:1 1 200px;text-align:center;min-height:0px}.cube-container{display:flex;flex-direction:column;justify-content:space-between}.canvas-container{position:relative;flex:1 1 10px;overflow:hidden}.viewer-controls{position:absolute;top:40px;left:50px;opacity:0;transition-property:opacity;transition-duration:.4s;visibility:hidden}.viewer-controls img{height:40px;margin:0 10px}#reset-view img{height:30px}.playback-controls{display:flex;width:100%;position:absolute;bottom:50px;left:0px;height:50px;align-items:center;justify-content:center;opacity:0;transition-property:opacity;transition-duration:.4s;visibility:hidden}.full-opacity{opacity:1;visibility:visible;-webkit-tap-highlight-color:transparent}.playback-controls img{height:25px;margin:0 10px}.timeline{background-color:var(--colour-2);position:relative;border-radius:99px;width:200px;height:10px;margin:10px}.scrubber{position:absolute;bottom:-5px;left:0;width:20px;height:20px;border-radius:99px;background-color:var(--colour-2);border:2px solid var(--colour-1);z-index:1}footer{display:flex;background-color:var(--colour-2);justify-content:right;align-items:center;margin-top:10px;flex:0 0;width:100%}footer img{width:25px;margin:0 10px}.mobile-button{display:none}.current-subcategory{display:none;border:0}.full-height{height:100%}.card{transition-property:background-color;transition-duration:.2s;transition-delay:0s}.card:active{background-color:var(--colour-5)}.hover-darken:active{filter:invert(50%) sepia(9%) saturate(3234%) hue-rotate(96deg) brightness(84%) contrast(92%)}#loading-screen{display:flex;position:absolute;justify-content:center;align-items:center;z-index:2;top:0;left:0;width:100%;height:100%;background-color:var(--colour-1);opacity:1;transition:1s opacity}#loading-screen.fade-out{opacity:0}#loader{width:48px;height:48px;border:5px solid var(--colour-3);border-bottom-color:var(--colour-2);border-radius:50%;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (hover: hover){.hover-darken:hover{filter:invert(50%) sepia(9%) saturate(3234%) hue-rotate(96deg) brightness(84%) contrast(92%)}.card:hover{background-color:var(--colour-4)}.card:active{background-color:var(--colour-5)}nav button:hover{color:var(--colour-4)}nav button:active{color:var(--colour-5)}}@media screen and (max-width: 50rem){aside{background-color:transparent;position:fixed;width:100%;border-radius:0;z-index:50}.algorithm-container{display:flex;flex-direction:column;margin-top:0;min-height:auto;height:100%}.menu-and-cards-container{background-color:var(--colour-2)}.toggle-visibility{display:none}aside nav{background-color:var(--colour-2);position:relative}.active{position:absolute;height:100%;width:100%;top:0;left:0;z-index:100;border-radius:0}.cube-container{height:100%;margin-top:50px}.canvas-container{height:100%;flex:1 1 100px}footer{font-size:.75rem}.mobile-button{display:inline-block}.desktop-button{display:none}.current-subcategory{display:flex;justify-content:center;align-items:center;padding:5px 10px;border-top:1px solid var(--colour-1);border-bottom:1px solid var(--colour-1);background-color:var(--colour-2)}.current-subcategory h2{font-weight:700;font-size:1rem;border-bottom:1px solid var(--colour-1);color:var(--colour-1);text-align:center;margin:0 5px}.current-subcategory button{padding:1px;margin:0 5px}.current-subcategory button img{height:15px;padding:0}}@media screen and (max-width: 30rem){button{font-size:1.1rem}nav button{padding:0 5px;border:0}nav ul{justify-content:space-around;width:100%}.viewer-controls{left:20px}.hamburger{height:20px;padding:0 20px}.text-highlight:after{height:2px;width:70%}}@media screen and (max-width: 25rem){.viewer-controls img,.playback-controls img{margin:0 7px}h1{font-size:1.1rem}.timeline{width:150px;margin:7px}}@media screen and (max-width: 20rem){.algorithm-cards-container{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media screen and (max-height: 50rem){.playback-controls{bottom:10px}.viewer-controls{top:10px}}@media screen and (max-height: 30rem){.playback-controls{bottom:1px}.viewer-controls{top:1px}.algorithm-container{margin-bottom:5px}footer{margin-top:5px}}