:root{--width:1080px;--height:1920px;--fontSize:100px;--scale:.5;--yellow:#ffc600;--syntax-yellow:#fabf46;--green:#b2ff00;--blue:#193549;--dark:#1e131e;--light:#fff;--checkerboard:linear-gradient(45deg, #fff 25%, transparent 25%), linear-gradient(-45deg, #fff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #fff 75%), linear-gradient(-45deg, transparent 75%, #fff 75%)}html{color:#fff;font-family:Radnika Next,sans-serif;font-size:10px}body{background:var(--dark);justify-content:center;display:grid}.overlay{width:var(--width);height:var(--height);background:0 0;place-items:center;margin:0 auto;transition:all .2s;display:grid;container:overlay/inline-size}.preview .overlay{background-size:contain;max-width:100%;overflow:hidden}h2{font-size:var(--fontSize);color:#000;letter-spacing:-5px;text-align:center;transform-style:preserve-3d;margin-top:-80px;margin-bottom:-80px;font-weight:900;line-height:1}.text{background:#fff url(/assets/blackgrit-BuWxgsi2.png) 50%/500px;width:100%;position:relative}.text:before,.text:after{content:"";z-index:-1;pointer-events:none;background-image:url(/assets/rip-B6Fq7m0V.svg);background-size:100%;width:calc(100% + 50px);height:100px;display:block;position:absolute;top:0;transform:translate(-25px)translateY(-50%)rotate(-3deg)}.text:after{background-image:url(/assets/rip-B6Fq7m0V.svg);background-position:bottom;top:auto;bottom:0;transform:translateY(50%)}.shortBoi .text{background-color:#0000;background-position:50%;background-size:contain}.shortBoi .text:before{transform:translateY(-20%)}.shortBoi .text:after{transform:translateY(25%)}.shortBoi .text h2{margin:0}.grit{--bg-x:calc(1px * var(--randomX,1));--bg-y:calc(1px * var(--randomY,1));background:url(/assets/blackgrit-BuWxgsi2.png) 50%;background-position:var(--bg-x) var(--bg-y);z-index:4;pointer-events:none;width:100%;height:100%;display:none;position:absolute;rotate:6deg}.grit.white{z-index:5;background-image:url(/assets/whitegrit-D_d8Ws2A.png)}mark{z-index:2;background:0 0;position:relative}mark:before{content:"";background:var(--yellow);z-index:-1;width:100%;height:50%;display:block;position:absolute;top:0;left:0;transform:translateY(50%)rotate(-1deg)}.output{text-align:center}.output img{--checkerboardSize:5px;--checkerboardHalf:calc(var(--checkerboardSize) / 2);--checkerboardNeg:calc(var(--checkerboardHalf) * -1);background-size:var(--checkerboardSize) var(--checkerboardSize);background-position:0 0,0 10px,10px -10px,-10px 0;background-position:0 0, 0 var(--checkerboardHalf), var(--checkerboardHalf) var(--checkerboardNeg), var(--checkerboardNeg) 0px;background-color:#ccc;background-image:var(--checkerboard);border:1px solid #000;width:50px}.wrap.preview{scale:var(--scale);transform-origin:top;margin:0 auto}.wrap{grid-template-rows:1fr auto;grid-template-columns:auto auto;display:inline-grid}.wrap .displaySize{color:#fff;text-align:center;justify-content:space-between;align-items:center;gap:30px;margin:0;padding-block:20px;font-size:30px;display:flex}.wrap .displaySize:before,.wrap .displaySize:after{content:"";background:#fff;block-size:2px;inline-size:50%;display:block}.wrap .displayHeight{writing-mode:vertical-rl;grid-area:2/2}.wrap .overlay{grid-area:2/1}.controls{text-align:center;gap:20px;max-width:800px;margin:20px auto;display:grid}.controls button{border:1px solid var(--light);color:var(--light);background:0 0;border-radius:20px;place-items:center;gap:10px;padding:5px 10px;font-family:Radnika Next,sans-serif;font-weight:600;display:flex}.controls textarea{text-align:center;resize:vertical;border:1px solid var(--light);width:50%;height:100px;color:var(--light);background:0 0;border-radius:20px}.controls .group{justify-content:center;place-items:stretch center;gap:20px;display:flex}.controls label{grid-auto-flow:column;place-items:center;gap:20px;display:inline-grid}.controls label.toggle{align-items:center;gap:10px;display:inline-flex}.controls label.toggle input{accent-color:var(--yellow)}.controls .sizeVisual{aspect-ratio:16/9;background:#ffffff4d;border:.5px solid #fff;height:15px;display:inline-block}.controls button[data-width="1080px"][data-height="1920px"] .sizeVisual{aspect-ratio:9/16}.controls button[data-width="1920px"][data-height="1920px"] .sizeVisual{aspect-ratio:16/16}.controls .sizeText{font-size:10px}
