*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.gui{width:60px;height:60px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.gui,.gui.active{position:fixed;transition-delay:.5s;margin-left:10px;z-index:99999}.gui.active{height:310px;width:60%}.navigation{position:relative;width:60px;height:60px;background:#fff;border-radius:50%;transition:.5s;transition-delay:.5s;border-radius:60px;display:flex;justify-content:space-evenly;align-items:center;box-shadow:0 10px 15px rgba(0,0,0,.5)}.navigation.active{width:100%;background:linear-gradient(90deg,#d3d3d3,#f0f0f0,#d3d3d3);background-size:300% 100%;animation:gradient1 5s infinite;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:15px;border-top-right-radius:15px;box-shadow:0 10px 5px -5px rgba(0,0,0,.5)}@keyframes gradient1{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.navigation .toggleMenu{position:absolute;width:60px;height:60px;background-color:#fff;border-radius:50%;transition:.5s;cursor:pointer;transition-delay:.5s;display:flex;justify-content:center;align-items:center}.navigation.active .toggleMenu{background-color:#5f90e5;transition-delay:0s;transform:translateY(260px);width:30px;height:30px;box-shadow:0 10px 15px rgba(0,0,0,.05)}.navigation .toggleMenu:before{transform:translateY(-5px)}.navigation .toggleMenu:after,.navigation .toggleMenu:before{content:"";position:absolute;width:30px;height:3px;border-radius:3px;background-color:#333;transition:.1s;transition-delay:0}.navigation .toggleMenu:after{transform:translateY(5px)}.navigation.active .toggleMenu:before{background-color:#fff;transform:translateY(0) rotate(45deg) scale(.6);transition-delay:0}.navigation.active .toggleMenu:after{background-color:#fff;transform:translateY(0) rotate(315deg) scale(.6);transition-delay:0}.navigation li{list-style:none;transition:.5s;transform:scale(0)}.navigation.active li{transition-delay:.75s;display:flex;transform:scale(1)}.navigation li a{text-decoration:none;color:#333;text-transform:uppercase;letter-spacing:.12em;padding:5px 15px;border-radius:20px;transition:.5s}.navigation.active li a:hover,.selected{background-color:#5f90e5;color:#fff;cursor:pointer}.selected{text-decoration:none;text-transform:uppercase;letter-spacing:.12em;padding:5px 15px;border-radius:20px}.function-area{width:100%;height:200px;transition:transform .5s ease;transform:scale(0);transform-origin:top left}.function-area.active{transition-delay:.5s;transform:scale(1);transform-origin:top left;background:linear-gradient(90deg,#f0f0f0,#d3d3d3,#f0f0f0);background-size:300% 100%;animation:gradient2 5s infinite;border-bottom-left-radius:15px;border-bottom-right-radius:15px;border-top:1px solid #aba7a7}@keyframes gradient2{0%{background-position:100% 50%}50%{background-position:0 50%}to{background-position:100% 50%}}.function-area-item{height:100%;width:100%;display:flex}.function-area-item-part{height:100%;width:25%;display:flex;flex-direction:column;align-items:center;border-right:1px solid #aba7a7}.function-area-item-part:nth-child(4){border-right:none}.function-area-item-part a{margin:.5em}.checkbox-option,.choice-option,.color-options,.range-option,.upload-option{height:20%;width:100%;display:flex;flex-direction:row;align-items:center}.checkbox-option .option-label,.color-options .option-label,.range-option .option-label{margin-left:.5em;width:50%;text-shadow:4px 4px 10px rgba(0,0,0,.7)}.choice-option .option-label,.upload-option .option-label{margin-left:.5em;width:30%;text-shadow:4px 4px 10px rgba(0,0,0,.7)}.checkbox-option .option-value,.color-options .option-value,.range-option .option-value{width:50%}.choice-option .option-value,.upload-option .option-value{width:70%}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;width:40px;height:40px;border:none}.color-input::-webkit-color-swatch{border-radius:8px}.color-input::-moz-color-swatch{border-radius:8px}.range-option .option-value span{margin-left:.5em;width:20%}input[type=range]{-webkit-appearance:none;width:100px;border-radius:10px}input[type=range]::-webkit-slider-runnable-track{height:15px;border-radius:10px;box-shadow:0 1px 1px #def3f8,inset 0 .125em .125em #0d1112}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:25px;width:25px;margin-top:-5px;background:#fff;border-radius:50%;border:.125em solid rgba(205,224,230,.5);box-shadow:0 .125em .125em #3b4547}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background:#ddd;border-radius:5px;border:1px solid #333;position:relative;cursor:pointer;transition:background .3s ease-in-out}input[type=checkbox]:checked{border:1px solid #333;background:#007bff}input[type=checkbox]:checked:after{content:"";position:absolute;width:10px;height:5px;border:4px solid #fff;border-top:none;border-right:none;top:5px;left:5px;transform:rotate(-45deg)}.button-option{--b:4px;--c:20px;--g:calc(var(--c)*0.707);padding:8px;transition:.5s;border:solid transparent;border-width:var(--b) var(--b) calc(var(--c) + var(--b)) calc(var(--c) + var(--b));background:linear-gradient(-45deg,transparent var(--g),hsla(0,0%,100%,.6) 0) 0 /var(--c) 100%,linear-gradient(135deg,transparent var(--g),hsla(0,0%,100%,.3) 0) bottom /100% var(--c),conic-gradient(from -90deg at top var(--b) right var(--b),currentColor 270deg,transparent 0),conic-gradient(from 90deg at bottom calc(var(--c) + var(--b)) left calc(var(--c) + var(--b)),currentColor 270deg,transparent 0);background-repeat:no-repeat;background-origin:border-box;transform:translate(calc(var(--c)/-1),calc(var(--c)/1));-webkit-clip-path:polygon(var(--c) 0,var(--c) 0,100% 0,100% calc(100% - var(--c)),100% calc(100% - var(--c)),var(--c) calc(100% - var(--c)),var(--c) calc(100% - var(--c)));clip-path:polygon(var(--c) 0,var(--c) 0,100% 0,100% calc(100% - var(--c)),100% calc(100% - var(--c)),var(--c) calc(100% - var(--c)),var(--c) calc(100% - var(--c)))}.button-option:hover{transform:translate(0);-webkit-clip-path:polygon(0 var(--c),var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 100%);clip-path:polygon(0 var(--c),var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 100%);cursor:pointer}.choice-input{height:30px;position:relative;width:160px}.choice-input svg{position:absolute;right:12px;top:calc(50% - 3px);width:10px;height:6px;stroke-width:2px;stroke:#9098a9;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.choice-input select{-webkit-appearance:none;padding:7px 40px 7px 12px;width:100%;border:1px solid #e8eaed;border-radius:5px;background:#fff;box-shadow:0 1px 3px -2px #9098a9;cursor:pointer;font-family:inherit;font-size:16px;transition:all .15s ease}.choice-input select:required:invalid{color:#5a667f}.choice-input select option{color:#223254}.choice-input select option[value=""][disabled]{display:none}.choice-input select:focus{outline:none;border-color:#07f;box-shadow:0 0 0 2px rgba(0,119,255,.2)}.choice-input select:hover+svg{stroke:#07f}.sprites{position:absolute;width:0;height:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.upload-input{text-align:center;display:flex;align-items:center;justify-content:center;position:relative;display:inline-block;overflow:hidden;cursor:pointer;background-color:#fff;color:#333;border:2px solid #ccc;border-radius:4px;font-size:16px;transition:background-color .3s ease,color .3s ease,border-color .3s ease;height:30px;width:160px}.upload-input:hover{background-color:#f7f7f7;border-color:#bbb}.upload-input input[type=file]{position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer}