:root{--sidebar-width:250px;--highlight-color:orange;--support-color:grey;--border-radius:12px;--color1:#0e0e0e;--color2:#1d1d1d;--border:1px;--blur:6px;--opacity:0.25;--text-color:rgb(128,128,128,calc(var(--opacity)*4))}body{margin:0;display:flex;flex-direction:row;font-family:Roboto,sans-serif;user-select:none}#control-div,#footer,#header{display:flex;flex:1;justify-content:center}#header{padding-top:16px;flex-direction:column;align-items:center;justify-content:center}#header img{border-radius:12px}#control-div{flex-direction:column;align-items:center}#footer{align-items:flex-end}#logo{font-size:28px;font-weight:700;letter-spacing:1px;color:#f5f5f5}#caption{font-size:12px;line-height:36px;color:gray}#caption a{text-decoration:none;color:grey}#settings-div{width:400px;height:auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#1d1d1d}#workspace-div{width:100%;height:auto;display:flex;justify-content:center;align-items:center;flex-direction:row;background:linear-gradient(135deg,var(--color1) 50%,var(--color2))}#circle-org{width:300px;height:300px;border-radius:50%;margin-top:-230px;margin-right:-180px;background:linear-gradient(135deg,#ffb566,#f67);animation:bounce-down 5s linear infinite}#circle-blue{width:175px;height:175px;border-radius:50%;margin-top:225px;margin-left:-90px;background:linear-gradient(135deg,#de82ca,#259fac);z-index:0;animation:bounce-down 8s linear infinite}@-webkit-keyframes bounce-down{25%{-webkit-transform:translateY(-20px)}100%,50%{-webkit-transform:translateY(0)}75%{-webkit-transform:translateY(20px)}}#subject-div{width:420px;height:260px;border-radius:var(--border-radius);display:flex;justify-content:center;align-items:flex-end;z-index:2}#sub-title{color:var(--text-color);font-weight:300;font-size:18px;letter-spacing:1px;margin-bottom:16px}.glass{backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:var(--border) solid #ffffff2e}.glass-light{background:hsla(0,0%,100%,var(--opacity));box-shadow:0 6px 15px 0 #8e8e8e30}.glass-dark{background:hsla(0,0%,35%,var(--opacity));box-shadow:0 6px 15px 0 #0e0e0e30}#error-div{position:fixed;text-align:center;font-size:14px;background-color:#ffdbdb;padding:16px;color:red;border-radius:4px;right:16px;top:16px;box-shadow:0 4px 12px #00000026}.control{display:flex;flex-direction:column}.vertical-space{height:40px}.label{color:#d3d3d3;font-size:14px;padding-bottom:12px;width:var(--sidebar-width)}.range-selector{-webkit-appearance:none;width:var(--sidebar-width);height:4px;border-radius:4px;-webkit-transition:.2s;transition:opacity .2s;background:var(--support-color);outline:0}.range-selector::-moz-range-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--highlight-color);cursor:pointer}.range-selector::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--highlight-color);cursor:pointer}#color-div,#light-source-div,#shadow-type-div{width:var(--sidebar-width)}.source-div{display:flex;flex-direction:row}#color-div,#shadow-type-div{display:flex;flex-direction:row}.rect{width:120px;height:32px;background-color:var(--support-color);margin:4px;border-radius:2px;display:flex;justify-content:center;align-items:center;color:#1d1d1d;font-weight:500;font-size:14px;transition:all .2s ease-in-out}.box{width:40px;height:40px;background-color:var(--support-color);margin:4px;border-radius:2px;transition:all .2s ease-in-out}.box:hover,.rect:hover{background-color:#b8b8b8;cursor:pointer;transition:all .2s ease-in-out}.active{background-color:var(--highlight-color)}#css-btn{margin-top:48px;width:var(--sidebar-width);height:48px;background-color:#0565ff;border-radius:4px;transition:all .2s ease-in-out;display:flex;justify-content:center;align-items:center}#css-btn:hover{background-color:#003281;cursor:pointer;transition:all .2s ease-in-out}#gen-css-txt{color:#fff}#modal-div{position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:flex;justify-content:center;align-items:center;z-index:3}#modal{width:700px;height:auto;background-color:#fff;border-radius:6px;box-shadow:3px 3px 14px #484848;padding:24px}#mod-head{display:flex;align-items:center;justify-content:space-between}#mod-title{font-size:24px;font-weight:400;color:#484848;line-height:32px;margin-bottom:20px}#mod-body{background-color:#1d1d1d;border-radius:4px;color:#ffdead}code{font-size:15px;user-select:text;white-space:pre-wrap}code:hover{cursor:text}pre{padding:16px;padding-bottom:0}#mod-foot{text-align:center}#close-btn{cursor:pointer;margin-bottom:20px}.switch{position:relative;display:inline-block;width:48px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--support-color);-webkit-transition:.4s;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:24px;width:24px;left:0;bottom:0;background-color:#fff;box-shadow:3px 3px 14px #484848;-webkit-transition:.4s;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--highlight-color)}input:focus+.slider{box-shadow:0 0 1px var(--highlight-color)}input:checked+.slider:before{-webkit-transform:translateX(24px);-ms-transform:translateX(24px);transform:translateX(24px)}@media only screen and (max-width:600px){body{display:flex;flex-direction:column}#settings-div{width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#1d1d1d}#workspace-div{width:100vw;padding:80px 16px;overflow:scroll;display:flex;justify-content:center;align-items:center;flex-direction:row;background:linear-gradient(135deg,var(--color1) 50%,var(--color2))}#circle-org{width:150px;height:150px;border-radius:50%;margin-top:-230px;margin-right:-180px;background:linear-gradient(135deg,#ffb566,#f67)}#circle-blue{width:85px;height:85px;border-radius:50%;margin-top:225px;margin-left:-90px;z-index:-1;background:linear-gradient(135deg,#de82ca,#259fac)}#subject-div{width:420px;height:260px;border-radius:12px;display:flex;justify-content:center;align-items:flex-end}}.bmc-btn{min-width:210px;color:#000;background-color:#fd0!important;height:60px;border-radius:12px;font-size:20px;font-weight:Normal;border:none;padding:0 24px;line-height:27px;text-decoration:none!important;display:inline-flex!important;align-items:center;-webkit-box-sizing:border-box!important;box-sizing:border-box!important}.bmc-btn svg{height:32px!important;margin-bottom:0!important;box-shadow:none!important;border:none!important;vertical-align:middle!important;transform:scale(.9);flex-shrink:0}.bmc-btn-text{display:inline-block;line-height:0;width:100%;flex-shrink:0}.icons{color:red;margin-top:15px;cursor:pointer}