@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=News+Cycle:wght@400;700&family=Sansita+Swashed:wght@300..900&family=Tilt+Neon&display=swap');
@import url('/assets/fonts/get.css');
* {box-sizing: border-box;margin:0}
body {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////w8PBJB7MPAAAAD0lEQVQI12Ng+I8V4RIGAH6/D/EIQoVRAAAAAElFTkSuQmCC');
    margin: 0 auto;
    font-family: Tahoma;
}
.wrapper {
    margin: 0 auto;
    width: 100%;
    display: grid;
    /*justify-content: center;*/
    gap: 5px;
}
.flexrow {display: flex}
.canvasbox {
    width: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px; 
    margin-bottom: 0px; 
    mix-blend-mode: normal;
}
.toolbox {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 30px #888;
    width: 900px;
    margin: 0 auto;
}
.spbw {
    justify-content: space-between;
}
.text-toolbox {
    width: 500px;
}
.textbox {
    padding: 10px;
    border-radius: 6px;
    border: 2px dashed #fb7ee2;
    width: 100%;
    height: 200px;
    box-shadow: 0 0 20px inset #bfbfbf;
}
.g10 {
    gap: 10px
}
.g5 {gap:5px}
.column {
    display: grid;
}
.draw {
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
    object-fit: contain;
    transform-origin: 50% 50%;
    transform-box: fill-box;
}
.font-family {
    padding: 10px 15px;
    font-size: 32px;
    border-radius: 10px;
    width: 100%;
}
.navbox {
    background: #c465e5;
    padding: 10px;
    display: flex;
    gap: 10px;
    border-radius: 8px;
    width: 900px;
    margin: 0 auto;
}
.navbox a {
    background: #fff;
    padding: 10px;
    border-radius: 7px;
}
img {
    width: 100%;
}
.output {
    display: block;
}
.mini-navbar {
    display: flex;
    width: 100%;
    list-style: none;
    justify-content: space-between;
    margin-bottom: 5px;
    border-radius: 6px;
    background: #f7f7f7;
    padding: 6px 0;
}
.mini-navbar li {
    padding: 6px;
    margin: 0 6px;
    text-align: center;
    flex: 1;
    font-weight: 500;
    color: #000;
    user-select: none;
    cursor: pointer;
    letter-spacing: .5px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #eee;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.mini-navbar .selected {
    background: rgb(247, 70, 179);
    color: #fff;
    text-shadow: 0 0 3px #444;
}
.ts-st {
    background: #f4eeff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px #d7d7d7;
}
.tb-wrapper {
    background: #fee;
    padding: 8px;
    border-radius: 8px;
    border: 2px dashed #fb7ee2;
}
.strictflex {display:flex}
.closed {display:none}
@media screen and (max-width:800px) {
    .canvasbox {
        width: 100%;
    }
    .navbox {
        width: 100%;
    }
    .toolbox {
        width: 100%;
    }
    .wrapper {
        align-items: center;
        align-content: center;
    }
    .flexrow {
        flex-direction: column;
        width: 100%;
    }
    .toolset {
        width: 100%;
    }
    .toolbox {
        width: 100%;
        margin: 0 auto;
    }
    input {
        width: 100%;
    }
    .text-toolbox {
        width: 100%
    }
    .textbox {
        width: 100%;
        
    }
}
@media screen and (max-width:420px) {
    .canvasbox {
        width: 100%;
    }
    .navbox {
        width: 100%;
    }
    .toolbox {
        width: 100%;
    }
}