html,
body {
    width: 100%;
    margin: 0px;
    background-color: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#container {
    /*
  border: solid;
  border-color: yellow;
  */
    width: 100%;
}

#toolbar,
#subtoolbars {
    touch-action: none;
}

#hcontainer {
    /*
  border: solid;
  border-color: blue;
    overflow: hidden;
    white-space: nowrap;
    */
    display: flex;
    flex-wrap: wrap;
}

#socialbar {
    /*
  border: solid;
  border-color: red;
*/
    display: block;
    width: 50px;
}

#mainbar {
    display: flex;
    flex-direction: column
}

#colorbar {
    /*
  border: solid;
  border-color: red;
*/
    display: block;
    width: 50px;
    float: left;
}

#colorselector {
    /*
  border: solid;
  border-color: red;
*/
    width: 51px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media (max-height: 1200px) {
    #toolbar {
        width: 100px;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        float: left;
    }
}

@media (min-height: 1201px) {
    #toolbar {
        width: 50px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        float: left;
    }
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

.subtoolbar {
    display: flex;
    flex-wrap: wrap;
}

.tool {
    width: 50px;
    height: 50px;
    padding: 0px 0px 0px 0px;
    vertical-align: middle;
    display: inline-block;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    border-radius: 0;
}

.toolImg {
    width: 36px;
    height: 36px;
}

.currentColor {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    border-radius: 0;
}

.color {
    width: 25px;
    height: 25px;
    margin: 0px;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    border-radius: 0;
}

.colornav {
    width: 25px;
    height: 25px;
    margin: 0px;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    border-radius: 0;
    text-align: center;
    padding: 3px 2px;
    line-height: 1em;
}

#modifier-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 5px;
}

.shift-toggle {
    width: 50px;
    height: 32px;
    margin: 0px;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    border-radius: 0;
    text-align: center;
    font-size: 10px;
    font-weight: normal;
    padding: 0px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-active {
    background-color: #ffeb3b;
    font-weight: bold;
}

#status-bar {
    background-color: transparent;
    border-top: none;
    padding: 8px 12px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
    text-transform: uppercase;
    clear: both;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 800px;
    box-sizing: border-box;
}

.status-section {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-section:first-child {
    text-align: left;
    flex: 2;
}

.status-section:nth-child(2) {
    text-align: center;
}

.status-section:last-child {
    text-align: right;
}

#status-bar strong {
    color: #000;
    font-weight: bold;
}

#current-tool-name,
#current-subtool-name,
#current-color,
#active-modifiers,
#timer {
    color: #000;
    font-weight: normal;
}

.timer-expired {
    color: #cc0000;
    font-weight: bold;
}

.alphabet {
    line-height: 1em;
    margin: 0;
}

.github {
    width: 16px;
}

#paint {
    display: grid;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#kiddopaint {
    border: 1px solid #00f;
    cursor: crosshair;
    grid-column: 1;
    grid-row: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#tmpCanvas {
    border: 1px solid #00f;
    grid-column: 1;
    grid-row: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#previewCanvas {
    border: 1px solid #00f;
    grid-column: 1;
    grid-row: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#animCanvas {
    border: 1px solid #00f;
    grid-column: 1;
    grid-row: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#bnimCanvas {
    border: 1px solid #00f;
    grid-column: 1;
    grid-row: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

h1 {
    font-size: 3em;
    margin: 0.5ex;
}

emj {
    font-family: 'Apple Color Emoji';
    font-size: 2em;
    height: 50px;
}

.pixelated {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.cursor-bucket {
    cursor: url(/img/cursor-fill-bucket.png) 14 16, auto;
}

.cursor-guy-smile {
    cursor: url(/img/cursor-guy-smile.png) 8 8, auto;
}

.cursor-guy-wow {
    cursor: url(/img/cursor-guy-wow.png) 8 8, auto;
}

.cursor-paint-brush {
    cursor: url(/img/cursor-paint-brush.png) 16 16, auto;
}

.cursor-pencil {
    cursor: url(/img/cursor-pencil.png) 7 16, auto;
}

.cursor-tnt {
    cursor: url(/img/cursor-tnt-anim.gif) 4 7, auto;
}

.cursor-none {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8zwQAAgYBAyKDV6YAAAAASUVORK5CYII=), default;
}

.cursor-crosshair {
    cursor: crosshair;
}

.cursor-lollipop {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🍭</text></svg>") 16 0, auto;
}

.cursor-pancakes {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🥞</text></svg>") 16 0, auto;
}

.sprite {
    object-fit: none;
    width: 32px;
    height: 32px;
}

.sprite-pos-0-0 {
    object-position: 0px 0px;
}

.sprite-pos-0-1 {
    object-position: 0px -32px;
}

.sprite-pos-0-2 {
    object-position: 0px -64px;
}

.sprite-pos-0-3 {
    object-position: 0px -96px;
}

.sprite-pos-0-4 {
    object-position: 0px -128px;
}

.sprite-pos-0-5 {
    object-position: 0px -160px;
}

.sprite-pos-0-6 {
    object-position: 0px -192px;
}

.sprite-pos-0-7 {
    object-position: 0px -224px;
}

.sprite-pos-1-0 {
    object-position: -32px 0px;
}

.sprite-pos-1-1 {
    object-position: -32px -32px;
}

.sprite-pos-1-2 {
    object-position: -32px -64px;
}

.sprite-pos-1-3 {
    object-position: -32px -96px;
}

.sprite-pos-1-4 {
    object-position: -32px -128px;
}

.sprite-pos-1-5 {
    object-position: -32px -160px;
}

.sprite-pos-1-6 {
    object-position: -32px -192px;
}

.sprite-pos-1-7 {
    object-position: -32px -224px;
}

.sprite-pos-2-0 {
    object-position: -64px 0px;
}

.sprite-pos-2-1 {
    object-position: -64px -32px;
}

.sprite-pos-2-2 {
    object-position: -64px -64px;
}

.sprite-pos-2-3 {
    object-position: -64px -96px;
}

.sprite-pos-2-4 {
    object-position: -64px -128px;
}

.sprite-pos-2-5 {
    object-position: -64px -160px;
}

.sprite-pos-2-6 {
    object-position: -64px -192px;
}

.sprite-pos-2-7 {
    object-position: -64px -224px;
}

.sprite-pos-3-0 {
    object-position: -96px 0px;
}

.sprite-pos-3-1 {
    object-position: -96px -32px;
}

.sprite-pos-3-2 {
    object-position: -96px -64px;
}

.sprite-pos-3-3 {
    object-position: -96px -96px;
}

.sprite-pos-3-4 {
    object-position: -96px -128px;
}

.sprite-pos-3-5 {
    object-position: -96px -160px;
}

.sprite-pos-3-6 {
    object-position: -96px -192px;
}

.sprite-pos-3-7 {
    object-position: -96px -224px;
}

.sprite-pos-4-0 {
    object-position: -128px 0px;
}

.sprite-pos-4-1 {
    object-position: -128px -32px;
}

.sprite-pos-4-2 {
    object-position: -128px -64px;
}

.sprite-pos-4-3 {
    object-position: -128px -96px;
}

.sprite-pos-4-4 {
    object-position: -128px -128px;
}

.sprite-pos-4-5 {
    object-position: -128px -160px;
}

.sprite-pos-4-6 {
    object-position: -128px -192px;
}

.sprite-pos-4-7 {
    object-position: -128px -224px;
}

.sprite-pos-5-0 {
    object-position: -160px 0px;
}

.sprite-pos-5-1 {
    object-position: -160px -32px;
}

.sprite-pos-5-2 {
    object-position: -160px -64px;
}

.sprite-pos-5-3 {
    object-position: -160px -96px;
}

.sprite-pos-5-4 {
    object-position: -160px -128px;
}

.sprite-pos-5-5 {
    object-position: -160px -160px;
}

.sprite-pos-5-6 {
    object-position: -160px -192px;
}

.sprite-pos-5-7 {
    object-position: -160px -224px;
}

.sprite-pos-6-0 {
    object-position: -192px 0px;
}

.sprite-pos-6-1 {
    object-position: -192px -32px;
}

.sprite-pos-6-2 {
    object-position: -192px -64px;
}

.sprite-pos-6-3 {
    object-position: -192px -96px;
}

.sprite-pos-6-4 {
    object-position: -192px -128px;
}

.sprite-pos-6-5 {
    object-position: -192px -160px;
}

.sprite-pos-6-6 {
    object-position: -192px -192px;
}

.sprite-pos-6-7 {
    object-position: -192px -224px;
}

.sprite-pos-7-0 {
    object-position: -224px 0px;
}

.sprite-pos-7-1 {
    object-position: -224px -32px;
}

.sprite-pos-7-2 {
    object-position: -224px -64px;
}

.sprite-pos-7-3 {
    object-position: -224px -96px;
}

.sprite-pos-7-4 {
    object-position: -224px -128px;
}

.sprite-pos-7-5 {
    object-position: -224px -160px;
}

.sprite-pos-7-6 {
    object-position: -224px -192px;
}

.sprite-pos-7-7 {
    object-position: -224px -224px;
}

.sprite-pos-8-0 {
    object-position: -256px 0px;
}

.sprite-pos-8-1 {
    object-position: -256px -32px;
}

.sprite-pos-8-2 {
    object-position: -256px -64px;
}

.sprite-pos-8-3 {
    object-position: -256px -96px;
}

.sprite-pos-8-4 {
    object-position: -256px -128px;
}

.sprite-pos-8-5 {
    object-position: -256px -160px;
}

.sprite-pos-8-6 {
    object-position: -256px -192px;
}

.sprite-pos-8-7 {
    object-position: -256px -224px;
}

.sprite-pos-9-0 {
    object-position: -288px 0px;
}

.sprite-pos-9-1 {
    object-position: -288px -32px;
}

.sprite-pos-9-2 {
    object-position: -288px -64px;
}

.sprite-pos-9-3 {
    object-position: -288px -96px;
}

.sprite-pos-9-4 {
    object-position: -288px -128px;
}

.sprite-pos-9-5 {
    object-position: -288px -160px;
}

.sprite-pos-9-6 {
    object-position: -288px -192px;
}

.sprite-pos-9-7 {
    object-position: -288px -224px;
}

.sprite-pos-10-0 {
    object-position: -320px 0px;
}

.sprite-pos-10-1 {
    object-position: -320px -32px;
}

.sprite-pos-10-2 {
    object-position: -320px -64px;
}

.sprite-pos-10-3 {
    object-position: -320px -96px;
}

.sprite-pos-10-4 {
    object-position: -320px -128px;
}

.sprite-pos-10-5 {
    object-position: -320px -160px;
}

.sprite-pos-10-6 {
    object-position: -320px -192px;
}

.sprite-pos-10-7 {
    object-position: -320px -224px;
}

.sprite-pos-11-0 {
    object-position: -352px 0px;
}

.sprite-pos-11-1 {
    object-position: -352px -32px;
}

.sprite-pos-11-2 {
    object-position: -352px -64px;
}

.sprite-pos-11-3 {
    object-position: -352px -96px;
}

.sprite-pos-11-4 {
    object-position: -352px -128px;
}

.sprite-pos-11-5 {
    object-position: -352px -160px;
}

.sprite-pos-11-6 {
    object-position: -352px -192px;
}

.sprite-pos-11-7 {
    object-position: -352px -224px;
}

.sprite-pos-12-0 {
    object-position: -384px 0px;
}

.sprite-pos-12-1 {
    object-position: -384px -32px;
}

.sprite-pos-12-2 {
    object-position: -384px -64px;
}

.sprite-pos-12-3 {
    object-position: -384px -96px;
}

.sprite-pos-12-4 {
    object-position: -384px -128px;
}

.sprite-pos-12-5 {
    object-position: -384px -160px;
}

.sprite-pos-12-6 {
    object-position: -384px -192px;
}

.sprite-pos-12-7 {
    object-position: -384px -224px;
}

.sprite-pos-13-0 {
    object-position: -416px 0px;
}

.sprite-pos-13-1 {
    object-position: -416px -32px;
}

.sprite-pos-13-2 {
    object-position: -416px -64px;
}

.sprite-pos-13-3 {
    object-position: -416px -96px;
}

.sprite-pos-13-4 {
    object-position: -416px -128px;
}

.sprite-pos-13-5 {
    object-position: -416px -160px;
}

.sprite-pos-13-6 {
    object-position: -416px -192px;
}

.sprite-pos-13-7 {
    object-position: -416px -224px;
}