:root {
  --bgColor: #000000cf;
  --textColor: #f5f5f5;
  --highlightColor: rgb(201, 239, 12);
  --fullMenuWidth: 120px;
  --halfMenuWidth: clamp(40px, 9vh, 60px);
  --quarterMenuWidth: 30px;
  --bg1: rgb(255, 255, 255);
  --bg2: rgb(167, 166, 188);
  --bg3: rgba(240, 166, 17, 0);
}

body {
  top: 0px !important;
  text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  font-family: Tahoma, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1em;
  /* utility */
}
body > .skiptranslate {
  display: none !important;
}
body:not(:has(#helpContainer.hide)) {
  overflow-x: hidden;
}
body .hide {
  display: none !important;
}
body ::selection {
  background-color: var(--highlightColor);
  color: black;
}
body .trim {
  color: var(--highlightColor);
}
body .showTouch {
  display: none !important;
}
body button:active {
  background-color: var(--highlightColor);
}
body a {
  color: inherit;
}
body a:hover {
  filter: none !important;
  background-color: var(--highlightColor);
  cursor: pointer;
}
body a:hover span {
  color: var(--highlightColor);
  filter: invert(100%) grayscale(70%) contrast(1000);
}
body .smallLogo {
  width: 100px;
}

/*===================================
                CANVAS
=====================================*/
#mainContainer {
  background: radial-gradient(circle farthest-side at 0% 50%, var(--bg1) 23.5%, var(--bg3) 0) 21px 30px, radial-gradient(circle farthest-side at 0% 50%, var(--bg2) 24%, var(--bg3) 0) 19px 30px, linear-gradient(var(--bg1) 14%, var(--bg3) 0, var(--bg3) 85%, var(--bg1) 0) 0 0, linear-gradient(150deg, var(--bg1) 24%, var(--bg2) 0, var(--bg2) 26%, var(--bg3) 0, var(--bg3) 74%, var(--bg2) 0, var(--bg2) 76%, var(--bg1) 0) 0 0, linear-gradient(30deg, var(--bg1) 24%, var(--bg2) 0, var(--bg2) 26%, var(--bg3) 0, var(--bg3) 74%, var(--bg2) 0, var(--bg2) 76%, var(--bg1) 0) 0 0, linear-gradient(90deg, var(--bg2) 2%, var(--bg1) 0, var(--bg1) 98%, var(--bg2) 0%) 0 0 var(--bg1);
  background-size: 40px 60px;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  position: relative;
}
#mainContainer #bgCanvas,
#mainContainer canvas.main,
#mainContainer canvas.grid,
#mainContainer canvas.tools,
#mainContainer #selectionCanvas {
  position: absolute;
  z-index: 100;
}
#mainContainer canvas.main {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: url("../img/transparent-slashG.png");
  background-size: 8px;
  background-repeat: repeat;
  transform-origin: top left;
  box-shadow: 0 0 0 1px white, 0 0 0 3px black;
}
#mainContainer canvas.main.noGrid {
  background: none !important;
}
#mainContainer canvas.grid {
  z-index: 120;
}
#mainContainer canvas.tools {
  z-index: 140;
}
#mainContainer canvas.tools.move {
  cursor: url(data:image/png;base64,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), auto;
}
#mainContainer canvas.tools.eraser {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACalBMVEUAAAD7rLD8tLT7u7n6s7j8pqb3vr74wsH9mpv3xsL7zsr9pKT/p6f+zsv9r678r679vr3+t7f7zMj8n5/8q639sK74wMD6vLn6tLX7x8f8np/+qan7yMn8rqz8w8P+vr78srL7zs38mpr5xsf9q637t7b7uLX9raz4ys78wcD9xMT+r6/6r675ubf3wMLrmZr7trbyyMXxiYr9qqn4zcvvgoP7urfw0M71hYf4s7P30crxjI7skZLwjJDui4zqqaXwpqrwiInrnp7+qaj/q6r/oKH9o6P+s7H+paT9oZ/8nJ39tLH/qqn/o6P9o6T+np/9lZf8rq3+sa/+o6P+oaH+oKL/nZ78lpj8paX+paX9oqH+n5/8mpz8sq//oaH+o6L9oaH+n6D/paT/oqP9k5X8rav+r63+oKD/n6H+p6f8kpX7o6T+sq/+paP/oKD/nqD+r6z+qaf9oKD/nZ/9o6L+oqH8kpT8q6n/r6z+nJ3/nJ3/oqL/oqH+n6H+pKT8kZL8n5/+sa7+nZ//np/+nZ7+oqL/np79k5b9r6z/pqb/n57/nJz+nZ3+pqT8jY/8qan+rqv/nZz+m5r+nZz/np38kJL8o6P/nJ7/npz9mZ38oKH9q6r/qKb/nZ3/nJv+nJv/n6D/o6H9mpr2jIvzgoT7oJ//pqX+m5v6lZX0f4Hvd3jsdHbwf4L+pKX9mZjzcnTvdXjvfoDwfX/tcXbygoX/m5z+np3ycHHveXvwen3xeXrucHL/oaL/mZrwbW/wd3nxeHrwdnjyg4XxbnLwfH7we3zvcHL2fYDydHbxeXnydXrxfX/xfH4AAADNxtUiAAAAQ3RSTlMAZPt9FcxVMP4rFvLgBrC1YHMS85yrNl2VFPTuDbRgaLgY+C6yj2viBCNWvLVrKYSCAs/eC95PD96eDdx/psQaLahBU56ZCQAAAAFiS0dEAIgFHUgAAAAJcEhZcwAALiMAAC4jAXilP3YAAAFdSURBVDjLY2AYnICRiRmfNAurs4srG255dg43dw9XT05c8lzcXt4+vn7+PLw4FPAFBAb5BoeEhvFjlxcIj/CODI6Kdg0JE8QmLyQcE+scF5+QmBSSLIJNgWhKalpIvGu6R3xGphgWefGs7Jzc9PTEvNyQfAks8pJSMQWFRf5hxfElpdIyWBTIlpVXJEZXVlXX1NbJYZGXr29ojG/Kb25pDWlTwCKvqNTe0ZnY1d3jmt/Sq4xFgUpf/4S81omTJif6T1HFIq82dVpjYvOUKdNd/Weoa2DKa86cNXtO4tx587sW+C/UwmKA9qLFS5YuWz5pflfPXB0s8rorVq5avWZt3LoFLVOS9LAo0F+/YeOmzVs6fcO2bjPAFgmGRtt37Ny1e4nznr3GDFiBiem+/QcO7j7km2eGXQGDucXhI0d3HjtuyYALWFmfOHnqtA0DHmB7xs4enzyDg6MTw0AAAL9gbGdpHGelAAAAAElFTkSuQmCC) 6 26, auto;
}
#mainContainer canvas.tools.pen {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB3VBMVEUAAADAwMAoKCgwODUABQMAAAAKEA0ACQQLEQ4ABwEMDAxNTU0ACgIiIiIACAAHBwdLS0sACAAGDQpBQkIACQAHDApJSUkACAAJEA1KSkoABgAIEg4iJCMACAANFBEYGRgABwALFBAvLy8AAAASFxWpqqoABwATGRcFFA4XHBpGVU8VGxkAAAAeICAvPjgoKilHU04AAgA9QD5GU04MHhdoamqwrq9gYGAKGxRZWlodKSQXJB5hYWEAAAAhAAfLAFSNADxJIDD/AHH/AG1+ADYCAAAOAAPVAVtzI0QfLif5AWL/AHlaACYEAADjAF3/AHL/AGhdIDhPLzyzBEsGAAANAALZAFn/AG7nAFvxAGD/AHhRFCwLAAHkAF7/AG/mAFzpAF3/AHS0AEgDAAAbAAjjAF7rAF6lAEMVAATzAGPlAFvsAF7/AHWjAEIaAAfoAF//AGzmAFvsAF//AHOUADwXAAXzAGWcAD4+ABT+AGj/AGrtAF+RADsLAgRALDTwBGb/AGSNADkRAAD1AGOIH0kEMh/fBl1/ADTcJ3HdAFqGGUVAMzh/AzRjETH/Wq7aLnXHAE4/DSHsP4T/RpT/WKn/MotaACGMGkf/Wb7/RJGjKlweAQ2NHUuzM28WAAfX19OIAAAAPXRSTlMAGiS90KnDpr+xyA+wqL7eH7nUC8TXAcTHA9HKB8zBA9bECNa1E+S03axhr+WgW5lL549twEcEZ7dGeH0aLP1oCgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEHSURBVDjLY2AYuoCRiYACZhb88qy2tmz45Nnt7B1sOXDLc9o6Ojm7uHJx45DncXP38PTy9rHlxS7P5+vnHxAYFBzCL4BVXjA0LDwiMiraVkgYq7xITGxcfEJiUrKoGFZ58ZRU5/g0p3RbCUms8lIZmc5Z2Tm5ttJYpWVk8/ILCouKS2zlsMrLK5SWFcRn55TbKmKVV1KuqKyKr3aqsVXBKq+qVltX31CU02irjj18NJqaW1rbvNttNbHLa9l2dDZ0dffYauOIAJ3evv4JThNtdXHI69lOmjxl6jRbfRzyBobTZ8ycNdvWCIc8g7HtnLnzbE1McckzmJnb2lpYMuADVtY2DIMWAABHODupA15icgAAAABJRU5ErkJggg==) 6 26, auto;
}
#mainContainer canvas.tools.pen.drawLocked {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAE6UlEQVRYw+2Va0zVZRzHP+c85wYc8HCTq3JETDA82FDUUkHNvKCZgVvKxUxN1NShtfJNaTlLh900pDbTzLzQFuKlxFaK6SQ0i2aiIMeaBEMJSJsezul/fr3AF9o0L/Oyub5vnhfPf9/P9//9PdsP/tf/elC1b9++yPj4+Lj7FqDPgH7fYFQ/3S/+VkAA8bX5f3dv0T6GTd0wy2EyZSWDBBC/wIC99wZu1pUCMtreR4R8EebKq6SIHsRqtVaMGzeu092D++q3BaDkF12WLOz+uMQ4ekq77jkRFslkHhJAYmNjt9wduIVvDSBnyBFhgQh5kmMfIOOTBskOQ7qYQMxmszM9PT3mbsDL/NHLSSaJME8ayZI/eVaEV2RCSKIAYvL3PTZ02DC/Ow/34YAfOqknV4T50kC2NJEjwouyk1GiQMxW3+rRo0fr7safH4jCImfIFWGuNJAt58gVIV8+Y7gA4mPzPzRmzBj1Xza3l8xEVajb4HAyBSu+NNCCGUUwYRye1xVr3nBCQ0M9QUFBLUATsEYpVXQtK8OtcGPjupud9XUHI11mx1GewYoPjbRgxkAwIVQuTkCNdTB7Zh7tLpdRRMI6BdrC3lu1ao2maSFKqaW33Xh4RLjCzPEwjHKBGSK8IA1kSzO5Irwk2wfOktraWklJ7itf7tolTqdT6urqpHhrsTw2cKDU19eLpmlJtzWCpKQkS1VV1dEhhCTsIxMdeho5jxlFEEG8TyWd1s+g9mQNjiQHmRMnvgFsvuw/94PVq/N0Oh2z58xZoZR6+Upv/Y3gW4uLg6tOVJ3y0xsS9Il2zhu8gBsTiiA68zYVzOcg8QkJZ391nialf3+AWiAYCAJOpKamcqK6GsB2y28ge/b0ysB2ouqZwqoLDYQ4yqg9NgS7O5rFfM0SjpA2YvjuvsnJo9weN/vLy+ndu/cGj8fTATAa+f5QBZcuXgJ4XtO0ZUqp325q7k9MHD8VkFM986WOySJMl2URIyQteYC8pvoKIKFRESWapq1Yt/ZjsUd3kfCQUOkSESkxUdESExUt0eEREh4SKt26dJWNGz4VTdPeuukR7Pm8dOm0wEfonjwYzRFFBWdZ1JiI1DSxRDtCV7v9k3O/N04ABm4rKUEphdVqxWw2k5GZSc6UXCwWC35+fuj1eoq3bAEYdFMjSBoyIKtqf0XkckcGNDfQo1dfehg6k3W0kPILp4nvlfDRiePVMy9/3t7J1rHo3O3t9EtJYcXKAnQ63d621tahJV+UYLFYsAUGArhu2MDIjCfTqw5UFBREjiQ48lHwamz8eQcxP77OJk4zOG3Iu1fAOyQdhzIYqKk5ibOujra2tqGHKw9jNBqv2/I1GxCIxUu4ThnYWVPKtB+KOEs71q5h5Xljc94sKiwsu56hUorm5j/YUbqdhxMTcTqd2Gw2vF7vzQeYnTV1TaR/kHvh+vVFnAHfqJDdk1Iz3tm8adOeosLCa/q4XC50Oh0igslkorq6mpbWFnx8fBDpqOfSxYsAxhsGeOrpCX8DH3ZJiAt0e9zGMYOHr123bl0D11eTvZudikOHMBmNGI1G9pSV4fV6sVgsiAgej4fYuDiAq3zuyJrUNC2trbV174L8BbhdLowm01X3brebgAB/lhcUEBAQkKqU2n9HA1wOMQ6YBVgA7V/XCviLjq341Z1iPhj6B0sx8sXLny9IAAAAAElFTkSuQmCC) 6 26, auto;
}
#mainContainer canvas.tools.clenchedFist {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC3FBMVEUAAABmZ2tZW2BfYmZeYGVfYWVfYWVvcXY+PkEuMDMAAhQAAxkBCx8ABRkAAxgABhwBCR8BBh0ABA86OTc7PUBISEpKTlUSFiEAAAUrLC4AAAJmZ2xSUlJcXWJyc3c7P0tdX2RdX2QnLDwnLT1eYWVfYWZeYGQnLTxVV1whJzdYWV6KjI9JTluBg4dDRUsAAAAAABErMDs7PUFtbW4AAAAcHSADBxAoKS4SFRoAAgY+QEUbHycAAAAAAAQAAAQAAAAaHig9PUB1d3xVV1x0dXoAAABQOwhqTgpZOwBmTA1pUQ9iRgdbPQRuVA03KAOmgCX/8U3/3jv/uRj/40L/7Uz+1DP5uhj/8Ez/20JWPg0KBwAVDABeRhD/1kH/2EX3vTLioBT9xTr/zULzuCzjoBT/y0H/5UXNpTBNOw71wT71ui/koRX/zD//zUP3vjLjoBX/zEH/3EPPpTAIAADzyz7/5kn3wzLqphX/0Ub4wDXioRX9yD30ui7joRX/20PPoS8lHQD/30T/0EXyty3clw75vzP8wjfxsyjdmA32ui/srSLdmhH/yj7/4UjPpDIlGQD/3UfusCTclgvemg/inxPhnhLgnRHemQ7fmw//vCPOozEoHQD/xS7dmQz5wTb/zEL+xzz+xjv+yD3/y0D+xzv/yT//yj/5vjT8tRuzegYqIAH6tB3nrB//10z/yD3/3kWwew3/yDLemQz8wzj6wTb6wDX/yT7/3UTJni4lGgD/3kfxtCjgnBDhnxL8xDnPpTEmGwD/2UL/zkP+yT37wjb8xDj5wDTfnBAKAgD7xTz/zj+6kSnFpDL/xz3fnRH3vTH/xjz/4kVvXBlkTxD/yz7sriL7wzj/1UHxxjwMAwDDnzD/50f/xzz/0D//6EdyWRYPCQDesjb/6Uf/yT2adiMGAAChfCT/3UP/4EX5xTxqURUpHweEZhu1jCS8kiiqhCJwVhcOCQAAAAcAAALCBNptAAAARXRSTlMABw8LCwsMDQIe2OXe3t7e4OCNBV8NF3HnCvsKAQsDZwsNq6cLCwunD6wNA4sECerrRC0CuyffaocgBG7j/PLcNQELEAZ/960vAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAZ5JREFUOMtjYBh6gJGJmYWFlY2dA4c8Jxc3Dy8fv4CgkDBWeRFXN3cPTy9vH18/V1FMaTFxV/+AwKDgkNCw8IhICXRpSamo6JjYuPiExKTklNS0dFdpVHkZ14zMrOyc3DyQgvyCwiJXWRR5OfniktKy8qSKyqrqiprapLp6VwUUBYpKDY1NzS2tbe0dnW1d3T29fWgKFJT7J0ycNHlKylQgnjZ9xsxZGApmz5k7b/6ChYsWL1iydNnyFStdVdAUrFq9Zu3igoLUdSCQtH6Dqyq6CRs31WzesjVxG1jF9h2uaqgK1Hfu2j0jJWXP3n2LQQoK96O5QUPzwMFDh48cPXY8vgCsoMhVC0WBts6Jk6eWLU6qroUoqDvtqosaknquZxrPrluWeO48SMGFi5f00ePC4PLFK+u2JV69tmzdurPXb9w0RFdg5Hrr9rqz67YBfXHn7r37rsYYsW3y4OGjU4+B5j++fu+JqymW5GL29Nnd5xcvvqh7+crVHGuCsnB9/ebtu/cfPn6yZMAOrKxtbD/b2Tsw4AaOTs4uDIMOAACgWrIELH2/mQAAAABJRU5ErkJggg==), auto;
}
#mainContainer canvas.tools.eyedropper {
  cursor: url(../img/eyedropper-icon-small.png) 4 66, auto;
}
#mainContainer canvas.tools.bucket {
  cursor: url(../img/bucket-icon-small.png) 5 28, auto;
}
.menu {
  color: var(--textColor);
  background: var(--bgColor);
  font-family: monospace;
}

#fgColor,
#bgColor {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

#mainMenu {
  transform-origin: top left;
  height: auto;
  max-height: 100vh;
  scrollbar-gutter: stable both-sides;
  overflow-y: auto;
  z-index: 200;
  position: fixed;
  contain: content;
  left: 0px;
  top: 0px;
}
#mainMenu button.on {
  background-color: var(--highlightColor);
}
#mainMenu .menu_bar {
  width: var(--fullMenuWidth);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#mainMenu .menu_bar > button {
  background-color: transparent;
}
#mainMenu .menu_bar button {
  font-size: 120%;
}
#mainMenu .menu_bar .item {
  position: relative;
  border: none;
  height: var(--halfMenuWidth);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: var(--halfMenuWidth);
  text-align: center;
}
#mainMenu .menu_bar .item:hover {
  filter: brightness(70%);
}
#mainMenu .menu_bar .item:first {
  border-top: 1px solid transparent;
}
#mainMenu .menu_bar .item img.icon {
  display: inline-block;
  padding-bottom: 4px;
  max-width: calc(var(--halfMenuWidth) - 15px);
  max-height: calc(var(--halfMenuWidth) - 15px);
  vertical-align: middle;
}
#mainMenu .menu_bar .item div.tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3030;
  background: var(--highlightColor);
  opacity: 0.3;
}
#mainMenu .menu_bar .enterbutton {
  grid-column: 1/3;
  width: var(--fullMenuWidth);
}
#mainMenu .menu_bar .palette_button {
  outline: 1px solid black;
}
#mainMenu .menu_bar .palette_button .color_picker_overlay,
#mainMenu .menu_bar .palette_button .color_picker_transparent_overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}
#mainMenu .menu_bar .palette_button .color_picker_transparent_overlay {
  background: url("../img/transparent-square.png");
  background-size: 8px;
  background-repeat: repeat;
}
#mainMenu .menu_bar .palette_button .color_picker_overlay span {
  display: inline-block;
  filter: invert(100%) grayscale(100%) contrast(1000);
}
#mainMenu .menu_bar .recentColors {
  overflow-x: auto;
  grid-column: 1/3;
}
#mainMenu .menu_bar .recentColors .fourByOne {
  width: var(--fullMenuWidth);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
#mainMenu .menu_bar .recentColors .fourByOne .color_button {
  height: var(--quarterMenuWidth);
  width: var(--quarterMenuWidth);
}

#rightMenuScroller {
  transform-origin: top right;
  position: fixed;
  contain: content;
  right: 0;
  top: 0;
  z-index: 200;
  height: 100dvh;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 300px;
}
#rightMenuScroller #rightMenu {
  height: auto;
  background-color: var(--bgColor);
  color: var(--textColor);
  text-align: left;
  pointer-events: auto;
}
#rightMenuScroller #rightMenu.closed {
  width: 125px;
}
#rightMenuScroller #rightMenu a.collapseImage {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#rightMenuScroller #rightMenu a.collapseImage:not(:first-of-type) {
  border-top: 1px solid white;
}
#rightMenuScroller #rightMenu a.collapseImage img.rightMenuIcon {
  display: inline-block;
  height: 1.5em;
  padding: 2px;
  margin: 2px;
}
#rightMenuScroller #rightMenu #canvasInfo {
  font-size: 75%;
}
#rightMenuScroller #rightMenu a {
  font-style: normal;
  display: block;
}
#rightMenuScroller #rightMenu .container {
  padding: 5px;
  padding-left: 10px;
}
#rightMenuScroller #rightMenu #collapseTool,
#rightMenuScroller #rightMenu #collapseGraphics,
#rightMenuScroller #rightMenu #collapseText,
#rightMenuScroller #rightMenu #collapsePreview {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 10px;
}
#rightMenuScroller #rightMenu #collapseTool:hover,
#rightMenuScroller #rightMenu #collapseGraphics:hover,
#rightMenuScroller #rightMenu #collapseText:hover,
#rightMenuScroller #rightMenu #collapsePreview:hover {
  cursor: pointer;
}
#rightMenuScroller #rightMenu #previewWindow #previewCanvas,
#rightMenuScroller #rightMenu #previewWindow #previewCanvas,
#rightMenuScroller #rightMenu #previewWindow #previewCanvasBox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 140;
}
#rightMenuScroller #rightMenu #previewWindow #previewCanvas,
#rightMenuScroller #rightMenu #previewWindow #previewCanvasBg {
  display: inline-block;
}
#rightMenuScroller #rightMenu #previewWindow #previewCanvasBg {
  z-index: 139;
  background-color: #f5f5f5;
}
#rightMenuScroller #rightMenu #previewWindow #previewCanvasBox {
  top: 0;
  left: 0;
  position: absolute;
  display: inline-block;
  pointer-events: none;
}
#rightMenuScroller #rightMenu #canvasInfo {
  font-size: 80%;
  font-style: italic;
}
#rightMenuScroller #rightMenu #canvasInfo span {
  font-style: normal;
}
#rightMenuScroller #rightMenu #textInput {
  line-height: 1.5em;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#rightMenuScroller #rightMenu #textInput[contenteditable=true] {
  background-color: white;
  color: black;
}
#rightMenuScroller #rightMenu .container {
  margin: 5px;
}
#rightMenuScroller #rightMenu button,
#rightMenuScroller #rightMenu input {
  margin-top: 3px;
  margin-bottom: 3px;
}
#rightMenuScroller #rightMenu #resetColorBtn {
  font-size: 70%;
  cursor: pointer;
  color: yellow;
}
#rightMenuScroller #rightMenu #colorInputs {
  justify-content: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#rightMenuScroller #rightMenu #colorInputs input[type=color] {
  width: 3em;
}
#rightMenuScroller #rightMenu .colorBox {
  margin: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#rightMenuScroller #rightMenu .colorBox > * {
  margin: 0px;
}
#rightMenuScroller #rightMenu .colorBox .XBtn {
  font-size: 50%;
}
#rightMenuScroller #rightMenu #emojiSection {
  font-size: 1.25rem;
}
#rightMenuScroller #rightMenu #emojiSection #emojiContainer {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 5px;
}
#rightMenuScroller #rightMenu #emojiSection #emojiContainer .picker_heading {
  padding: 5px;
  font-size: 110%;
  color: var(--highlightColor);
}
#rightMenuScroller #rightMenu #emojiSection #emojiContainer #emojiMenu #menu_heading {
  color: var(--highlightColor);
  font-family: monospace;
}
#rightMenuScroller #rightMenu #emojiSection #emojiContainer #emojiMenu span {
  font-size: 150%;
  cursor: pointer;
  display: inline-block;
  margin: 2px;
}
#rightMenuScroller #rightMenu #emojiSection #emojiContainer #emojiMenu span:hover {
  background-color: var(--highlightColor);
}
#rightMenuScroller #rightMenu #emojiSection #emojiContainer > span {
  display: inline-block;
  padding: 2px;
}
#rightMenuScroller #rightMenu #graphicsSection #palette {
  width: 10em;
}
#rightMenuScroller #rightMenu #contextMenu {
  color: var(--textColor);
  transform-origin: top left;
  scrollbar-gutter: stable;
}
#rightMenuScroller #rightMenu #contextMenu button {
  margin-left: 3px;
  margin-right: 3px;
}
#rightMenuScroller #rightMenu #contextMenu .contextSection {
  display: block;
}
#rightMenuScroller #rightMenu #contextMenu .contextSection > div {
  padding: 5px;
}

#footer {
  transform-origin: bottom center;
  pointer-events: none;
  font-size: 95%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}
#footer > * {
  pointer-events: auto;
  margin: 10px;
}
#footer .separator {
  margin: 10px;
}
#footer a {
  color: white;
  padding: 8px;
  filter: invert(100%) grayscale(100%) contrast(1000);
}

#helpContainer,
#galleryContainer {
  transform-origin: center;
  background-color: var(--bgColor);
  color: var(--textColor);
}

#galleryContainer {
  contain: content;
  background-color: white;
  color: black;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#galleryContainer #galleryControls {
  font-size: 2em;
  position: sticky;
  top: 0px;
  text-align: right;
  padding-right: 20px;
  padding-left: 20px;
}
#galleryContainer #galleryHeader {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
}
#galleryContainer #galleryHeader #gallerySort {
  font-size: 1.15em;
}
#galleryContainer #galleryHeader hr {
  border: 0;
  clear: both;
  display: block;
  width: 80%;
  background-color: #1d1d3b;
  height: 1px;
}
#galleryContainer #galleryColumns {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#galleryContainer a {
  flex: 0 1 auto;
  min-width: 0px;
  text-decoration: none;
}
#galleryContainer a > div {
  margin: 10px;
}
#galleryContainer a > div img {
  max-width: 300px;
  min-width: 0px;
}

#helpContainer {
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
}
#helpContainer > * {
  overflow: hidden;
}
#helpContainer ul {
  text-align: left;
}
#helpContainer ul li {
  list-style-type: none;
  margin-bottom: 8px;
}
#helpContainer ul:nth-child(2) {
  list-style-type: square;
}
#helpContainer h1,
#helpContainer h2,
#helpContainer h3 {
  text-align: center;
  font-family: "Press Start 2P";
}
#helpContainer h1, #helpContainer h2 {
  font-family: "Press Start 2P";
  color: #fff;
  text-shadow: 0 0 20px var(--highlightColor), 0 0 40px var(--highlightColor), 0 0 70px var(--highlightColor);
}
#helpContainer h3 {
  color: var(--highlightColor);
}
#helpContainer span.code {
  filter: brightness(90%);
  font-size: 105%;
  font-family: monospace;
  color: var(--highlightColor);
}
#helpContainer button {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5em;
  font-size: clamp(16px, 1.2vmax, 32px) !important;
  background-color: white;
}
#helpContainer input[type=checkbox] {
  width: 1em;
  height: 1em;
}
#helpContainer #helpControls {
  font-size: 2em;
  position: sticky;
  top: 0px;
  text-align: right;
  padding-right: 20px;
  padding-left: 20px;
  z-index: 100;
}
#helpContainer #helpMenu {
  min-height: 100vh;
}
#helpContainer #helpMenu #helpMenuLinks {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
#helpContainer #helpMenu a {
  font-size: 150%;
  text-decoration: none;
  margin: 5px;
}
#helpContainer .ulHeading {
  display: block;
  font-size: 120%;
  font-family: monospace;
  color: var(--highlightColor);
  margin: 5px;
}
#helpContainer .ulHeading img {
  display: inline-block;
  vertical-align: middle;
}
#helpContainer .helpSection {
  scroll-margin-top: 100px;
}
#helpContainer #apiSection {
  margin-bottom: 50px;
}
#helpContainer #apiSection ul {
  margin: 10px;
}
#helpContainer #apiSection .keyBoardShortcuts .icon {
  margin: 7px;
  width: 20px;
  display: inline;
}
#helpContainer #apiSection .keyBoardShortcuts .outline {
  margin: 3px;
  padding: 3px;
  outline: 1px solid var(--highlightColor);
}
#helpContainer #apiSection .keyBoardShortcuts li {
  display: flex;
  align-items: center;
}
#helpContainer #aboutSection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}
#helpContainer #settingsSection {
  height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#helpContainer #settingsSection > div {
  margin: 10px;
}
#helpContainer #paletteDefinitions {
  scroll-behavior: smooth;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
#helpContainer #paletteDefinitions .pal_outer {
  padding-bottom: 5px;
  margin: 1em;
  text-align: end;
}
#helpContainer #paletteDefinitions .pal_outer .pal_colors {
  display: flex;
}
#helpContainer #paletteDefinitions .pal_outer .pal_colors :nth-child(1) {
  border-top-left-radius: 5px;
}
#helpContainer #paletteDefinitions .pal_outer .pal_colors :nth-last-child(1) {
  border-top-right-radius: 5px;
}
#helpContainer #paletteDefinitions .pal_outer .pal_colors .pal_color {
  padding: 5px;
  height: 10em;
  min-width: 20px;
  flex: 1 1 auto;
}
#helpContainer #paletteDefinitions .pal_outer .pal_colors .pal_color span {
  filter: invert(100%) grayscale(100%) contrast(1000);
}
#helpContainer #paletteDefinitions .pal_outer .pal_name {
  color: #efefef;
  background-color: #000000;
  font-size: 110%;
  padding: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.save_window {
  display: block;
  z-index: 20000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.save_window .save_window_wrap {
  z-index: 100;
  background: #ffffff;
  width: 435px;
  max-width: 95%;
  box-sizing: border-box;
  height: max-content;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 2px;
  box-shadow: 0px 2px 10px #888888;
  padding: 10px;
}
.save_window .save_window_wrap .title {
  margin: 0px;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
}
.save_window .save_window_wrap .center {
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
}
.save_window .save_window_wrap label {
  vertical-align: top;
  font-size: 17px;
}
.save_window .save_window_wrap textarea,
.save_window .save_window_wrap input.full-width {
  width: 100%;
  font-size: 22px;
  margin-bottom: 10px;
  border: 1px solid #bbbbbb;
}
.save_window .save_window_wrap textarea {
  height: 80px;
  margin-bottom: 10px;
}
.save_window .save_window_wrap #saved_output {
  text-align: center;
  padding: 20px;
}
.save_window .save_window_wrap #saved_output a {
  padding: 3px;
}
.save_window .save_window_wrap #saved_output img {
  display: inline-block;
}
.save_window .save_window_wrap #saved_output #output_preview {
  max-width: 200px;
  margin: 20px;
}
.save_window .save_window_wrap #saved_output #saveResultLbl {
  color: yellowgreen;
  font-size: 120%;
  margin: 5px;
}
.save_window .save_window_wrap #saveDetails #saveOptions {
  text-align: left;
  padding: 0.5rem;
  border-radius: 3px;
}
.save_window .save_window_wrap #saveDetails #saveOptions > div {
  background: #ececec;
  margin: 3px;
}
.save_window .save_window_wrap #saveDetails #saveOptions #saveInfo {
  margin-left: 5px;
  font-family: monospace;
}
.save_window #save_art_close_button {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.save_window #save_art_submit_button {
  display: block;
  margin: 10px auto 0 auto;
}
.save_window .save_art_window_shadow {
  opacity: 0.3;
  background: #000000;
  z-index: 90;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 888px) {
  #rightMenu .closed .hideClosed {
    display: none !important;
  }
  .hideSmall {
    display: none !important;
  }
  .verticalText {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  #contextMenu .contextSection > div {
    display: block !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  /* Touch screen device style goes here */
  .hideTouch {
    display: none !important;
  }
  .showTouch {
    display: block !important;
  }
}

/*# sourceMappingURL=editor.css.map */