html,#root{height:calc(100vh - 47px)}body{--colour-background-layer1: #1f2429;--colour-background-layer2: #151a1f;--colour-font: #b39cb4;--nav-colour: var(--colour-background-layer1);--nav-font-colour: var(--colour-font);--loader-colour: #cc3369;--drop-container-box-shadow-colour: 0px 0px 20px 0px rgba(1, 1, 1, .3);--drop-container-file-drop-border-colour: #41414177;--drop-container-file-drop-background-colour: #2c2c2c65;--illustration-music-jumper-colour: #cc3369;--illustration-music-headphones-colour: var( --illustration-music-jumper-colour );--illustration-music-phone-colour: var(--illustration-music-jumper-colour);--illustration-music-circle-colour: var(--illustration-music-jumper-colour);--illustration-music-play-border-colour: #3f3d56;margin:0;background-color:var(--colour-background-layer2);color:var(--colour-font);height:100%}body.night{--colour-background-layer1: #1f2429;--colour-background-layer2: #151a1f;--colour-font: #e3e3e3;--nav-colour: var(--colour-background-layer1);--nav-font-colour: var(--colour-font);--loader-colour: #cc3369;--drop-container-box-shadow-colour: 0px 0px 0px 0px rgba(0, 0, 0, 0);--drop-container-file-drop-border-colour: #9797974f;--drop-container-file-drop-background-colour: #ffffff23;--illustration-music-jumper-colour: #cc3369;--illustration-music-headphones-colour: var( --illustration-music-jumper-colour );--illustration-music-phone-colour: var(--illustration-music-jumper-colour);--illustration-music-circle-colour: var(--illustration-music-jumper-colour);--illustration-music-play-border-colour: #3f3d56}*{font-family:Lato,sans-serif;font-weight:400;-webkit-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box}*:focus{outline:solid #fff 0px}main{position:absolute;top:10%;left:50%;translate:-50% 0%;min-width:50%;height:fit-content;padding:16px 12px;border-radius:10px;background-color:var(--colour-background-layer1)}header nav{width:100%;display:flex;flex-direction:row;height:47px;position:relative;background-color:var(--nav-colour)}header nav ul{margin:0;padding:0;display:flex;flex-direction:row;height:inherit}header nav ul li{list-style-type:none;display:flex;background-color:var(--nav-colour);align-items:center}header nav ul li:first-child{padding-left:0}header nav ul li:last-child{position:absolute;right:0;height:47px}header nav ul li:last-child a{margin-right:10px;padding:8px 12px}header nav ul li a{color:var(--nav-font-colour);text-align:center;display:flex;align-items:center;padding:0 16px;text-decoration:none;font-size:17px;height:100%;width:100%}header nav ul li a:hover{background-color:#ddd;color:#333}header nav ul li a .active{background-color:#ddd;color:#333}header nav ul li a span{width:100%;height:100%}header nav ul li a span svg{width:100%;height:100%}.aspectRatio{display:flex;flex-direction:column;gap:20px}.aspectRatio .description{text-align:center;padding:0 12px}.aspectRatio .description h2{font-size:20px}.aspectRatio .aspectRatioForm{display:grid;grid-template-columns:repeat(2,1fr);gap:0px;font-size:24px}.aspectRatio .aspectRatioForm div label{display:flex;flex-direction:column;text-align:center;padding:12px;position:relative}.aspectRatio .aspectRatioForm div label .customRadio{position:absolute;right:10%;padding:0;top:14px}.aspectRatio .aspectRatioForm div label .customRadio input[type=radio]{right:10%;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border-radius:50%;width:16px;height:16px;border:2px solid #999;transition:.2s all linear;margin-right:5px}.aspectRatio .aspectRatioForm div label .customRadio input[type=radio]:checked{border:6px solid #cc3369}.aspectRatio .aspectRatioForm div label input[type=number]{margin:12px;border:none;height:32px;border-radius:4px;font-size:18px}.hiddenDropArea{display:inline-block;position:absolute;top:0;left:0;opacity:0;z-index:0;width:100%;height:100%}.dropAreaFileHover{opacity:1;z-index:99;border-radius:10px;border:dashed 5px var(--drop-container-file-drop-border-colour);background-color:var(--drop-container-file-drop-background-colour)}.dropContainer{display:flex;justify-content:center;margin:0 0 12px;position:relative}.dropContainer label{text-wrap:pretty;overflow-wrap:break-word;cursor:pointer}.dropContainer .dropZone{display:flex;z-index:1;margin:0;box-shadow:var(--drop-container-box-shadow-colour);border-radius:10px;background-color:var(--colour-background-layer2);width:95%;height:80%;text-align:center}.dropContainer .dropZone .fileInput{display:none}.dropContainer .dropZone label{display:flex;flex-direction:column;justify-content:center;cursor:pointer;padding:0px 1rem;width:27%;font-size:1.25rem;text-align:justify;text-align:left}.dropContainer .dropZone label .wrongFileType{color:#cc3369;font-weight:700;text-underline-offset:5px}.dropContainer .dropZone .invalid-animation{animation:shake .3s;animation-iteration-count:infinite}@keyframes shake{25%{transform:translate(4px)}50%{transform:translate(-4px)}75%{transform:translate(4px)}}.dropContainer .dropZone .additionalPadding svg{padding-bottom:128px!important}.dropContainer .dropZone .svgContainer{display:flex;width:70%;height:100%;position:relative}.dropContainer .dropZone .svgContainer svg{margin:20px;border-radius:10px;background-color:var(--colour-background-layer1);padding:60px 80px;width:100%;cursor:pointer}.waveformMp3{cursor:grab;position:absolute;left:0;bottom:20px;width:100%;padding:0 20px;z-index:1}.newtonsCradleLoader{position:absolute;top:50%;left:50%;translate:-50% -50%;--uib-size: 78px;--uib-speed: 1.4s;display:flex;align-items:center;justify-content:center;width:calc(var(--uib-size) * .51);height:calc(var(--uib-size) * .51);z-index:999999}.newtonsCradleLoader .dot{position:relative;display:flex;flex-shrink:0;align-items:center;height:100%;width:25%;transform-origin:center top}.newtonsCradleLoader .dot:after{content:"";display:block;width:100%;height:25%;border-radius:50%;background-color:var(--loader-colour);transition:background-color .3s ease}.newtonsCradleLoader .dot:first-child{animation:swing var(--uib-speed) linear infinite}.newtonsCradleLoader .dot:last-child{animation:swing2 var(--uib-speed) linear infinite}@keyframes swing{0%{transform:rotate(0);animation-timing-function:ease-out}25%{transform:rotate(70deg);animation-timing-function:ease-in}50%{transform:rotate(0);animation-timing-function:linear}}@keyframes swing2{0%{transform:rotate(0);animation-timing-function:linear}50%{transform:rotate(0);animation-timing-function:ease-out}75%{transform:rotate(-70deg);animation-timing-function:ease-in}}.ringLoader{--uib-size: 40px;--uib-color: var(--loader-colour);--uib-speed: 2s;--uib-bg-opacity: 0;height:var(--uib-size);width:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible;position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:9999}.ringLoader .car{fill:none;stroke:var(--uib-color);stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:stretch calc(var(--uib-speed) * .75) ease-in-out infinite;will-change:stroke-dasharray,stroke-dashoffset;transition:stroke .5s ease}.ringLoader .track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes stretch{0%{stroke-dasharray:0,150;stroke-dashoffset:0}50%{stroke-dasharray:75,150;stroke-dashoffset:-25}to{stroke-dashoffset:-100}}:root{--toggle-sunny-background: #3abdbfd8;--toggle-sunny-sun: #fffaa8;--toggle-night-background: #09202d;--toggle-night-moon-craters: #a0a0a0cf;--toggle-night-moon-border: #cacaca;--toggle-clouds-moon: #f2f1ed}.toggle--checkbox{display:none}.toggle--checkbox:checked+.toggle--label{border-color:var(--toggle-night-background);background:var(--toggle-night-background)}.toggle--checkbox:checked+.toggle--label .toggle--label-background{left:40%;width:1px;height:1px}.toggle--checkbox:checked+.toggle--label .toggle--label-background:before{top:400%;left:-600%;width:1px;height:1px}.toggle--checkbox:checked+.toggle--label .toggle--label-background:after{top:-250%;left:-500%;width:1px;height:1px}.toggle--checkbox:checked+.toggle--label:before{animation-duration:.35s;animation-fill-mode:forwards;animation-name:switch;box-sizing:border-box;border:solid var(--toggle-night-moon-border) 1px;background:var(--toggle-clouds-moon)}.toggle--checkbox:checked+.toggle--label:after{opacity:1;transition-delay:.35s}.toggle--label{display:flex;position:relative;left:20px;transition:all .35s ease-in;cursor:pointer;border-radius:100px;background:var(--toggle-sunny-background);width:30px;height:15px;overflow:hidden}.toggle--label-background{position:relative;top:40%;left:65%;transition:all .15s ease-in;border-radius:5px;background:var(--toggle-clouds-moon);width:8%;height:10%;fill:gold!important}.toggle--label-background:before{position:absolute;top:-100%;left:-170%;transition:all .15s ease-in;border-radius:5px;background:var(--toggle-clouds-moon);width:340%;height:90%;content:""}.toggle--label-background:after{position:absolute;top:120%;left:-50%;transition:all .25s ease-in;border-radius:5px;background:var(--toggle-clouds-moon);width:340%;height:90%;content:""}.toggle--label:before{position:absolute;top:50%;left:50%;translate:-20% -51%;animation-duration:.35s;animation-fill-mode:forwards;animation-name:reverse;transition:all .35s ease-in;border-radius:102px;background:var(--toggle-sunny-sun);width:40%;height:80%;content:""}.toggle--checkbox:checked+.toggle--label .toggle--label-background .lightning,.toggle--checkbox:checked+.toggle--label .toggle--label-background .B21{display:none}.toggle--checkbox+.toggle--label .toggle--label-background .alien{display:none}.toggle--checkbox:checked+.toggle--label .toggle--label-background .alien{display:flex}.lightning{position:relative;top:-7px;width:5px!important;height:auto}.B21{position:relative;top:-7px;right:2px;width:7px!important}.alien{position:relative;top:5.2px;left:10px;transform:rotate(340deg);width:5px!important}.toggle--label:after{position:absolute;top:2%;left:100%;opacity:0;transition-delay:0ms;transition:all .25s ease-in;box-shadow:-9px 4px 0 1px var(--toggle-night-moon-craters),-11px 6px 0 0 var(--toggle-night-moon-craters);border-radius:500px;background:transparent;width:3%;height:7%;content:""}.toggle--checkbox:checked+.toggle--label.animate-toggle{border-color:var(--toggle-night-background);background:var(--toggle-night-background)}.toggle--checkbox:checked+.toggle--label.animate-toggle .toggle--label-background{left:40%;width:1px;height:1px}.toggle--checkbox:checked+.toggle--label.animate-toggle .toggle--label-background:before{top:400%;left:-600%;width:1px;height:1px}.toggle--checkbox:checked+.toggle--label.animate-toggle .toggle--label-background:after{top:-250%;left:-500%;width:1px;height:1px}.toggle--checkbox:checked+.toggle--label.animate-toggle:before,.toggle--label.animate-toggle:before{animation-duration:.35s;animation-fill-mode:forwards;animation-name:switch;box-sizing:border-box;border:solid var(--toggle-night-moon-border) 1px;background:var(--toggle-clouds-moon)}.toggle--checkbox:checked+.toggle--label.animate-toggle:after,.toggle--label.animate-toggle:after{opacity:1;transition-delay:.35s}@keyframes switch{0%{left:14%}60%{left:50%;width:60%}to{left:62%;width:40%}}@keyframes reverse{0%{left:62%;width:40%}60%{left:20%;width:70%}to{left:14%}}.settings{display:grid;grid-template-columns:repeat(1,1fr)}.settings .settingsOptions{display:flex;flex-direction:row;align-items:center;cursor:pointer}.videoToMp3{display:flex;flex-direction:column;gap:20px}.videoToMp3 .description{text-align:center;padding:0 12px}.videoToMp3 .description h2{font-size:20px}.videoToMp3 audio{z-index:100}.videoEditor{max-height:95vh;height:100%;max-width:100vw;background-color:red;overflow:hidden;position:relative}.videoEditor video{position:absolute;right:50px;top:20px;width:960px;height:540px}.controlBar{width:100%;height:160px;position:fixed;bottom:12px;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#00f}.controlBar .controls{display:flex;flex-direction:row;max-height:50%;height:50%;position:relative;width:100%;justify-content:center}.controlBar .controls .playPause{border-radius:500px;margin:0 20px}.controlBar .timeLineContainer{width:100%;height:70px}.controlBar .timeLineContainer canvas{width:100%;height:100%}.controlBar .timeLineContainer video{display:none}.controlBar .videoSeekbar{max-height:50%;height:50%;display:flex;flex-direction:row}.buttonPlayPauseContainer{width:40px;height:40px;position:relative;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 5px #00000026,0 2px 10px #0000001a;background-color:#fff;margin:0 20px}.buttonPlayPauseContainer .paused{width:2px;height:50%;background-color:#000;position:absolute;left:15px;border-radius:500px}.buttonPlayPauseContainer .paused:after{position:absolute;width:2px;height:100%;background-color:#000;content:"";left:8px;border-radius:500px}.buttonPlayPauseContainer .playing{width:2px;height:50%;background-color:#000;position:absolute;left:15px;border-radius:500px}.buttonPlayPauseContainer .playing:before{position:absolute;width:2px;height:86%;background-color:#000;content:"";top:6px;left:6.5px;transform:rotate(55deg);border-radius:500px}.buttonPlayPauseContainer .playing:after{position:absolute;width:2px;height:86%;background-color:#000;top:-3.1px;left:6.5px;transform:rotate(305deg);content:"";border-radius:500px}.pdfToPng{display:flex;flex-direction:column;gap:20px}.pdfToPng .description{text-align:center;padding:0 12px}.pdfToPng .description h2{font-size:20px}.passwordGenerator{display:flex;flex-direction:column;gap:20px;padding:0 20px}.passwordGenerator .description{text-align:center;padding:0 12px}.passwordGenerator .description h2{font-size:20px}.passwordGenerator .slider{-webkit-appearance:none;width:100%;height:7px;border-radius:5px;background:#fff;outline:none;opacity:1;-webkit-transition:.2s;transition:opacity .2s}.passwordGenerator .slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#cc3369;cursor:pointer}.passwordGenerator .slider::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#cc3369;cursor:pointer}.passwordGenerator input[type=text]{font-size:16pt;text-align:center;border-radius:20px;padding:4px 15px}.passwordGenerator .sliderSection{display:flex;flex-direction:row;display:inline-block}.passwordGenerator .sliderSection p{text-align:center;align-items:center;align-content:center;width:100%}.passwordGenerator .options{vertical-align:top;display:relative;padding-bottom:20px}.passwordGenerator .options div:last-child{position:absolute;right:0}.passwordGenerator .options div:last-child button{background-color:#151a1f;color:#fff;padding:12px;outline:none;border:none;box-shadow:0 0 2px #ddd;border-radius:20px;cursor:pointer}.passwordGenerator .options div:last-child button:hover{background-color:#ddd;color:#151a1f}.passwordGenerator .options div{display:inline-block;margin:0 20px 0 0}.passwordGenerator .options div label{display:flex;flex-direction:row}.passwordGenerator .options div label input{transform:scale(1.3);outline:none;border:none;margin-right:10px}.weightConverter{display:flex;flex-direction:column;gap:20px}.weightConverter .description{text-align:center;padding:0 12px}.weightConverter .description h2{font-size:20px}.weightConverter .weights{display:flex;flex-direction:column;gap:30px;width:69%;align-self:center;margin-bottom:20px}.weightConverter .weights label{display:grid;grid-template-columns:150px auto;font-size:20px}.weightConverter .weights label input{width:100%;font-size:20px;outline:none;border:none;box-shadow:0 0 3px #ddd}.iconConverter{display:flex;flex-direction:column;gap:20px}.iconConverter .description{text-align:center;padding:0 12px}.iconConverter .description h2{font-size:20px}