@font-face {
    font-family: 'f25';
    src: url("../fonts/F25_Bank_Printer_Bold.ttf");
}

html, body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    padding: 0;
    margin: 0;
    font-size: 1.5vh;
    font-family: 'f25';
}

textarea, input {
    font-size: 1.3vh;
}

#canvas {
    width: 70vw;
    height: 39vw;

    background-color: whitesmoke;

    z-index: -999;
}

.brush {
    position: absolute;
    transform-origin: 50%;
    pointer-events: none;
}

/* #region title seq */
#divBrush_bootOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5vh;

    background: linear-gradient(to bottom right, hsl(24, 100%, 59%) 0%, hsl(0, 100%, 69%) 50%);
}
#divBrush_bootOverlay button {
    width: 10%;

    border: none;
    background: none;

    font-family: "f25";
    font-size: 3vh;
    color: white;

    cursor: pointer;

    animation: start_btn 4s ease-in-out infinite;
}
@keyframes start_btn {
    0%      {rotate: 15deg; transform: scale(1);}
    25%     {rotate: -15deg;}
    50%     {rotate: 15deg; transform: scale(1.5);}
    75%     {rotate: -15deg;}
    100%    {rotate: 15deg; transform: scale(1);}
}
.title {
    font-family: "f25";
    font-size: 10vh;
    color: transparent;
    text-align: center;
}
.title div {
    margin-bottom: -50px;
}
.t_b {
    display: inline-block;
    font-size: 20vh;
    rotate: -5deg;

    box-sizing: border-box;
    -webkit-text-stroke: 5px blue;
    background: yellow;
    background-clip: text;

    margin: 0 -50px;
}
.t_r {
    display: inline-block;
    font-size: 20vh;
    rotate: 0deg;
    
    color: transparent;
    background: repeating-radial-gradient(circle at center, #ff7300 0%, #ff7300 4%, #e70909 5%, #e70909 9%);
    background-clip: text;

    margin: 0 -50px;
}
.t_u {
    display: inline-block;
    font-size: 20vh;
    rotate: 10deg;

    background: repeating-linear-gradient(to left, black 0, black 4px, transparent 5px, transparent 19px),
    repeating-linear-gradient(to top, black 0, black 4px, transparent 5px, transparent 19px), lime;
    background-clip: text;

    margin: 0 -50px;
}
.t_s {
    display: inline-block;
    font-size: 20vh;
    rotate: -8deg;

    background-image: url("../images/guymode.png");
    background-size: 150%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-clip: text;

    margin: 0 -50px;
}
.t_h {
    display: inline-block;
    font-size: 20vh;
    rotate: -2deg;

    text-shadow: #ff0000 10px 10px 0, #ff5100 20px 20px 0, #ffa600 30px 30px 0, rgb(251, 255, 0) 20px 20px 0;
    background: yellow;
    background-clip: text;

    margin: 0 -50px;
}
/* #endregion */

/* #region toolsGen */
#tools {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;
}
.tool {
    position: absolute;
}
.tool .tool-content, summary, details, .handle {
    pointer-events: all;
}
.handle {
    position: absolute;
    right: -3vw;
    top: 3.5vh;

    width: 5vh;
    height: 5vh;

    cursor: grab;
    z-index: 1;
}
.handle:hover {
    filter: brightness(1.5);
}
.tool summary {
    font-family: 'f25';
    font-size: 2vh;
    text-align: left;

    user-select: none;
}
.tool label {
    user-select: none;
}
.tool details {
    padding: .2vw;
    cursor: pointer;
}
#tools details[open] {
    font-weight: bold;
}
.tool-content {
    position: absolute;

    text-align: left;
}
/* #endregion */

/* #region toolsSpecific */

.preview {
    right: 1vw;
    top: 1vh;

    background: url("assets/ui_preview.png");
    background-size: contain;

    width: 10vw;
    height: 10vw;

    display: flex;
    justify-content: center;
    align-items: center;
}
.preview .handle {
    background: url("assets/ui_hold_preview.png");
    background-size: contain;

    right: 4.5vw;
    top: -.5vw;
    rotate: -16deg;

    width: 5vw;
    height: 5vw;
}
.saver {
    left: 2vw;
    bottom: 2vh;

    background: url("assets/ui_saver.webp");
    background-size: contain;

    width: 10vw;
    height: 10vw;

    display: flex;
    justify-content: center;
    align-items: center;
}
.saver:hover {
    filter: brightness(1.5);
}
.saver button {
    width: 100%;
    height: 100%;

    cursor: pointer;
    pointer-events: all;
    background: none;
    border: none;
}
.saver .handle {
    background: url("assets/ui_hold_saver.png");
    background-size: contain;

    right: -.3vw;
    top: 1.5vw;
    rotate: 16deg;

    width: 5vw;
    height: 5vw;
}
.mover {
    left: 80vw;
    bottom: 10vh;
    text-shadow: #FFF 0 0 .1vw, #FFF 0 0 .5vw, #FFF 0 0 1vw;
}
.mover .tool-content {
    background: url("assets/ui_mover.gif");
    background-size: cover;
}
.mover summary {
    margin-top: 2vw;
    width: 17vw;
}
.mover .handle {
    background: url("assets/ui_hold_mover.png");
    background-size: contain;

    left: 13vw;
    top: -.25vw;
    rotate: 40deg;

    width: 4.5vw;
    height: 4.5vw;
}
.shaver {
    right: 15vw;
    bottom: 20vh;
}
.shaver .tool-content {
    width: 11vw;

    background: gray;
    border-bottom-right-radius: 999px;
    border-bottom: 1vw solid silver;
    border-right: 1vw solid silver;
}
.shaver .handle {
    background: url("assets/ui_hold_shaver.png");
    background-size: contain;

    left: -5.3vw;
    top: -2.5vw;
    rotate: 0;

    width: 6vw;
    height: 6vw;

    z-index: 0;
}
.fencer {
    right: 15vw;
    top: 20vh;
}
.fencer .tool-content {
    width: 11vw;
    padding-top: 11vw;

    background: url("assets/ui_fencer.webp");
    background-size: contain;
    background-repeat: no-repeat;
}
.fencer summary {
    position: relative;
    top: -2vh;
    left: 4vw;
    z-index: 2;
    color: white;
}
.fencer .cape {
    position: relative;
    top: -2vh;
    right: -1.2vw;
    width: 10vw;
    background: black;
    color: white;
    padding: .5vw;

    box-sizing: border-box;
    border-left: groove #f701ff .3vw;
    border-right: dashed #01A600 .3vw;
    border-bottom: dotted #FF7101 .3vw;
}
.fencer .handle {
    background: url("assets/ui_hold_ringer.webp");
    background-size: contain;

    left: .2vw;
    top: .1vw;
    rotate: 0;

    width: 11vw;
    height: 11vw;
}
.fencer .handle:hover {
    filter: invert(.3);
}
.filler {
    left: 92vw;
    top: 45vh;
}
.filler .tool-content {
    width: 5vw;
    height: 9vw;

    background: url("assets/ui_filler.webp");
    background-size: 100%;
    background-repeat: no-repeat;

    color: white;
}
.filler textarea {
    position: relative;
    top: -5vw;
    left: -5vw;

    z-index: -1;

    width: 10vw;
    height: 5vw;
    rotate: 45deg;

    background: url("assets/ui_filler_streak.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    border: none;

    color: white;
    text-shadow: #000 0 0 .1vw, #000 0 0 .5vw, #000 0 0 1vw;
}
.filler .handle {
    background: url("assets/ui_hold_filler.webp");
    background-size: contain;

    top: 9.2vw;
    right: -5.5vw;
    rotate: 0;

    width: 5.5vw;
    height: 6vw;
}
.stretcher {
    left: 1vw;
    top: 1vh;
}
.stretcher .tool-content {
    width: 14vw;
    height: 3.2vw;

    background: url("assets/ui_stretcher.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.stretcher summary {
    position: relative;
    top: 1vh;
    left: 2.75vw;

    width: 8vw;
    z-index: 2;
}
.stretcher .dough {
    position: relative;
    top: 3vh;
    left: 1.5vw;

    width: 10vw;
    height: 9vw;

    padding-top: 2.5vw;

    background: url("assets/ui_stretcher_dough.webp");
    background-size: contain;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #000;
    text-shadow: #FFF 0 0 .1vw, #FFF 0 0 .5vw, #FFF 0 0 1vw;
}
.stretcher .dough input {
    width: 7vw;
}
.stretcher .handle {
    background: url("assets/ui_hold_stretcher.webp");
    background-size: contain;
    background-repeat: no-repeat;

    top: 0;
    left: 0;
    rotate: 0;

    width: 14.4vw;
    height: 3.2vw;

    z-index: 1;
}
.presets {
    left: 72vw;
    top: 45vh;

    background: url(assets/ui_drawer.jpg);
    background-size: cover;

    width: 15vw;
    height: 8vh;
}
.presets .handle {
    background: url("assets/ui_hold_preview.png");
    filter: hue-rotate(85deg);
    background-size: contain;
    background-repeat: no-repeat;

    top: -2vh;
    right: -1vw;
    rotate: 45deg;
    scale: 2;

    z-index: 1;
}
.presets .handle:hover {
    filter: invert(1);
}
.presets .tool-content {
    color: white;
    
    pointer-events: none;
}
.presets .tool-content summary {
    position: relative;
    top: 0;
    left: 0;

    width: 15vw;
    height: 8vh;
}
.presets .tool-content .drawer {
    width: 15vw;
    height: 40vh;

    position: relative;
    bottom: 50vh;
    left: -.5vw;

    background: url("assets/ui_drawer_inside.webp");
    background-size: cover;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: .5vw;
    row-gap: .5vw;

    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: brown black;
}
.presets .tool-content .drawer a {
    width: 4vw;
    height: 4vw;

    background: #00000059;
    border: 2px dashed black;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    pointer-events: all;
}
.presets .tool-content .drawer a:hover {
    border: 4px dashed white;
}
.presets .tool-content .drawer a.active {
    border: 4px dashed white;
}
/* #endregion */

/* #region presets */
.drawerPreview {
    width: 3vw;
    height: 3vw;

    box-sizing: border-box;
}
.guymode {
    background: url('https://toys.lexie.land/images/guymode.png');
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
}
.moon {
    background: black;
    border-left: 10px solid yellow;
    border-bottom: 10px solid yellow;
    border-radius: 999px;
}
.pillar {
    background: white;
    border-bottom: 4px solid blue;
    border-top: 4px solid blue;

    animation: pillar 2s linear infinite;
}
@keyframes pillar {
    0% { rotate: 0deg; }
    100% { rotate: 360deg; }
}
.orbit {
    border-radius: 999px;

    border-left: 12px dotted black;
    border-bottom: 8px dotted gray;
    border-right: 2px dotted lightgray;
    border-top: none;

    animation: pillar 2s linear infinite;
}
.light {
    background: white;
    border-radius: 999px;
    width: 20px;
    height: 20px;

    filter: drop-shadow(0 0 2px white) drop-shadow(0 0 5px yellow) drop-shadow(0 0 10px orangered);
}
.worm {
    height: 30px;
    border-radius: 999px;

    animation: worm infinite 1s linear;
}
@keyframes worm {
    0% {
        background-color: #fffb00ff;
        transform: translateX(-20px) scale(1);
    }
    25% {
        transform: scale(1.5);
    }
    50% {
        background-color: #0fc20fff;
        transform: translateX(20px) scale(1);
    }
    75% {
        transform: scale(1.5);
    }
    100% {
        background-color: #fffb00ff;
        transform: translateX(-20px) scale(1);
    }
}
.wiggly {
    background-color: #f701ff;
    border-radius: 999px;
    width: 30px;
    height: 30px;

    animation: wiggly .5s linear infinite;
}
@keyframes wiggly {
    0%, 100% { scale: 1; } 50% { scale: 1.5; }
}
.leaf {
    width: 35px;
    height: 35px;
    background: linear-gradient(to top left, green 0%, green 48%, orange 49%, orange 51%, green 52%, green 100%);
    border-left: orange 5px solid;
    border-bottom: orange 5px solid;
    border-radius: 999px 0px;
    transform-origin: top left;

    animation: leaf 5s ease-out infinite;
}
@keyframes leaf {
    0%, 100% { transform: translateX(50%) rotate(0deg); }
    50% { transform: translateX(50%) rotate(90deg); }
}
.jitter {
    width: 10px;

    background: black;
    border-radius: 999px;

    animation: jitter .5s linear infinite;
}
@keyframes jitter {
    0%, 100% {
        transform-origin: 50%;
        transform: translate(0, 0);
        box-shadow: #ff000038 8px -1px 0;
    }
    10% {
        transform: translate(-9px, 1px);
        box-shadow: #ff00009d 6px -7px 0;
    }
    20% {
        transform: translate(1px, -5px);
        box-shadow: #ff000080 0px -7px 0;
    }
    30% {
        transform: translate(-5px, -3px);
        box-shadow: #ff000038 1px 7px 0;
    }
    40% {
        transform: translate(4px, 2px);
        box-shadow: #ff000038 -9px 5px 0;
    }
    50% {
        transform: translate(-3px, -8px);
        box-shadow: #ff000038 -6px 3px 0;
    }
    60% {
        transform: translate(1px, -2px);
        box-shadow: #ff000038 -7px 1px 0;
    }
    70% {
        transform: translate(1px, 9px);
        box-shadow: #ff000038 6px 8px 0;
    }
    80% {
        transform: translate(-4px, 3px);
        box-shadow: #ff000038 2px -6px 0;
    }
    90% {
        transform: translate(-7px, 4px);
        box-shadow: #ff000038 -5px 1px 0;
    }
}
/* #endregion */