@font-face {
  font-family: "noxspen";
  src: url("Noxs Pen.ttf") format("truetype");
}

@keyframes scrollBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 512px 512px;
  }
}

/*#region Setup*/

img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none; /* Disable long-press menu on iOS */
    -webkit-user-select: none;   /* Disable text selection */
    user-select: none;
}

* {
    cursor: none;
}

::selection {
    background: #e7eee6;
    color: #6c9162;
}

html,
body {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: var(--vvh, 100%);
  min-height: var(--vvh, 100%);
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  touch-action: pan-x pan-y;

  font-family: "noxspen";
  font-size: calc(7px * var(--scale));
  font-style: normal;
  font-weight: normal;

  background-color: #171717;
}

body {
  margin: 0;
  padding: 0;

  position: fixed;
  inset: 0;
  width: 100%;

  image-rendering: pixelated;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;

  background: #363835;
  background-image: url('BackgroundMovingTiles3.png');
  background-repeat: repeat;
  animation: scrollBackground 100s linear infinite;
  image-rendering: auto;
}

#page-container {
    display: flex;
    align-items: center; 
    justify-content: center;

    position: absolute;
    height: 100%;
    width: 100%;
}

.vertical-stack {
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.horizontal-stack {
    display: flex;
    flex-direction: row;
    align-items: center; 
}

#appContainer {
    display: flex;
    padding: calc(6px * var(--scale));
}

:root {
  --scale: 3;
  --textColor: #e9f0ea;
  --windowBase: 'WindowBaseGreen.png';
}

/*#endregion*/

/*#region Cursor*/

#customCursor {
  position: fixed;

  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  background-image: url('Cursors/Cursor.png');
  background-repeat: no-repeat;

  pointer-events: none;

  background-size: calc(8px * 1 * var(--scale)) calc(8px * var(--scale));
  z-index: 99;
}

/*#endregion*/

/*#region Windows*/

.windowContainer {
  margin: calc(2px * var(--scale));
  margin-top: 0px;

  position: relative;
  display: inline-block;
}

.window {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  width: calc(1px * var(--width) * var(--scale));
  height: calc(1px * var(--height) * var(--scale));

  position: relative;
  image-rendering: pixelated;  

  border-image: url('WindowBaseGreen.png') 140 30 80 110 fill /
  calc(14px * var(--scale))
  calc(3px * var(--scale))
  calc(8px * var(--scale))
  calc(11px * var(--scale));
  padding: calc(12px * var(--scale))
  calc(3px * var(--scale))
  calc(3px * var(--scale))
  calc(3px * var(--scale));;

  display: flex;
}

.windowInlet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;      /* critical: lets this child scroll instead of forcing overflow */
  width: 100%;
  overflow:auto;
  scrollbar-width: none;
  
  display: flex;
  justify-content: safe center;
  align-items: safe center;
}

.attachingWindow {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  width: 100%;
  height: calc(1px * var(--height) * var(--scale));

  position: relative;

  border-image: url('AttachingWindow.png') 30 30 80 70 fill /
  calc(3px * var(--scale))
  calc(3px * var(--scale))
  calc(8px * var(--scale))
  calc(7px * var(--scale));
}

.attachingWindowInlet {
  position: absolute;
 
  width: calc(100% - 6px * var(--scale));
  left: calc(3px * var(--scale));

  height: calc(100% - 3px * var(--scale));
  top: 0px;

  display: flex;
  align-items: safe center; 
}

/*#endregion*/

/*#region Resizable Windows*/

.resizable-window {
  display:flex;
  flex-direction: column;
  
  width:fit-content;
  min-width: calc(40px * var(--scale));
  max-width: calc(1px * var(--width) * var(--scale));
  height:fit-content;
  min-height: calc(30px * var(--scale));
  max-height: calc(1px * var(--height) * var(--scale));
  
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  
  image-rendering: pixelated;  
  
  border-image: url('WindowBaseGreen.png') 140 30 80 110 fill /
  calc(14px * var(--scale))
  calc(3px * var(--scale))
  calc(8px * var(--scale))
  calc(11px * var(--scale));
  padding: calc(12px * var(--scale))
  calc(2.8px * var(--scale))
  calc(3px * var(--scale))
  calc(2.8px * var(--scale));;
}

.warning {
  border-image: url('WindowBaseWarning.png') 140 30 80 110 fill /
  calc(14px * var(--scale))
  calc(3px * var(--scale))
  calc(8px * var(--scale))
  calc(11px * var(--scale));
}

.cute {
  border-image: url('WindowBaseCute.png') 140 30 80 110 fill /
  calc(14px * var(--scale))
  calc(3px * var(--scale))
  calc(8px * var(--scale))
  calc(11px * var(--scale));
}

.blue {
  border-image: url('WindowBaseBlue.png') 140 30 80 110 fill /
  calc(14px * var(--scale))
  calc(3px * var(--scale))
  calc(8px * var(--scale))
  calc(11px * var(--scale));
}

.windowInlet img {
  display: block;
  max-width: calc((var(--width) - 14) * 1px * var(--scale));
  max-height: calc((var(--height) - 22) * 1px * var(--scale));
  width:auto;
  height:auto;
}

.grow-wrap {
  flex: 1 1 auto;
  display: grid;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  touch-action: pan-y;
}

.windowInlet > .grow-wrap {
  align-self: stretch;
}

.grow-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
  grid-area: 1 / 1 / 2 / 2;   /* stack on same cell */
  font-family: "noxspen";
  font-size: calc(7px * var(--scale));
  letter-spacing: calc(-0.5px * var(--scale));
  padding: calc(3px * var(--scale))
  calc(5px * var(--scale))
  calc(3px * var(--scale))
  calc(5px * var(--scale));
  box-sizing: border-box;
  text-align: justify;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*#endregion*/

/*#region Header Elements */

.header_button_container {
  position: absolute;
  top: 0;
  right: calc(var(--scale) * 0.9px);
  display: flex;

  gap: calc(-1.01px * var(--scale));
}

.header_button {
  position: relative;
  display: inline-block;
  image-rendering: pixelated;

  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  width: calc(9px * var(--scale));
  height: calc(10px * var(--scale));
  background-image: url('HeaderButtonsV2.png');
  background-repeat: no-repeat;
  background-size: calc(9px * 3 * var(--scale)) calc(10px * var(--scale));
  cursor: none;

  z-index: 1;
}

/* The symbol that is rendered on top of button*/
.header_button::after {
  content: "";
  position: absolute;
  image-rendering: pixelated;
  
  width: calc(9px * var(--scale));
  height: calc(10px * var(--scale));
  
  background-image: url('HeaderButtonIcons-small.png');
  background-repeat: no-repeat;
  background-size: calc(9px * 17 * var(--scale))
                   calc(9px * var(--scale));
  background-position: calc(-1 * var(--icon-index, 0) * 9px * var(--scale)) 0;
}

/* hover */
.header_button:hover {
  background-position: calc(-9px * var(--scale)) 0;
}

/* click/pressed */
.header_button:active {
  background-position: calc(-9px * 2 * var(--scale)) 0;
}

/*changes the y pos of symbol when pressed*/
.header_button:active::after {
  background-position: calc(-1 * var(--icon-index, 0) * 9px * var(--scale)) calc(1px * var(--scale));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1 {
  user-select: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: absolute;

  white-space: nowrap;
  overflow:auto;
  scrollbar-width: none;

  font-size: calc(7px * var(--scale));

  font-style: normal;
  font-weight: normal;

  left: calc(var(--scale) * 14px);
  top: calc(var(--scale) * -3px);
  right: calc(var(--scale) * 1px);
  display: flex;

  color: var(--textColor);
}
h1::-webkit-scrollbar {
  display: none;
}

#prompt {
  width:calc(100% - 40px * var(--scale));
}

.banner-text {
  user-select: none;

  font-size: calc(15px * var(--scale));

  font-style: normal;
  font-weight: bold;

  color: var(--textColor);
}


/*#endregion*/

/*#region Medium Buttons*/

.mediumButton {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  width: calc(20px * var(--scale));
  height: calc(20px * var(--scale));
  background-image: url('ButtonsMedium.png');
  background-repeat: no-repeat;
  background-size: calc(20px * 3 * var(--scale)) calc(20px * var(--scale));
  cursor: none;
}

/* The symbol that is rendered on top of button*/
.mediumButton::after {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  content: "";
  position: absolute;
  
  width: calc(20px * var(--scale));
  height: calc(20px * var(--scale));
  
  background-image: url('ButtonMediumIcons.png');
  background-repeat: no-repeat;
  background-size: calc(20px * 3 * var(--scale))
                   calc(20px * var(--scale));
  background-position: calc(-1 * var(--icon-index, 0) * 20px * var(--scale)) 0;
}

/* hover */
.mediumButton:hover {
  background-position: calc(-20px * var(--scale)) 0;
}

/* click/pressed */
.mediumButton:active {
  background-position: calc(-20px * 2 * var(--scale)) 0;
}

.mediumButton.selected:active {
  background-position: calc(-20px * 2 * var(--scale)) 0;
}

/*changes the y pos of symbol when pressed*/
.mediumButton:active::after {
  background-position: calc(-1 * var(--icon-index) * 20px * var(--scale)) calc(1px * var(--scale));
}

.mediumButton.selected {
  background-position: calc(-20px * var(--scale)) 0;
}

/*#endregion*/

/*#region Small Buttons*/

.smallButton {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;
  
  width: calc(15px * var(--scale));
  height: calc(15px * var(--scale));
  background-image: url('ButtonsSmall.png');
  background-repeat: no-repeat;
  background-size: calc(15px * 3 * var(--scale)) calc(15px * var(--scale));
  cursor: none;
}

/* The symbol that is rendered on top of button*/
.smallButton::after {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  content: "";
  position: absolute;
  
  width: calc(15px * var(--scale));
  height: calc(15px * var(--scale));
  
  background-image: url('ButtonsSmallIcons.png');
  background-repeat: no-repeat;
  background-size: calc(15px * 8 * var(--scale))
                   calc(15px * var(--scale));
  background-position: calc(-1 * var(--icon-index, 0) * 15px * var(--scale)) 0;
}

/* hover */
.smallButton:hover {
  background-position: calc(-15px * var(--scale)) 0;
}

/* click/pressed */
.smallButton:active {
  background-position: calc(-15px * 2 * var(--scale)) 0;
}

/*changes the y pos of symbol when pressed*/
.smallButton:active::after {
  background-position: calc(-1 * var(--icon-index) * 15px * var(--scale)) calc(1px * var(--scale));
}

.smallButton.selected {
  background-position: calc(-15px * var(--scale)) 0;
}

/*#endregion*/

/*#region Custom Buttons*/

button {
  font-family: "noxspen";
}

.customButton {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  border-image: url('CustomButton.png') 30 20 20 40 fill /
  calc(3px * var(--scale))
  calc(2px * var(--scale))
  calc(2px * var(--scale))
  calc(4px * var(--scale));

  width: calc(1px * var(--width) * var(--scale));
  height: calc(1px * var(--height) * var(--scale));
  cursor: none;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #514556;
  font-size: calc(7px * var(--scale));
}

.customButton.buttonInput {
  margin: calc(2px * var(--scale));
  position: relative;
  align-items: center;
  justify-content: center;
  display: flex;
}

@media (hover: hover) {
  .customButton:hover,
  .customButton.highlighted {
    border-image: url('CustomButtonHighlight.png') 30 20 20 40 fill /
    calc(3px * var(--scale))
    calc(2px * var(--scale))
    calc(2px * var(--scale))
    calc(4px * var(--scale));
  }

}

.customButton.selected,
.customButton.selected:hover,
.customButton.selected.highlighted {
  border-image: url('CustomButtonActive.png') 30 20 20 40 fill /
  calc(3px * var(--scale))
  calc(2px * var(--scale))
  calc(2px * var(--scale))
  calc(4px * var(--scale));
}

.customButton:active img {
  top: calc(0.9px * var(--scale));
}
.customButton.selected img {
  top: calc(0.9px * var(--scale));
}

.customButton:active p {
  position: relative;
  top: calc(1px * var(--scale));
}
.customButton.selected p {
  position: relative;
  top: calc(1px * var(--scale));
}


/* click/pressed */
.customButton:active {
  border-image: url('CustomButtonActive.png') 30 20 20 40 fill /
  calc(3px * var(--scale))
  calc(2px * var(--scale))
  calc(2px * var(--scale))
  calc(4px * var(--scale));
}

.customButton.highlighted:not(.selected) {
  border-image: url('CustomButtonActive.png') 30 20 20 40 fill /
  calc(3px * var(--scale))
  calc(2px * var(--scale))
  calc(2px * var(--scale))
  calc(4px * var(--scale));
}

.customButton:active::after {
  transform: translateY(calc(1px * var(--scale)));
}

/* #endregion*/

/*#region Timer */

.clock {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  position: relative;
  justify-self: center;
  
  width: calc(27px * var(--scale));
  height: calc(27px * var(--scale));

  cursor: none;

  background-image: url('Clock.png');
  background-size: calc(27px * 3 * var(--scale)) calc(27px * var(--scale));
}

.clock::after {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  content: "";
  position: absolute;
  
  width: calc(27px * var(--scale));
  height: calc(27px * var(--scale));
  
  background-image: url('ClockPointer.png');
  background-repeat: no-repeat;
  background-size: calc(27px * 40 * var(--scale))
                   calc(27px * var(--scale));
  background-position: calc(-1 * var(--clockIndex) * 27px * var(--scale)) 0;
}

/* hover */
.clock:hover {
  background-position: calc(-27px * var(--scale)) 0;
}

/* click/pressed */
.clock:active {
  background-position: calc(-27px * 2 * var(--scale)) 0;
}

/*changes the y pos of symbol when pressed*/
.clock:active::after {
  background-position: calc(-1 * var(--clockIndex, 0) * 27px * var(--scale)) calc(1px * var(--scale));
}

#timer {
  font-size: calc(7px * var(--scale));
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer::after {
  content: attr(clockTime);

  position: relative;
  top: calc(0.5px * var(--scale));
  font-size: calc(7px * var(--scale));
  color: #514556;
}

/*#endregion*/

/*#region Single UI Elements*/

.drawOptionsContainer {
  height: 100%;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  gap: calc(2px * var(--scale));
  margin-top: calc(2px * var(--scale));
}

p {
  padding: 0 calc(3px * var(--scale)) 0 calc(2px * var(--scale));
  margin: calc(2px * var(--scale));;
  text-align: center;

  color: #514556;
}

.brushSidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#colorWheelWindowContainer {
  margin: calc(2px * var(--scale));
  margin-top: 0px;
  margin-left:auto;
}

#clockWindowContainer {
  margin: calc(2px * var(--scale));
  margin-top: 0px;
  margin-right:auto;
}

/*#endregion*/

/*#region Slider */

.customSlider {
  justify-self: center;
  align-items: center;
  display: flex;

  width: calc(1px * var(--length) * var(--scale));
  height: calc(8px * var(--scale));

  margin: calc(2px * var(--scale));
}

/*#region Button & Handle */

.customSliderButton {
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));

  background-image: url('SliderButtons.png');
  background-repeat: no-repeat;
  background-size: calc(8px * 3 * var(--scale)) calc(8px * var(--scale));
  cursor: none;
}

/* The symbol that is rendered on top of button*/
.customSliderButton::after {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  content: "";
  position: absolute;
  
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  
  background-image: url('SliderButtonsIcons.png');
  background-repeat: no-repeat;
  background-size: calc(8px * 7 * var(--scale))
                   calc(8px * var(--scale));
  background-position: calc(-1 * var(--icon-index, 0) * 8px * var(--scale)) 0;
}

/* hover */
.customSliderButton:hover {
  background-position: calc(-8px * var(--scale)) 0;
}

/* click/pressed */
.customSliderButton:active {
  background-position: calc(-8px * 2 * var(--scale)) 0;
}

/*changes the y pos of symbol when pressed*/
.customSliderButton:active::after {
  background-position: calc(-1 * var(--icon-index, 0) * 8px * var(--scale)) calc(1px * var(--scale));
}

.customSliderHandle {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  position: absolute;
  
  width: calc(13px * var(--scale));
  height: calc(7.9px * var(--scale));

  background-image: url('SliderHandle.png');
  background-size: calc(13px * 3 * var(--scale)) calc(8px * var(--scale));

  cursor: none;
}

/* hover */
.customSliderHandle:hover {
  background-position: calc(-13px * var(--scale)) 0;
}

/* click/pressed */
.customSliderHandle:active {
  background-position: calc(-13px * 2 * var(--scale)) 0;
}

/*#endregion */

.customSliderTrack {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  position: relative;
  flex: 1;
  height: 99%;

  background-image: url('SliderTrack.png');
  background-size: calc(8px* var(--scale)) calc(8px * var(--scale));
}

.customSliderFill {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  position: absolute;
  left: 0;
  top: 0;
  height: 100%;

  background-image: url('SliderFill.png');
  background-size: calc(8px* var(--scale)) calc(8px * var(--scale));
}

.customSliderWindow {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));

  margin-left: calc(2px * var(--scale));

  background-image: url('SliderButtons.png');
  background-repeat: no-repeat;
  background-size: calc(8px * 3 * var(--scale)) calc(8px * var(--scale));
  background-position: calc(-1 * 8px * var(--scale)) 0;
}

.customSliderWindow::after {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  content: "";
  position: absolute;
  
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  
  background-image: url('SliderWindowPreview.png');
  background-repeat: no-repeat;
  background-size: calc(8px * 11 * var(--scale))
                   calc(8px * 2 * var(--scale));
  background-position: calc(-1 * var(--intValue) * 8px * var(--scale))
                       calc(-1 * var(--type) * 8px * var(--scale));
}

/*#endregion*/

/*#region vertical Slider*/

.customSlider.vertical {
  justify-self: center;
  align-items: center;
  display: flex;

  flex-direction: column;

  width: calc(8px  * var(--scale));
  height: calc(1px * var(--scale) * var(--length));

  margin: calc(2px * var(--scale));
}

.customSlider.vertical .customSliderTrack {
  position: relative;
  flex: 1 0;
  height: auto;
  width: 99%;

  background-image: url('SliderTrack-vertical.png');
  background-size: calc(8px * var(--scale)) calc(8px * var(--scale));
}

.customSlider.vertical .customSliderTrack .customSliderFill {
  position: absolute;
  left: 0;
  top: auto;
  bottom: 0;     
  width: 100%;

  background-image: url('SliderFill-vertical.png');
  background-size: calc(8px * var(--scale)) calc(8px * var(--scale));
  background-position: left bottom;
  background-repeat: repeat-y;
}

/*#region Handle */

.customSlider.vertical .customSliderTrack .customSliderHandle {
  width: calc(8px * var(--scale));
  height: calc(6px * var(--scale));

  background-image: url('SliderHandle-vertical-short.png');
  background-size: calc(8px * 3 * var(--scale)) calc(6px * var(--scale));
}

/* hover */
.customSlider.vertical .customSliderTrack .customSliderHandle:hover {
  background-position: calc(-8px * var(--scale)) 0;
}

/* click/pressed */
.customSlider.vertical .customSliderTrack .customSliderHandle:active {
  background-position: calc(-8px * 2 * var(--scale)) 0;
}

/*#endregion */

/*#endregion */

/*#region Palette */

#paletteContainer {
  width: 100%;
  height: 100%;

  display: grid;

  grid-template-columns: repeat(auto-fill, calc(7px * var(--scale)));
  grid-template-rows: repeat(auto-fill, calc(7px * var(--scale)));
  overflow: auto;
  scrollbar-width: none;
  padding: calc(2px * var(--scale));
  box-sizing: border-box;
}

.colorElement {
  width: calc(7px * var(--scale));
  height: calc(7px * var(--scale));

  display: inline-block;
  cursor: none;
  
  background-image: url('PaletteButtons.png');
  background-repeat: no-repeat;
  background-size: calc(7px * 3 * var(--scale)) calc(7px * var(--scale));
  cursor: none;

  background-color: rgb(65, 102, 203);
}

/* Drawing the border */
.colorElement::after {
  content: "";
  position: relative;
  display: block;

  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  
  background-image: url('PaletteButtonsBorder.png');
  background-repeat: no-repeat;
  background-size: calc(8.3px * var(--scale))
                   calc(8.3px * var(--scale));

  left: calc(-1px * var(--scale));
  top: calc(-1px * var(--scale));
}

/* hover */
.colorElement:hover {
  background-position: calc(-7px * 2 * var(--scale)) 0;
}

/* click/pressed */
.colorElement:active {
  background-position: calc(-7px * var(--scale)) 0;
}

.colorElement.selected {
  background-position: calc(-7px * var(--scale)) 0;
}

h1.colorID {
  user-select: all;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: absolute;
}

/*#endregion*/

/*#region Color field*/

.colorField {
  width: calc(11px * var(--scale));
  height: calc(11px * var(--scale));

  display: inline-block;
  cursor: none;
  
  background-image: url('ColorField.png');
  background-repeat: no-repeat;
  background-size: calc(11px * 3 * var(--scale)) calc(11px * var(--scale));
  cursor: none;

  background-color: rgb(163, 133, 186);
}


/* hover */
.colorField:hover {
  background-position: calc(-11px * 2 * var(--scale)) 0;
}

/* click/pressed */
.colorField:active {
  background-position: calc(-11px * var(--scale)) 0;
}

.colorField.selected {
  background-position: calc(-11px * var(--scale)) 0;
}

.swapColorButton {
  width: calc(7px * var(--scale));
  height: calc(3px * var(--scale));

  display: inline-block;
  cursor: none;
  
  background-image: url('SwapColorFieldButton.png');
  background-repeat: no-repeat;
  background-size: calc(7px * var(--scale)) calc(3px * var(--scale));
  cursor: none;
}

/*#endregion*/

/*#region Color wheel*/

.colorWheel {
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  margin: 0 auto;

  width: calc(58px * var(--scale));
  height: calc(58px * var(--scale));

  background:
    radial-gradient(circle at center, #d7cbc0 60%, transparent 61%),
    conic-gradient(
      red,
      yellow,
      lime,
      cyan,
      blue,
      magenta,
      red
    );
  background-blend-mode: destination-out;
  position: relative;

  cursor: none;

  border-radius: 50%;
}

.colorBox {
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(34px * var(--scale));
  height: calc(34px * var(--scale));

  cursor: none;

  background: linear-gradient(to right, hsl(var(--hue), 0%, 100%), hsl(var(--hue), 100%, 50%)),
              linear-gradient(to top, hsl(var(--hue), 100%, 0%), hsl(var(--hue), 100%, 100%));
  background-blend-mode: multiply;
}

.colorSelector {
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;

  left: 0%;
  bottom: 0%;

  background: url('ColorBoxCursor.png');
  
  background-repeat: no-repeat;
  background-size: calc(4px * var(--scale)) calc(4px * var(--scale));

  width: calc(4px * var(--scale));
  height: calc(4px * var(--scale));

  background-color: #2d2738;
}

.hueSelector {
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;

  left: 50%;
  top: 50%;

  background: url('ColorBoxCursor.png');
  
  background-repeat: no-repeat;
  background-size: calc(4px * var(--scale)) calc(4px * var(--scale));

  width: calc(4px * var(--scale));
  height: calc(4px * var(--scale));

  background-color: #2d2738;

  transform: translate(-50%, -50%);
}

#colorPicker::after {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  content: "";
  position: absolute;

  width: calc(1px * var(--width) * var(--scale));
  height: calc(1px * var(--height) * var(--scale));
  
  background-image: url('ColorWheelButtonIcons.png');
  background-repeat: no-repeat;
  
  background-size: calc(1px * var(--width) * 4 * var(--scale))
                   calc(1px * var(--width) * var(--scale));
  background-position: calc(-1px * var(--icon-index) * var(--width) * var(--scale)) 0;
}

/*changes the y pos of symbol when pressed*/
#colorPicker:active::after {
  background-position: calc(-1px * var(--icon-index) * var(--width) * var(--scale)) calc(1px * var(--scale));  
}

/*#endregion*/

/*#region Canvas*/


#paintCanvas,
#shaderCanvas {
  width:100.1%;
  height:100.1%;

  position: absolute;
  cursor: none;
  touch-action: none;

  background-color: #f2f1f5;
}

/*#endregion*/

/*#region Player Display */

#playerContainer {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--scale));;

  overflow: auto;
  scrollbar-width: none;
  padding: calc(2px * var(--scale));
  box-sizing: border-box;
}

.playerDisplay {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  width: calc(80px * var(--scale));
  height: calc(18px * var(--scale));
  background-image: url('/GUI/PlayerDisplay.png');
  background-repeat: no-repeat;
  background-size: calc(80px * var(--scale)) calc(18px * var(--scale));
  cursor: none;
  display: flex;
}

.playerAvatarContainer {
  width: calc(18px * var(--scale));
  height: calc(18px * var(--scale));

  display: flex;
  align-items: center;
}

.playerInfoContainer {
  width: calc(62px * var(--scale));
  height: calc(18px * var(--scale));
  float: left;

  display: flex;
  align-items: center;
}

.playerName {
  text-align: left;
}

.playerAvatar {
  margin: auto;

  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  width: calc(14px * var(--scale));
  height: calc(14px * var(--scale));
  background-repeat: no-repeat;
  background-size: calc(14px var(--scale)) calc(14px * var(--scale));
  cursor: none;
}

/*#endregion*/

/*#region Prompt Input*/

.input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  border: none;
  outline: none;
  padding: calc(2.5px * var(--scale)) calc(5px * var(--scale));
  font-family: "noxspen";
  font-size: calc(7px * var(--scale));
  line-height: calc(7px * var(--scale));
  text-align: center;
  color: #514556;
  background: transparent;
}

#chatInput {
  padding-top: calc(3.5px * var(--scale));
  padding-bottom: calc(3.5px * var(--scale));
  line-height: calc(6.5px * var(--scale));
}

.input:disabled {
  color: #b9a6a0;
}

.input::placeholder {
  text-align: center;
  color: #b9a6a0;
}

#promptInput::placeholder {
  color: #b9a6a0;
}

.customButton:active .input {
  transform: translateY(calc(1px * var(--scale)));
}

.customButton .input::placeholder {
  color: #97818a;
}
.customButton:hover .input::placeholder {
  color: #b9a6a0;
}
.customButton:active .input::placeholder {
  color: #97818a;
}

/*#endregion*/

/*#region Lobby */

#startGame::after {
  content: "Start";
}

.setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}

/*#endregion*/

/*#region Login & Description */

.loginContainer {
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction:row;
}

#loginAvatarContainer {
  display: flex;
  align-items: center;
  margin: calc(2px * var(--scale));
}

.customButton.reactionEmoteButton.selected:hover {
  border-image: url('CustomButtonActive.png') 30 20 20 40 fill /
  calc(3px * var(--scale))
  calc(2px * var(--scale))
  calc(2px * var(--scale))
  calc(4px * var(--scale));
}

#loginStartButton {
  margin: calc(2px * var(--scale));
  position: relative;
  align-items: center;
  justify-content: center;
  display: flex;
}

/*#endregion*/

/*#region Ending (Album)*/

.albumContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;

  overflow: auto;
  scrollbar-width: none;
}

#revealAlbumButton {
  position: absolute;
  bottom: calc(1px * var(--scale));
}

#revealAlbumButton::after {
  content: var(--revealAlbumText, "Reveal Album");
  position: relative;
  color: #514556;
}

.albumMessage {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Disable long-press menu on iOS */
  -webkit-user-select: none;   /* Disable text selection */
  user-select: none;

  border-image: url('AlbumMessage9Slice.png') 18 2 2 20 fill /
  calc(18px * var(--scale))
  calc(2px * var(--scale))
  calc(2px * var(--scale))
  calc(20px * var(--scale));

  max-width: calc(100% - 4px * var(--scale));
  min-width: calc(20px * var(--scale));
  min-height: calc(20px * var(--scale));
  width: fit-content;
  height: auto;
  cursor: none;

  display: flex;
  align-items: flex-start;

  color: #514556;

  margin: calc(2px * var(--scale));
}

.albumMessage.is-mine {
  margin-left: auto;
  margin-right: calc(2px * var(--scale));
}

.albumMessageAvatarContainer {
  width: calc(18px * var(--scale));
  height: calc(18px * var(--scale));

  flex-shrink: 0;
  gap: 0;

  display: flex;
  align-items: center;
}

.albumMessageContent {
  flex: 1;
  min-width: 0;

  align-self: center;
  display: flex;
  flex-direction: column;
  margin-bottom: calc(2px * var(--scale));
}

.albumMessageContent p {
  text-align: left;
  margin-top: calc(2px * var(--scale));
  margin-left: calc(1px * var(--scale));
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.albumMessageImage {
  width: calc(150px * var(--scale));
  height: calc(110px * var(--scale));
  
  display: flex;
  align-items: center;
  justify-content: center;
}

#albumMessageEmoteContainer {
  width: calc(14px * var(--scale));
  height: calc(14px * var(--scale));
  display: flex;
  align-items: center;
  margin: calc(2px * var(--scale));
}

.albumSpacer {
  width: 100%;
  height: calc(40px * var(--scale));
}

/*#endregion*/

/*#region Top Bar & Lower Page */

.top-bar {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: calc(5px * var(--scale));
}

.top-bar-right,
.top-bar-left {
  display: flex;
  width: calc(160px * var(--scale));
  gap: calc(5px * var(--scale));
}

.top-bar-right {
  justify-content: flex-end;
  margin-left: auto;
}

.top-bar-center {
  border-width: calc(10px * var(--scale));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#site-version {
  z-index: 100;
  position: absolute;
  right: calc(36px * var(--scale));
  bottom: calc(2px * var(--scale));

  font-size: calc(3.5px * var(--scale));
  color: #d7cbc0;

  text-shadow:
  0 calc(0.5px * var(--scale)) 0 #514556;
}

#splash-text {
  position: absolute;
  width: 240%;
  top: calc(17px * var(--scale));

  z-index: 3;
  animation: splashAnimation 1s ease-in-out infinite alternate;

  color: #d7cbc0;

  text-shadow:
  0 calc(1px * var(--scale)) 0 #514556;

  margin-top: calc(0px * var(--scale));
}

@keyframes splashAnimation {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(0.93);
  }
}

#splash-text:hover { color: #ece9dd; }

#splash-text:active {
  margin-top: calc(1px * var(--scale));
  color: #d7cbc0;
  text-shadow: none;
}

.nav-group {
  display: flex;
  gap: calc(4px * var(--scale));
  margin-left: calc(4px * var(--scale));
}

#nav-home {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .top-bar {
    display: flex;
    justify-content: flex-start;

    transition: margin-top 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: margin-top;
  }

  .top-bar.hidden {
    margin-top: calc(-50px * var(--scale));
  }

  #site-version {
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: calc(4px * var(--scale));

    font-size: calc(3.5px * var(--scale));
    color: #d7cbc0;

    text-shadow: 
      -1px -1px 0 #514556,  
      1px -1px 0 #514556,
      -1px  1px 0 #514556,
      1px  1px 0 #514556;
  }

  .top-bar-center img {
    display: none;
  }

  .top-bar-center {
    display: none;
  }

  .top-bar-left,
  .top-bar-right {
    display: none;
  }

  .top-bar-left:has(.nav-group.active),
  .top-bar-right:has(.nav-group.active) {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-group {
    display:none;
  }

  .nav-group.active {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(calc(19px * var(--scale)), 1fr));
    gap: calc(4px * var(--scale));
  }

  .page-wrapper {
    flex-direction: column;
  }
}

.lower-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior-y: smooth;  
  scroll-snap-type: y mandatory;
  scrollbar-width: none;

  --cell: calc(var(--scale) * 1px);
  --band: calc(var(--cell) * 8);

  mask-image:
    linear-gradient(#fff,#fff),
    url("dither-top.svg"),
    url("dither-bottom.svg");
    
  mask-repeat: no-repeat, repeat-x, repeat-x;
  mask-position: 0 0, top left, bottom left;
  mask-size: 100% 100%, var(--band) var(--band), var(--band) var(--band);
  mask-composite: subtract, add, add;

  image-rendering: pixelated;

  gap: calc(15px * var(--scale));
  margin-left: calc(8px * var(--scale));
  margin-right: calc(8px * var(--scale));
}

.lower-page::before,
.lower-page::after {
  content: "";
  flex: 0 0 var(--feed-edge-space, 0px);
}

.lower-page::after {
  flex-basis: var(--feed-bottom-space, 0px);
}

.page-wrapper {
  display: flex;
  position: relative;
  isolation: isolate;
  contain: paint;
  justify-content: center;
  align-items: center;

  scroll-snap-align: center;

  gap: calc(5px * var(--scale));
}

.lower-page-spacer {
  flex: 0 0 calc(20px * var(--scale));
}

/*#endregion*/

/*#region Poems */

#textPage {
  width: 100%;             
}

#textPage .grow-wrap {
  display: grid;
  width: 100%;
  margin: auto;             /* vertical centering that stays scrollable (the "safe center" trick) */
}

#textPage .grow-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}

#textPage .grow-wrap > textarea,
#textPage .grow-wrap::after {
  grid-area: 1 / 1 / 2 / 2;
  font-family: "noxspen";
  font-size: calc(7px * var(--scale));
  letter-spacing: calc(-0.5px * var(--scale));
  padding: calc(3px * var(--scale));
  box-sizing: border-box;
  text-align: center;       /* centered, per your request */
  white-space: pre-wrap;
  word-wrap: break-word;
}

#textPage textarea {
  width: 100%;
  resize: none;
  overflow: hidden;
  border: none;
  outline: none;
  color: #514556;
  background: transparent;
  line-height: 1.1;
}

/*#endregion*/

/*#region Music */

.music-windowInlet {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  gap: calc(2px * var(--scale));
}

.music-inlet-top-row {
  display: flex;
  align-items: flex-start; 
  flex: 0 0 auto;
}

.vynil {
  margin: auto;
  position: relative;

  width: calc(32px * var(--scale));
  height: calc(32px * var(--scale));
  background-repeat: no-repeat;
  background-size: calc(32px * var(--scale)) calc(32px * var(--scale));
}

.vynil-button {
  flex: 0 0 auto;
  margin: calc(3px * var(--scale));
}

.music-inlet-top-row-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin: calc(8px * var(--scale))
  calc(3px * var(--scale)) 0
  calc(2px * var(--scale));

  gap: calc(4px * var(--scale));

  flex: 1 1 auto;
  min-width: 0;
}

.music-lable {
  margin: 0;
  max-height: calc(18px * var(--scale));
  font-size: calc(7px * var(--scale));
  line-height: 1.2;
  color: #514556;
  white-space: normal;
  overflow-wrap: break-word;
  overflow-y: auto;
  scrollbar-width: none;
  word-break: break-word;
}

.description-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

.description-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}

.description-wrap > textarea,
.description-wrap::after {
  grid-area: 1 / 1 / 2 / 2;
  padding: calc(6px * var(--scale)) 0;
  box-sizing: border-box;
  text-align: justify;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.2;
}

.description-wrap textarea {
  padding: calc(2px * var(--scale))
  calc(4px * var(--scale))
  calc(3px * var(--scale))
  calc(4px * var(--scale));
  width: 100%;
  resize: none;
  overflow: hidden;
  border: none;
  outline: none;
  color: #514556;
  background: transparent;
}

.description-wrap textarea::placeholder {
  color: #b9a6a0;
  opacity: 1;
}

.music-player-buttons {
  position: absolute;
  display: flex;
  gap: calc(12px * var(--scale));
  bottom: calc(5px * var(--scale));
  left: calc(16px * var(--scale));
}

#music-timeline {
  position: relative;
  bottom: calc(1px * var(--scale));
  right: calc(3px * var(--scale));
}
#music-volume {
  margin-top: calc(3px * var(--scale));
}

#music-player {
  position: absolute;
  bottom: calc(4px * var(--scale));
  left: calc(4px * var(--scale));

  min-width: calc(1px * var(--width) * var(--scale));
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to {transform: rotate(360deg); }
}

#collapsed-music-player {
  position: absolute;
  bottom: calc(4px * var(--scale));
  left: calc(4px * var(--scale));

  transition: scale 0.05s ease-in-out;
  scale: 1;
}

#collapsed-music-player:hover {
  scale: 1.05;
}

#collapsed-music-player:active {
  scale: 1;
}

.vynil-button-child-wrapper {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.vynil-button-child-wrapper img {
  grid-column: 1;
  grid-row: 1;
}

#record-player-icon {
  box-shadow: inset 0 0 0 100px #31284355;
}


/*#endregion*/

/* #region Scroll Buttons & Video */

.scoll-button-container {
  position: absolute;
  display: flex;

  width: 100%;
  justify-content: center;
  gap: calc(4px * var(--scale));
  bottom: calc(4px * var(--scale));
}

.scroll-button-icon {
  margin: auto;
  position: relative;

  width: calc(8px * var(--scale));
  height: calc(4px * var(--scale));
}

.video-inlet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: fit-content;
  display: flex;
}

#post-video {
  display: block;
  max-width: calc((var(--width) - 14) * 1px * var(--scale));
  max-height: calc((var(--height) - 22) * 1px * var(--scale));
  width: auto;
  height: auto;
  image-rendering: auto;
}

.post-art-image {
  image-rendering: auto;
}

#upload-placeholder {
  content: url("/GUI/UploadWindowBackground-2.png");
  display: none;
}

#upload-placeholder.upload-hover {
  content: url("/GUI/UploadWindowBackground-hover.gif");
}

/* #endregion */

/* #region Image Fitting */

.windowInlet .fit-img {
  position: relative;
  display: block;
  box-sizing: border-box;
  object-fit: contain;
  image-rendering: auto;

  width: calc(100% - 4px * var(--scale));
  height: calc(100% - 4px * var(--scale));
  max-width: none;
  max-height: none;
  margin: calc(2px * var(--scale));
}

.image-based-window {
  --width: 260;
  --height: 138;
}

@media (max-width: 768px) {
  .image-based-window {
    --width: 130;
    --height: 138;
  }
}

.pixel-img {
  display: block;
  margin: auto;
  position: relative;
  image-rendering: pixelated;

  zoom: var(--scale, 1);
}

.customButton:active .pixel-img {
  display: block;
  margin: auto;
  position: relative;

  zoom: var(--scale, 1);
  top: calc(1px)
}

.customButton.selected .pixel-img {
  display: block;
  margin: auto;
  position: relative;

  zoom: var(--scale, 1);
  top: calc(1px)
}

.customButton img {
  position: relative;
  display: block;
  box-sizing: border-box;

  max-width: none;
  max-height: none;
}


#lang-flag {
  width: calc(6px * var(--scale));
  height: calc(4px * var(--scale));
}

/* #endregion */

/* #region Chat */

.bottom-right-container {
  position: absolute;
  bottom: calc(4px * var(--scale));
  right: calc(4px * var(--scale));

  display: flex;
  gap: calc(4px * var(--scale));
  align-items: flex-end;
}


#chat-container,
.chat-stage {
  position: absolute;
  bottom: calc(4px * var(--scale));
  right: calc(4px * var(--scale));
  z-index: 10;
}

#sendMessage {
  margin: calc(2px * var(--scale));
  position: relative;
  align-items: center;
  justify-content: center;
  display: flex;
}

.chat-messages {
  display: flex;

  width: 100%;
  --page-height: calc(76px * var(--scale));

  --cell: calc(var(--scale) * 1px);
  --band: calc(var(--cell) * 8);

  mask-image:
    linear-gradient(#fff,#fff),
    url("dither-top.svg"),
    url("dither-bottom.svg");
    
  mask-repeat: no-repeat, repeat-x, repeat-x;
  mask-position: 0 0, top left, bottom left;
  mask-size: 100% 100%, 0% var(--band), var(--band) var(--band);
  mask-composite: subtract, add, add;

  image-rendering: pixelated;

  height: calc(var(--page-height));
}


/* #endregion */