html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Roboto Mono", monospace !important;
}
#main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 100%;
}
#blocklyDiv {
  height: 100%;
  width: 100%;
}
#side {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-left: 1px solid #ccc;
}
#controls {
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
#controls button {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}
#output {
  flex: 1;
  width: 100%;
  border: none;
  padding: 0.5rem;
  font-family: "Roboto Mono", monospace !important;
  font-size: 0.9rem;
  white-space: pre;
  box-sizing: border-box;
  resize: none;
}
/*font for blob in PNG*/
.blocklySvg text field {
  font-family: "Roboto Mono", monospace !important; /* Specifies a generic sans-serif font */
  font-size: 12px;
  background-color: #FFFFFF;
  text-anchor: left; /* Centers text horizontally */
  dominant-baseline: top; /* Centers text vertically */
}
.blocklyText {
  font-family: "Roboto Mono", monospace !important; /* Specifies a generic sans-serif font */
  font-size: 12px;
  text-anchor: left; /* Centers text horizontally */
  dominant-baseline: top; /* Centers text vertically */
  fill: black;
  background-color: white !important;
}

/* Styling for when the field is not being edited (SVG element) */
.blocklyFieldInput {
  fill: #ffcc00; /* Example color (yellow) - use an SVG-compatible color property */
}

/* Styling for when the field is being edited (HTML element, if applicable) */
.blocklyFieldInput.blocklyEditing {
  background-color: #ffffff; /* Example color (white) - use background-color for HTML input */
}

/* Button animations */
.custom-animate-btn {
  /* Add a smooth transition for the transform property */
  transition: transform 0.1s ease;
}
.custom-animate-btn:active {
  /* Scale down slightly and move down to simulate depth when pressed */
  transform: scale(0.95) translateX(2px) translateY(2px);
}

/* Monospace font for Zelos */
/* Apply a monospace font to all elements within the Blockly workspace */
.blocklyWorkspace * {
  font-family: "Roboto Mono", monospace !important;
}

/* Specific selectors that might also be relevant for different parts of the UI */
.blocklyText, .blocklyHtmlInput, .blocklyDropDownDiv {
  font-family: "Roboto Mono", monospace !important;
}

/* Target code blocks or specific elements that may use other classes */
code, pre, .zelos-code {
  font-family: "Roboto Mono", monospace !important;
}

/* avoid gold outline */
/* Removes the gold outline when the block is not selected */
.blocklyPath:not(.blocklySelected) {
  stroke: none !important;
}

/* If you want a subtle default border when not selected, you can add this */
.blocklyPath {
  stroke: #c6c6c6 !important; /* Example color, adjust as needed */
  stroke-width: 1px !important;
}

/* Ensure selected blocks still have their intended visual indicator, if desired */
.blocklyPath.blocklySelected {
  stroke: gold !important; /* Re-apply the gold for the active selection */
  stroke-width: 2px !important; /* Adjust width as needed */
}

/* Toolbox headings */
.customCategoryLabel {
  font-family: monospace;
  font-size: 18px;
  font-weight: bold;
  color: grey;
  text-decoration: underline 3px; /* Shorthand */
  text-underline-offset: 4px;             /* Position */
}

.styled-underline {
  text-decoration: underline wavy red 3px; /* Shorthand */
  text-underline-offset: 4px;             /* Position */
}