*{margin:0;padding:0}@font-face{font-family:Roboto;src:url(/fonts/Roboto.ttf) format("ttf")}@font-face{font-family:Minecraft;src:url(/fonts/Minecraft.otf) format("otf")}body{font-family:Roboto;--background-color: rgb(221, 221, 221);height:100vh}.gap{height:10px}button{padding:3px;font-size:14px;font-weight:600;border-radius:5px}button:hover{background-color:gray}.interface{display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto;height:100vh}.top-content{grid-row:1/2}main{width:100%;height:100%;display:grid;grid-row:2/3;grid-template-columns:repeat(24,1fr);grid-template-rows:103px auto 26px;overflow-x:auto}.top-navbar{width:100%;grid-column:1/-1;background-color:var(--background-color);border-bottom:1px solid black}.top-navbar ul{display:flex;list-style-type:none;font-family:sans-serif;font-weight:600;font-size:11.5px;gap:5px}.top-navbar ul li.hover-list{padding:2px 7px;position:relative;z-index:100}.top-navbar ul li.hover-list:hover{background:#38becf}.top-navbar ul li ul{list-style-type:none;display:none;position:absolute;flex-direction:column;background-color:#fff;box-shadow:1px 1px 4px #000;top:105%;left:0;font-size:13px;gap:0;padding:0;font-size:11.5px}.top-navbar ul li:hover>ul{display:flex}.top-navbar ul li ul li{padding:3px;width:140px}.top-navbar ul li ul li:hover{background-color:#357ec7}.title-on-toolsbar{text-align:center;margin-top:9px;margin-bottom:10px}.tools-bar{background-color:var(--background-color);grid-column:1/4;grid-row:1/3;border-right:1px solid black;display:flex;flex-direction:column;padding:0 8px 8px;overflow:auto}.tools-bar .tools{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center}.tools-bar .tools button{width:29px;height:29px;text-align:center;border-radius:5px}.tools-bar .tools button:focus{border:3px solid rgb(74,189,209)}.tools-bar .tools button img{width:18px}.tools-bar .colors .color-palette{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-bottom:10px}.tools-bar .colors .color-palette .color{width:40px;padding:8px 0;background-color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column;border:2px solid black}.tools-bar .colors .color-palette .color .display{width:20px;height:20px;outline:2px solid black;outline-offset:2px;margin-bottom:6px;margin-top:3px}.tools-bar .colors .color-palette input[type=color]{display:none}.tools-bar .colors .color-palette .color .details{text-align:center;font-size:10.5px;-webkit-user-select:none;user-select:none;width:100%}.tools-bar .colors .color-choose{width:100%;display:flex;flex-direction:column;align-items:center}.tools-bar .colors .color-choose .color-select-panel{font-size:12px;background-color:#92b808;width:90%;text-align:center;padding-top:2px;-webkit-user-select:none;user-select:none;border:2px solid black;margin-bottom:1px}.tools-bar .colors .color-choose .color-select-panel:hover{background-color:#576d06}.tools-bar .colors .color-choose .color-board{width:90%;height:40px;background-color:#929292;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:7px 5px;overflow-y:auto;border:3px solid black}.tools-bar .colors .color-choose .color-board .color-display{width:15px;height:15px;background-color:#fff;outline:2px solid black;outline-offset:1px}.tools-bar .colors .color-choose .color-board .color-display.disable{background-color:transparent!important}.canvas-area{background-color:#c7dbee;grid-column:4/21;grid-row:1/3;position:relative;overflow:auto}.canvas-area .canvas-resizer{position:relative;border:2px dotted transparent}.canvas-area .canvas-resizer.action-resize{border:2px dotted black}.canvas-area .canvas-resizer div div{background-color:#fff;border:1px solid black;width:8px!important;height:8px!important}.canvas-resizer>div>div[style*="cursor: col-resize"]{top:50%!important;bottom:50%!important}.canvas-resizer>div>div[style*="cursor: col-resize"][style*="left: -5"]{left:-10px!important}.canvas-resizer>div>div[style*="cursor: col-resize"][style*="right: -5"]{right:-14px!important}.canvas-resizer>div>div[style*="cursor: se-resize"]{right:-14px!important;bottom:-14px!important}.canvas-resizer>div>div[style*="cursor: row-resize"]{left:50%!important;right:50%!important}.canvas-resizer>div>div[style*="cursor: row-resize"][style*="top: -5px"]{top:-10px!important}.canvas-resizer>div>div[style*="cursor: row-resize"][style*="bottom: -5px"]{bottom:-14px!important}.canvas-resizer>div>div[style*="cursor: sw-resize"]{left:-10px!important;bottom:-14px!important}.canvas-resizer>div>div[style*="cursor: ne-resize"]{right:-14px!important;top:-10px!important}.canvas-resizer>div>div[style*="cursor: nw-resize"]{left:-10px!important;top:-10px!important}.canvas-area .resizable-canvas{background-color:#fff;box-shadow:1px 1px 5px #000}.bottom-content{height:25px;background-color:#afafaf;grid-row:3/4;grid-column:1/-1;display:flex;align-items:center;font-weight:600;font-size:15px;padding:0 10px;font-family:monospace;justify-content:space-between;flex-wrap:wrap;border-top:1px solid black}.bottom-content .place{padding:0 7px;height:100%;border-left:1px solid black;border-right:1px solid black;display:flex;justify-content:center;align-items:center;font-size:1.0011rem;background-color:#969696;margin:0 5px}.bottom-content span.main-data{color:#2e2e2e}.styles-bar{grid-column:21/-1;grid-row:1/2;padding:4.3px;overflow-y:auto;border-left:1px solid black;background-color:var(--background-color)}.right-bar{grid-column:21/-1;grid-row:2/3;height:100%;max-height:100%;overflow:hidden;background-color:var(--background-color);border-left:1px solid black;display:flex;flex-direction:column}.right-bar .right-contents{flex:1;overflow-y:auto;overflow-x:hidden}.right-bar .right-contents .content::-webkit-scrollbar{width:5px;height:5px}.right-bar .right-contents .content::-webkit-scrollbar-thumb{background-color:#000!important;width:5px;height:5px}.right-bar .right-contents .content::-webkit-scrollbar-track{background-color:#fff!important}.right-bar .right-contents .content{border:1px solid black;max-height:100%;scrollbar-width:5px;scrollbar-color:black}.right-bar .right-contents .content>summary{padding:10px;background-color:#357ec7;font-size:18px}.right-bar .right-contents .content>.inside-details{background-color:#0ff;padding:10px;font-size:15px}.right-bar .right-contents .content>.inside-details .title{font-size:18px;margin-bottom:10px;font-weight:600}.full-input-area{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.input-area{display:flex;flex-wrap:wrap;gap:3px;margin-left:5px;align-items:center;font-family:Minecraft;font-weight:700}.input-area input[type=number]{width:48px;height:19px;padding:0 3px;border-radius:5px}.input-area input[type=color]{width:50px;height:24px;padding:0 1px;border-radius:5px}.input-area input[type=range]{width:50px}.input-area .short-input{width:37px!important}.full-input-area input[type=range]{width:50px}.selection-place{display:flex;justify-content:space-between;gap:5px}.selection-place button{width:30px;height:30px;display:flex;justify-content:center;align-items:center}.selection-place button:hover{background-color:#357ec7}.selection-place button:focus{border:3px solid blue}.alert-yes-no{width:100%;height:100vh;position:relative;z-index:9999;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:#000}.canvas-area::-webkit-scrollbar,.tools-bar::-webkit-scrollbar,.right-bar .right-contents::-webkit-scrollbar,.right-bar .right-contents .content::-webkit-scrollbar,.tools-bar .color .color-choose .color-board::-webkit-scrollbar,.styles-bar::-webkit-scrollbar{width:5px;height:5px;background-color:#fff}.canvas-area::-webkit-scrollbar-thumb,.tools-bar::-webkit-scrollbar-thumb,.right-bar .right-contents::-webkit-scrollbar-thumb,.right-bar .right-contents .content::-webkit-scrollbar-thumb,.tools-bar .color .color-choose .color-board::-webkit-scrollbar-thumb,.styles-bar::-webkit-scrollbar-thumb{background-color:#000;border-radius:2.5px}.canvas-area::-webkit-scrollbar-track,.tools-bar::-webkit-scrollbar-track,.right-bar .right-contents::-webkit-scrollbar-track,.right-bar .right-contents .content::-webkit-scrollbar-track,.tools-bar .color .color-choose .color-board::-webkit-scrollbar-track,.styles-bar::-webkit-scrollbar-track{background-color:#f1f1f1}.canvas-area,.tools-bar,.right-bar .right-contents,.right-bar .right-contents .content,.tools-bar .color .color-choose .color-board,.styles-bar{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.5) transparent}@media screen and (max-width: 920px){main{display:grid;grid-template-columns:120px auto;grid-template-rows:auto 37px 140px auto}.tools-bar{grid-row:1 / 4;grid-column:1 / 2}.canvas-area{grid-row:1 / 2;grid-column:2 / 3}.styles-bar{grid-row:2/3;grid-column:2/3;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;border-left:none;border-top:1px solid black}.right-bar{grid-row:3 / 4;grid-column:2 / 3;border-left:none}.right-bar .right-contents{display:flex;flex-direction:row;overflow:auto}.right-bar .right-contents .content{width:200px;flex:1 0 auto;overflow-y:scroll}.bottom-content{grid-row:4 / 5;grid-column:1 / -1}}@media screen and (max-width: 320px){.right-bar{height:100vh;overflow-y:auto}.right-bar .right-contents{flex-direction:column;height:auto;overflow:visible}.right-bar .right-contents .contents{height:auto;overflow:visible;flex-shrink:0}}