html {font-size:62.5%;}
body {background-color:#000;color:#444;font-family:sans-serif;font-size:1.6rem;margin:0;position:relative;}

main {display:flex;justify-content:center;align-items:center;padding:4rem;}

canvas {image-rendering:optimizespeed;}
canvas#interface {cursor:none;margin-right:16px;position:absolute;z-index:1;}
main:not(.hideGrid) canvas#interface {background:transparent url('sprites/interface/grid.png') top left repeat;}
canvas#sprites {pointer-events:none;}

div#cursor {background-color:#fff;box-shadow:0 0 1px 1px #000;display:none;pointer-events:none;position:absolute;width:2px;height:2px;}
main.showCoords div#cursor:before {background-color:#000;border-radius:0.2rem;color:#fff;content:attr(data-coords);font-size:1.5rem;font-weight:bold;padding:0.1rem 0.6rem 0.3rem;position:absolute;left:1rem;top:0;white-space:nowrap;z-index:2;}

aside {position:fixed;right:3rem;z-index:2;}
aside {top:3rem;}
main.hideMenus aside {display:none;}

select {display:block;margin-bottom:0;width:18rem;}
select:first-child {margin-bottom:2rem;}

aside.buttons {display:flex;gap:1rem;bottom:3rem;top:auto;}
aside.buttons > div > * {background:#222 none 1rem center no-repeat;background-size:2rem;color:#fff;cursor:pointer;display:block;height:4rem;line-height:4rem;padding-left:4rem;padding-right:1rem;text-decoration:none;}
aside.buttons > div > *:not(:hover) {font-size:0;padding:0;width:4rem;}
#image {background-image:url('graphics/icon_image.svg');}
#load {display:none;}
#loader {background-image:url('graphics/icon_publish.svg');}
#save {background-image:url('graphics/icon_download.svg');}

footer {display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;}
footer a {color:inherit;text-decoration:none;}