header#header{display:flex;position:fixed;top:0;left:0;width:100%;align-items:center;justify-content:space-around;background:#000;padding:1em;gap:1em;z-index:100;height:80px}header#header div.left{display:flex;align-items:center}header#header div.left img{height:2em;opacity:0;animation:appear .5s ease-out forwards}header#header div.left div.title-wrapper{width:fit-content;overflow-x:hidden;padding-left:1em}header#header div.left div.title{color:var(--accent);font-size:1.5em;font-weight:600;opacity:0;animation:title-appear .5s ease-out forwards}header#header nav#nav{display:flex;gap:.5em;align-items:center}header#header nav#nav a{color:var(--fg2);padding:.5em 1em;border-radius:.5em;transition:.2s background-color,.2s color;text-transform:capitalize;opacity:0;animation:appear .5s ease-out forwards}header#header nav#nav a:nth-child(1){animation-delay:.3s}header#header nav#nav a:nth-child(2){animation-delay:.4s}header#header nav#nav a:nth-child(3){animation-delay:.5s}header#header nav#nav a:nth-child(4){animation-delay:.6s}header#header nav#nav a:hover{background-color:var(--bg)}header#header nav#nav a.active{color:var(--fg);background-color:var(--bg)}@media (max-width: 900px){header#header{justify-content:space-between}header#header div.left div.title{display:none}}@keyframes appear{to{opacity:1}}@keyframes title-appear{0%{transform:translate(-100%)}to{opacity:1}}section#convert{display:flex;align-items:center;position:relative;overflow-x:hidden}section#convert div.left,section#convert div.right{height:100%}section#convert div.left{width:min(50vw,80vh);height:min(50vw,80vh);display:flex;padding:2em 0 2em 2em;gap:0;flex-direction:row;perspective:1000px}section#convert button.image{width:100%;height:100%;background:none;background-position:center;background-size:cover;scale:.8;transition:.2s scale;border:.2em solid var(--fg);border-radius:1.5em}section#convert button.image:nth-child(1){opacity:0;animation:left-image-appear .5s ease-out .2s forwards}section#convert button.image:nth-child(2){box-shadow:0 0 10em #fff3;z-index:50;opacity:0;animation:center-image-appear .5s ease-out forwards}section#convert button.image:nth-child(3){opacity:0;animation:right-image-appear .5s ease-out .2s forwards}section#convert div.right{display:flex;flex-direction:column;justify-content:center;gap:1em;align-items:center;flex-grow:1;width:fit-content;height:fit-content;flex-shrink:0;padding:2em;opacity:0;animation:convert-message-appear 1s ease-out .5s forwards}section#convert div.right div.message{font-weight:800;font-size:2em;letter-spacing:0;line-height:1.2em;text-align:center}@media (max-width: 1300px){section#convert{font-size:.8em}}@media (max-width: 800px){section#convert{flex-direction:column;font-size:min(1em,4vw,3vh);position:relative}section#convert div.right{right:auto;padding:3em;border-radius:2.5em;position:absolute;bottom:0}section#convert div.left{width:100%;padding:2em;width:min(100vw,50vh);height:min(100vw,50vh);margin-bottom:30vh}}@keyframes left-image-appear{0%{transform:translateY(3em) rotateY(60deg)}to{opacity:1;transform:rotateY(30deg)}}@keyframes center-image-appear{0%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes right-image-appear{0%{transform:translateY(-3em) rotateY(-60deg)}to{opacity:1;transform:rotateY(-30deg)}}@keyframes convert-message-appear{to{opacity:1}}.theme-button{cursor:pointer;display:flex;justify-content:center;align-items:center;width:fit-content;padding:.67em 1em;border-radius:.5em;background:var(--accent);border:none;font-weight:700;font-size:1.5em;color:inherit;transition:.2s background-color,.2s box-shadow;color:var(--fg)}.theme-button.disabled{background:var(--bg2-hover);cursor:not-allowed}.theme-button:not(.disabled):hover{box-shadow:0 0 .5em var(--accent);background-color:var(--accent-light)}.theme-button:not(.disabled):active{background-color:var(--accent-dark);box-shadow:none}.theme-button svg{width:.5em;margin-left:.5em;fill:var(--fg)}section#scan{height:min(80vh,100vw);display:flex;background-image:url(/assets/bermudsk_map-7Oysk8GM.png);background-size:cover;background-position:center;image-rendering:pixelated;overflow:hidden}section#scan div.left{width:max(800px,50%);display:flex;justify-content:center;align-items:center}section#scan div.left div.content{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--bg);gap:1em;border-radius:2.5em;padding:3em}section#scan div.left div.content div.message{font-weight:900;font-size:2em;letter-spacing:0;line-height:1.2em;text-align:center}@media (max-width: 1300px){section#scan div.left{font-size:.8em}}@media (max-width: 1000px){section#scan div.left{width:100%;font-size:min(1em,2.5vw,3vh)}}div#home-page{margin-top:80px}footer#footer{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 50%,#000 50%);padding:1em}footer#footer div.info{color:color-mix(in srgb,var(--fg) 50%,transparent 50%);font-size:.75em;font-weight:500}footer#footer a{color:inherit}footer#footer a:hover{text-decoration:underline}@media (max-width: 1000px){div#home-page{font-size:.75em}footer#footer div.info{font-size:.8em}}div#image-view{height:calc(100vh - 80px);width:50%;display:flex;align-items:center;justify-content:center;position:fixed;top:80px;left:0;padding:2em;flex-direction:column;background-color:var(--bg);z-index:100;font-size:min(1.2vw,2.4vh);z-index:50}div#image-view:has(label.initial-upload){padding:0}div#image-view div#canvas-container{position:relative;height:fit-content}div#image-view div#canvas-container canvas#image-canvas{border:.2em solid var(--fg);image-rendering:pixelated;object-fit:contain}div#image-view div#canvas-container div#image-grid{display:grid;grid-template-columns:repeat(var(--width),1fr);position:absolute;top:.2em;left:.2em;width:calc(100% - .4em);height:calc(100% - .4em - 4px)}div#image-view div#canvas-container div#image-grid div{border:.05em solid #f00}div#image-view div#generating-preview{width:100%;height:100%;color:var(--bg2-active);background-color:var(--bg2);display:flex;align-items:center;justify-content:center;border:.2em solid var(--fg);width:min(25em,calc(25em * var(--aspect-ratio)));height:min(25em,calc(25em / var(--aspect-ratio)))}div#image-view div#generating-preview div.loading{width:calc(min(var(--aspect-ratio),1 / var(--aspect-ratio))*25em/2);height:calc(min(var(--aspect-ratio),1 / var(--aspect-ratio))*25em/2);border-radius:100%;background:conic-gradient(transparent 0deg,var(--fg) 359deg);position:relative;animation:rotate 1s infinite linear}div#image-view div#generating-preview div.loading:after{content:"";position:absolute;width:80%;height:80%;top:10%;left:10%;background-color:var(--bg2-solid);border-radius:100%}div#image-view div.icons{display:flex;gap:1.5em;margin-top:1.5em}div#image-view div.icons .icon{font-size:20px;background-color:var(--bg2);padding:.5em;border-radius:1em;cursor:pointer;transition:background-color .1s;width:3em;height:3em;display:flex;align-items:center;justify-content:center}div#image-view div.icons .icon:disabled{cursor:default}div#image-view div.icons .icon:hover:not(:disabled){background-color:var(--bg2-hover);transition:background-color .1s}div#image-view div.icons .icon:active:not(:disabled){background-color:var(--bg2-active);transition:background-color .1s}div#image-view div.icons .icon svg{width:100%;height:100%}div#image-view div.icons .icon svg path{stroke:var(--fg)}div#image-view div.icons .icon:disabled svg path{stroke:var(--bg2-active)}div#image-view label.initial-upload{display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--bg2-active);font-size:2em;cursor:pointer;width:100%;height:100%;transition:background-color .3s}div#image-view label.initial-upload:active{background-color:var(--bg2);transition:background-color .3s}div#image-view label.initial-upload svg{width:3em;height:3em}div#image-view label.initial-upload svg path{stroke:var(--bg2-active);transition:stroke .3s}div#image-view label.initial-upload:hover svg path{stroke:var(--fg);transition:stroke .3s}div#image-view label.initial-upload div.text{font-weight:800;color:var(--bg2-active);transition:color .3s}div#image-view label.initial-upload:hover div.text{color:var(--fg);transition:color .3s}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 100vh){div#image-view{width:100vw;height:40%;border-bottom:3px solid var(--bg2);font-size:min(2.4vw,.96vh)}}@media (max-width: 600px){div#image-view div.icons .icon{font-size:15px}}section#minecraft-version div.options{display:grid;grid-template-columns:repeat(4,1fr);gap:.75em}section#minecraft-version div.options div.option{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;position:relative}section#minecraft-version div.options div.option:before{background-image:url(/assets/minecraft_logo-Bf9XL00k.svg);background-size:80%;background-repeat:no-repeat;background-position:center;position:absolute;content:"";top:0;left:0;width:100%;height:100%;opacity:.5}section#minecraft-version div.options div.option div.version{font-weight:700;font-size:1.5em;z-index:10}section#minecraft-version div.options div.option div.sep{font-size:2em;line-height:.5em;z-index:10}div.mode-selector{display:flex;padding:.5em;background-color:var(--bg2);gap:.5em;border-radius:10em;align-items:center}div.mode-selector div.mode{padding:.5em 1em;border-radius:10em;cursor:pointer;transition:background-color .1s;text-transform:capitalize}div.mode-selector div.mode:not(.active):hover{background-color:var(--bg2-hover);transition:background-color .1s}div.mode-selector div.mode:not(.active):active{background-color:var(--bg2-active);transition:background-color .1s}div.mode-selector div.mode.active{background-color:var(--accent);cursor:default}section#map-size div.recommended{display:grid;grid-template-columns:repeat(var(--width),1fr);gap:.75em}section#map-size div.recommended div.option{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}section#map-size div.recommended div.option div.item-frames{display:grid;width:fit-content}section#map-size div.recommended div.option div.size{position:absolute;bottom:.3em}section#map-size div.custom{display:flex;background:var(--bg2);border-radius:.6em;gap:.25em;align-items:center;font-size:2em;position:relative;border:.1em solid var(--accent)}section#map-size div.custom input{background-color:var(--bg);font-size:1em;width:3em;color:var(--fg);border-radius:.5em;padding:.25em .4em}section#map-size div.custom input:first-child{text-align:right}section#map-size div.show-grid{padding:.5em 1em;border-radius:10em;background:var(--bg2);cursor:pointer;transition:background-color .1s}section#map-size div.show-grid:hover{background-color:var(--bg2-hover);transition:background-color .1s}section#map-size div.show-grid:active{background-color:var(--bg2-active);transition:background-color .1s}section#map-size div.show-grid.active{background-color:var(--accent);transition:background-color .1s}section#map-size div.show-grid.active:hover{background-color:var(--accent-light)}section#scaling-mode div.options{display:flex;gap:.75em}section#scaling-mode div.options div.option{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;position:relative}section#scaling-mode div.options div.option img{width:5em;height:5em}section#scaling-mode div.options div.option div.name{text-transform:capitalize;position:absolute;bottom:.3em}section#starting-map-id div.input-wrapper{display:flex;background:var(--bg2);border-radius:.6em;gap:.25em;align-items:center;font-size:2em;position:relative;border:.1em solid var(--accent)}section#starting-map-id div.input-wrapper input{background-color:var(--bg);font-size:1em;width:5em;color:var(--fg);border-radius:.5em;padding:.25em .4em}section#starting-map-id div.input-wrapper div.last-map-id{padding-right:.4em}section#dithering div.options{display:flex;gap:.75em}section#dithering div.options div.option{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}section#dithering div.options div.option:nth-child(2){background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA9SURBVDhPncgxDQAwEMSw0Ch/oPcEsqSTJbPtAfyKZVIziGVSM4hlUjOIZVIziGVSM4hlUjOIZVIziGXxADedixCMQXo7AAAAAElFTkSuQmCC);background-repeat:no-repeat;background-size:100%;background-clip:content-box;image-rendering:pixelated}section#dithering div.options div.option div.name{text-transform:capitalize}div#convert-page{overflow-x:hidden;margin-top:80px}div#convert-page .card{background-color:var(--bg2);border-radius:.75em;transition:background-color .1s,box-shadow .1s;cursor:pointer;position:relative;width:9em;height:9em;border:.2em solid transparent}div#convert-page .card.active{border:.2em solid var(--accent);cursor:default}div#convert-page .card:hover:not(.active){background-color:var(--bg2-hover);transition:background-color .1s,box-shadow .1s}div#convert-page .card:active:not(.active){background-color:var(--bg2-active);transition:background-color .1s,box-shadow .1s}div#convert-page div.settings{width:50%;margin-left:50vw;min-height:100vh;border-left:3px solid var(--bg2);display:flex;flex-direction:column}div#convert-page section{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5em;padding:2em}div#convert-page section:not(:last-child){border-bottom:3px solid var(--bg2)}div#convert-page section div.section-title{font-weight:900;font-size:2em;letter-spacing:0;line-height:1em;text-align:center}@media (max-width: 1700px){div#convert-page div.settings{font-size:1.2vw}}@media (max-width: 100vh){div#convert-page div.settings{margin-left:0;margin-top:40vh;width:100%;height:50%;border-left:none;min-height:unset}div#convert-page div.settings{font-size:2.4vw}}:root{--bg: hsl(240deg, 10%, 15%);--fg: hsl(240deg, 10%, 95%);--fg2: hsl(240deg, 10%, 70%);--link: #7c6aff;--bg2: color-mix(in srgb, var(--fg) 10%, transparent 90%);--bg2-solid: color-mix(in srgb, var(--fg) 10%, var(--bg) 90%);--bg2-hover: color-mix(in srgb, var(--fg) 15%, transparent 85%);--bg2-active: color-mix(in srgb, var(--fg) 20%, transparent 80%);--accent: #dd368f;--accent-light: color-mix(in srgb, var(--accent), #fff 25%);--accent-dark: color-mix(in srgb, var(--accent), #000 25%)}div#root{font-family:Verdana;color:var(--fg);background-color:var(--bg);min-height:100vh;position:relative;font-size:20px}*{border:none;outline:none;box-sizing:border-box}html{background-color:var(--bg)}body{margin:0}a{text-decoration:none;color:var(--link)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=file]{display:none}