:root {
  --margin-xlarge: 40px;
  --margin-large: 30px;
  --margin-medium: 20px;
  --margin-small: 10px;
  --margin-xsmall: 5px;
  --gap-xxsmall: 5px;
  --gap-xsmall: 10px;
  --gap-small: 20px;
  --gap-medium: 30px;
  --gap-large: 40px;
  --textColor: black;
  --backgroundColor: white;
  --textColorRGB: 0,0,0;
  --hoverColor: #eee;
  --activeColor: #ccc;
  --emptyColor: #f8f8f8;
  --missingColor: #ffdddd;
  --logoColor: #333;
  --logoColorHover: #666;
  --font-size-xlarge: 20px;
  --font-size-large: 16px;
  --font-size-medium: 14px;
  --font-size-small: 12px;
  --font-size-xsmall: 10px;
  --line-height-factor: 1.25;
  --scrollbarWidth: 1px;
  --strokeWeight: 1px;
  --textBoxSettings_width: 0px;
  --textBoxSettings_sliderButtonSize: 9px;
  --glyphSet_boxSize: 0px;
  --glyphEditor_width: 0px;
  --glyphEditor_height: 0px;
  --toolbar_buttonSize: 0px;
  --glyphEditorContext_width: 160px;
  --glyphEditorContext_height: 0px;
  --scriptName_height: var(--margin-xlarge);
  --textBox_width: 0px;
  --textBox_height: 0px;
  --logo_size: 0px;
}

@font-face {
  font-family: 'interfaceFont';
  src: url('../fonts/font.otf') format('opentype');
}

* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: fixed;
  display: block;
  color: var(--textColor);
  background: var(--backgroundColor);
  position: relative;
  min-width: 1200px;
  min-height: 700px;
  overflow: auto;
}

canvas {
  padding: 0;
  margin: 0;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

#scriptEditor {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: var(--glyphEditor_width);
  height: calc(100vh - (var(--margin-xlarge) * 2));
  background: transparent;
  left: 0px;
  margin: var(--margin-xlarge);
  box-sizing: border-box;
}

#scriptEditor:last-child {
  margin-bottom: 0;
}

#script {
  position: relative;
  background: transparent;
  box-shadow: 0 0 0 var(--strokeWeight) var(--textColor);
  box-sizing: border-box;
}

#scriptName {
  position: relative;
  border: none;
  width: 100%;
  height: var(--scriptName_height);
  padding-left: var(--margin-small);
  padding-right: var(--margin-small);
  box-sizing: border-box;
  flex-shrink: 1;
}

#scriptName:focus {
  outline: none;
}

#scriptList {
  max-height: calc(var(--scriptName_height) * 5.5);
  font-family: 'interfaceFont';
  font-size: var(--font-size-xlarge);
}

#glyphEditorTools {
  position: relative;
  background: transparent;
  flex-shrink: 0;
  width: fit-content;
}

#glyphEditor {
  position: relative;
  width: var(--glyphEditor_width);
  height: var(--glyphEditor_height);
  flex-shrink: 0;
  margin-bottom: var(--margin-medium);
}

#glyphEditorContext {
  position: fixed;
  background: var(--backgroundColor);
  border: var(--strokeWeight);
  border-color: var(--textColor);
  border-style: solid;
  box-sizing: border-box;
  left: 50px;
  top: 50px;
}

#glyphSetScrollBox {
  flex-grow: 0;
  overflow-y: auto;
  width: calc(var(--glyphEditor_width) + (var(--strokeWeight) * 2));
  min-height: 80px;
  max-height: fit-content;
  position: relative;
  left: calc(var(--strokeWeight) * -1);
  top: calc(var(--strokeWeight) * -1);
  padding-left: var(--strokeWeight);
  padding-top: var(--strokeWeight);
}

#glyphSetScrollBox+.lineHorizontal {
  width: calc(var(--glyphEditor_width) + (var(--strokeWeight) * 2));
  position: relative;
  left: calc(var(--strokeWeight) * -1);
  top: calc(var(--strokeWeight) * -1);
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0px;
}

#glyphSet {
  width: var(--glyphEditor_width);
  height: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  box-shadow: 0 0 0 var(--strokeWeight) var(--textColor);
}

.glyphSet_box {
  width: var(--glyphSet_boxSize);
  height: var(--glyphSet_boxSize);
  background-color: var(--backgroundColor);
  border: var(--textColor) solid var(--strokeWeight);
  box-sizing: border-box;
  position: relative;
  margin: calc(var(--strokeWeight) * -1) 0 0 calc(var(--strokeWeight) * -1.1);
  color: var(--textColor);
  font-family: 'interfaceFont';
  font-size: var(--font-size-large);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glyphSet_first-row-boxes {
  margin-top: 0px;
  border-top: none;
}

.glyphSet_last-row-boxes {
  border-bottom: none;
}

.glyphSet_first-box-in-line {
  margin-left: 0px;
  border-left: none;
}

.glyphSet_last-box-in-line {
  border-right: none;
}

.glyphSet_box:hover {
  background-color: var(--hoverColor);
  color: var(--textColor);
}

.glyphSet_box.active {
  background-color: var(--activeColor);
  color: var(--backgroundColor);
}

.glyphSet_box.empty {
  background-color: var(--emptyColor);
  color: var(--textColor);
}

.glyphSet_box.missing {
  background-color: var(--missingColor);
  color: var(--textColor);
}

.glyphSet_box.empty:hover {
  background-color: var(--hoverColor);
  color: var(--textColor);
}

.glyphSet_box label {
  position: static;
  top: auto;
}

#textBox {
  display: flex;
  justify-content: flex-end;
  position: relative;
  width: var(--textBox_width);
  height: var(--textBox_height);
}

#textBoxButtons {
  position: absolute;
  background: transparent;
  display: flex;
  justify-content: space-between;
  left: calc(var(--strokeWeight) * 0.5);
  bottom: calc(var(--strokeWeight) * 0.5);
  box-sizing: border-box;
  width: calc(var(--textBox_width) - (var(--strokeWeight)));
  height: fit-content;
}

#saveTextButton {
  width: fit-content;
  height: auto
}

#textBoxSettings {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: var(--textBoxSettings_width);
  height: calc(100vh - (var(--margin-xlarge) * 2));
  background: transparent;
  top: 0px;
  right: 0px;
  margin: var(--margin-xlarge);
}

#textBoxSettings .lineHorizontal {
  width: calc(var(--textBoxSettings_width) + (var(--strokeWeight) * 2));
  position: relative;
  left: calc(var(--strokeWeight) * -1);
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0px;
}

#textBoxSettingsSliderScrollBox {
  flex-grow: 1;
  overflow-y: auto;
  width: calc(var(--textBoxSettings_width) + (var(--strokeWeight) * 2));
  max-height: fit-content;
  min-height: 180px;
  position: relative;
  left: calc(var(--strokeWeight) * -1);
  top: calc(var(--strokeWeight) * -1);
  padding-left: var(--strokeWeight);
  padding-top: var(--strokeWeight);
}

#textBoxSettingsSlider {
  width: var(--textBoxSettings_width);
  height: auto;
  padding: var(--margin-small);
  box-sizing: border-box;
  box-shadow: 0 0 0 var(--strokeWeight) var(--textColor);
}

#logo {
  display: flex;
  height: fit-content;
  flex-grow: 1;
  justify-content: end;
  align-items: end;
}

.group {
  width: 100%;
}

.group+.group {
  padding: 0px;
}

.group-horizontalInlineFlex {
  display: inline-flex;
  flex-direction: row;
}

.group-verticalInlineFlex {
  display: inline-flex;
  flex-direction: column;
}

.group-horizontalFlexBlock {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.group-horizontalFlex {
  display: flex;
  flex-direction: row;
}

.group-verticalFlex {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.gapVerticalLarge {
  height: var(--gap-large);
  flex-shrink: 0;
}

.gapVerticalMedium {
  height: var(--gap-medium);
  flex-shrink: 0;
}

.gapVerticalSmall {
  height: var(--gap-small);
  flex-shrink: 0;
}

.gapVerticalXSmall {
  height: var(--gap-xsmall);
  flex-shrink: 0;
}

.gapHorizontalXXSmall {
  width: var(--gap-xxsmall);
  flex-shrink: 0;
}

.gapHorizontalXSmall {
  width: var(--gap-xsmall);
  flex-shrink: 0;
}

.gapHorizontalSmall {
  width: var(--gap-small);
  flex-shrink: 0;
}

.gapHorizontalMinimum {
  height: var(--strokeWeight);
  flex-shrink: 0;
}

.lineHorizontal {
  height: var(--strokeWeight);
  background-color: var(--textColor);
  margin: var(--gap-xsmall);
}

.scrollBox {
  padding-right: calc(var(--margin-xsmall) + var(--scrollbarWidth));
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--textColor) var(--backgroundColor);
}

.scrollBox::-webkit-scrollbar {
  width: var(--scrollbarWidth);
  height: 0;
}

.scrollBox::-webkit-scrollbar-thumb {
  background: var(--textColor);
  border-radius: calc(var(--scrollbarWidth) / 2);
}

.scrollBox::-webkit-scrollbar-track {
  background: var(--backgroundColor);
}

h1 {
  font-family: 'interfaceFont';
  font-size: var(--font-size-large);
  line-height: calc(var(--font-size-large) * var(--line-height-factor));
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  cursor: default;
}

h2 {
  font-family: 'interfaceFont';
  font-size: var(--font-size-medium);
  line-height: calc(var(--font-size-medium) * var(--line-height-factor));
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  margin-top: var(--margin-xsmall);
  cursor: default;
}

p {
  font-family: 'interfaceFont';
  font-size: var(--font-size-small);
  line-height: calc(var(--font-size-small) * var(--line-height-factor));
  font-weight: 100;
  text-transform: none;
  margin: 0;
  color: var(--textColor);
  cursor: default;
}

textarea {
  text-align: left;
  width: calc(100% - var(--strokeWeight) * 2);
  height: 200px;
  background-color: transparent;
  border: none;
  box-shadow: 0 0 0 var(--strokeWeight) var(--textColor);
  box-sizing: border-box;
  font-size: var(--font-size-small);
  color: var(--textColor);
  font-family: 'interfaceFont';
  padding: 0px;
  margin: 0px;
  margin-bottom: var(--innerMargin-small);
  resize: vertical;
  padding: var(--margin-small);
}

textarea:focus {
  outline: none;
  border-color: none; 
  box-shadow: none;
  box-shadow: 0 0 0 var(--strokeWeight) var(--textColor);
}

input[type=text] {
  font-family: 'interfaceFont';
  font-size: var(--font-size-xlarge);
  color: var(--textColor);
  border: none;
  border-bottom: var(--strokeWeight) solid var(--textColor);
  text-align: left;
  caret-color: var(--textColor);
  padding-bottom: 3.5px;
}

input[type=range] {
  margin: 0;
  width: 100%;
  appearance: none;
}

.ranger {
  appearance: none;
  width: 100%;
  height: var(--strokeWeight);
  background: var(--textColor);
  outline: none;
  transition: opacity .2s;
}

.ranger::-webkit-slider-thumb {
  appearance: none;
  width: var(--textBoxSettings_sliderButtonSize);
  height: var(--textBoxSettings_sliderButtonSize);
  border-radius: 50%;
  background: var(--textColor);
  cursor: pointer;
}

.ranger::-moz-range-thumb {
  width: var(--textBoxSettings_sliderButtonSize);
  height: var(--textBoxSettings_sliderButtonSize);
  border-radius: 50%;
  background: var(--textColor);
  cursor: pointer;
  border: none;
}

.ranger::-moz-range-track {
  width: 100%;
  height: var(--strokeWeight);
  background: var(--textColor);
  outline: none;
}

.ranger::-ms-thumb {
  width: var(--textBoxSettings_sliderButtonSize);
  height: var(--textBoxSettings_sliderButtonSize);
  border-radius: 50%;
  background: var(--textColor);
  cursor: pointer;
}

.ranger::-ms-track {
  width: 100%;
  height: var(--strokeWeight);
  background: transparent;
  border-color: transparent;
  color: transparent;
}

button {
  position: relative;
  background-color: var(--backgroundColor);
  color: var(--textColor);
  border: none;
  box-shadow: 0 0 0 var(--strokeWeight) var(--textColor);
  font-family: 'interfaceFont';
  font-size: var(--font-size-medium);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  padding-top: 3.5px;
  padding-bottom: 6.5px;
}

#tutorial {
  display: flex;
  height: fit-content;
  flex-grow: 1;
  justify-content: left;
  align-items: end;
  margin-top: var(--margin-large);
}

#tutorialButton {
  margin: 0;
  width: fit-content;
  height: fit-content;
  flex-shrink: 0;
  box-sizing: border-box;
}

#glyphEditorContext button {
  text-align: left;
  box-shadow: none;
  padding: var(--gap-xxsmall);
  width: auto;
  left: 0;
  padding-left: var(--gap-xsmall);
  padding-right: var(--gap-xsmall);
  margin: 0px;
}

button:hover {
  background-color: var(--hoverColor);
  color: var(--textColor);
}

button.active {
  background-color: var(--activeColor);
  color: var(--backgroundColor);
}

.icon-button {
  color: var(--textColor);
  width: var(--toolbar_buttonSize);
  height: var(--toolbar_buttonSize);
  padding: 0px;
}

.svg-button {
  width: 100%;
  height: 100%;
}

#dropDownButton {
  box-shadow: none;
  border: none;
  border-left: var(--textColor) solid var(--strokeWeight);
  margin-right: var(--strokeWeight);
  width: var(--scriptName_height);
  height: var(--scriptName_height);
  flex-shrink: 0;
  box-sizing: border-box;
}

#logoButton {
  box-shadow: none;
  border: none;
  margin: 0;
  width: var(--logo_size);
  height: var(--logo_size);
  flex-shrink: 0;
  box-sizing: border-box;
  color: var(--logoColor);
}

#logoButton:hover {
  background-color: var(--backgroundColor);
  color: var(--logoColorHover);
}

.dropdown-menu {
  box-sizing: border-box;
  position: absolute;
  display: none;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--backgroundColor);
  z-index: 10;
  box-shadow: 0 0 0 var(--strokeWeight) var(--textColor);
  overflow-y: scroll;
  cursor: pointer;
}

.dropdown-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--textColor);
  border-radius: var(--scrollbarWidth);
}

.dropdown-menu::-webkit-scrollbar-track {
  background: var(--backgroundColor);
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu li {
  padding-left: var(--margin-small);
  padding-right: var(--margin-small);
  height: var(--scriptName_height);
  display: flex;
  align-items: center;
  font-family: 'interfaceFont';
  font-size: var(--font-size-xlarge);
  color: var(--textColor);
  text-align: left;
}

.dropdown-menu li:hover {
  background-color: var(--hoverColor);
}

.dropdown-menu li.active {
  background-color: var(--activeColor);
  color: var(--backgroundColor);
}

.dropdown-menu li.active:hover {
  background-color: var(--activeColor);
  color: var(--backgroundColor);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--textColorRGB), 0.75);
  justify-content: center;
  align-items: center;
}

.modal p {
  text-align: center;
}

.modal-content {
  background: var(--backgroundColor);
  padding: var(--margin-large);
}

.modal input {
  font-family: 'interfaceFont';
  font-size: var(--font-size-medium);
  line-height: calc(var(--font-size-medium) * var(--line-height-factor));
  color: var(--textColor);
  border: none;
  border-bottom: var(--strokeWeight) solid var(--textColor);
  text-align: center;
}

.modal input:focus {
  outline: none;
}