@font-face{font-family:"Courier Prime";font-display:swap;src:local("Courier Prime"),url("/assets/fonts/CourierPrime.woff2") format("woff2")}@font-face{font-family:"Berkeley Mono";font-display:swap;src:local "Berkeley Mono",url("/assets/fonts/BerkeleyMonoVariable-Regular.woff2") format("woff2")}.output:not(textarea){border:2px solid hsl(0,0%,50%);padding:10px;overflow-wrap:anywhere;text-align:center}.input,.output{width:100%;height:max(1em,auto);position:relative;border-radius:0;transition:border-color .2s ease}.decoded,.encoded{position:relative;display:flex;align-items:flex-start}.decoded .button,.encoded .button{position:absolute;right:8px;top:8px;background:hsla(0,0%,50%,.08);color:hsl(0,0%,50%);padding:6px 8px;border-radius:0;cursor:pointer;transition:all .2s ease;font-size:12px;z-index:10;border:1px solid hsla(0,0%,50%,.2);user-select:none;min-width:24px;text-align:center;line-height:1}.decoded .button:hover,.encoded .button:hover{background:rgba(0,223,11,.15);color:#00df0b;border-color:rgba(0,223,11,.3);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,223,11,.15),0 0 20px rgba(0,223,11,.1)}.decoded .button:active,.encoded .button:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,223,11,.2)}.decoded .button[title*=Copy],.encoded .button[title*=Copy]{font-family:monospace;font-weight:500;letter-spacing:.5px}.decoded .button[title*=Copy]::before,.encoded .button[title*=Copy]::before{content:"⎘";opacity:.8;transition:opacity .2s ease}.decoded .button[title*=Copy]:hover::before,.encoded .button[title*=Copy]:hover::before{opacity:1}.decoded .button.copied,.encoded .button.copied{background:rgba(0,223,11,.2);color:#00df0b;border-color:rgba(0,223,11,.4);animation:copySuccess .3s ease-out}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.utils{width:100%}.util.card{padding-bottom:2em}body{align-content:center;justify-content:center;vertical-align:middle;flex-wrap:wrap}#encoded,#decoded{width:100%;height:100%}.info{font-style:italic}table td:nth-child(2) input{margin:5px}#img-canvas{width:70%;height:auto}#img-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}#img-options caption{margin:1em}#img-convert{text-align:center;margin:1em}#img-convert label{font-size:1.5em}#emoji-output{font-size:4em}.qualityValue{top:1em}#img-drop{border:2px dashed hsl(0,0%,50%);border-radius:0;padding:15px;text-align:center;transition:all .3s ease;background:hsla(0,0%,50%,.05);cursor:pointer;user-select:none}#img-drop:hover{border-color:#00df0b;background:rgba(0,223,11,.1);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,223,11,.1)}#img-drop:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,223,11,.15)}#img-drop span.info{display:block;margin-bottom:10px;cursor:pointer;pointer-events:none}#img-drop input[type=file]{display:none}#img-button.disabled{opacity:.5;cursor:not-allowed}#img-download{display:inline-flex;align-items:center;gap:8px;margin:10px 0}#img-download .icon{width:16px;height:16px}#img-filename{display:block;margin:10px 0;font-size:.9em;color:hsl(0,0%,50%)}#base64-image-decode{margin:20px 0}#base64-image-decode textarea{font-family:monospace;font-size:.9em;resize:vertical;min-height:80px;border:2px solid rgba(0,0,0,0);transition:border-color .3s ease}#decoded-img{max-width:100%;height:auto;border:1px solid hsl(0,0%,50%);border-radius:0;margin:10px 0}.warning{color:#ff9800;font-weight:bold}.hidden{display:none !important}@media(max-width: 768px){#img-drop{padding:15px;margin:15px 0}}