/* font for all text */
@font-face {
  font-family: 'PerfectDOS';
  src: url('fonts/Perfect_DOS_VGA_437.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* font for input/output arrows only */
@font-face {
    font-family: 'DejaVu Sans';
    src: url('../fonts/dejavu-sans-webfont.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

body, * {
  font-family: 'PerfectDOS', monospace;
  caret-shape: block;
}

/* message box overlays all other content */
#full-screen-message-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

/* dim all content */
.full-screen-message-box-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
}

.debug-message-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  border: 4px solid rgb(170, 0, 0);
  padding: 20px;
  color: rgb(170, 0, 0);
  z-index: 1002;
  width: 540px;
  height: 300px;
  text-align: center;
  white-space: pre-wrap;
}

.debug-message-continue-button {
  position: absolute;
  top: 250px;
  width: 250px;
  height: 40px;
  left: 135px;
  border: 4px double rgb(170, 0, 0);
  line-height: 40px;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(170, 0, 0, 0.5);
  cursor: pointer;
}

.debug-message-continue-button:hover {
  box-shadow: 4px 4px 0 rgba(170, 0, 0, 0.75);
}

.debug-message-continue-button:active {
  background-color: rgba(170, 0, 0, 0.2);
}

.debug-message-box-text {
  position: absolute;
  width: 510px;
  top: 52px;
  left: 40px;
  text-align: left;
}

/* left panel */
.left-panel {
  position: fixed;
  top: 10px;
  left: 30px;
  width: 380px;
  height: 940px;
  background-color: #000;
  color: #eee;
  z-index: 100;
}

.title-message {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 380px;
  height: 30px;
  background-color: #000;
  color: #aaa;
  text-align: center;
}

.main-message-box {
  position: absolute;
  top: 40px;
  left: 0px;
  width: 370px;
  height: 140px;
  border: 4px double #eee;
  background-color: #000;
  color: #eee;
  z-index: 100;
  padding: 0;
  white-space: pre-wrap;
}

.main-message-text {
  position: absolute;
  top: 8px;
  left: 12px;
}

.console-display-label {
  position: absolute;
  top: 210px;
  left: 0px;
  width: 370px;
  height: 30px;
  background-color: #000;
  color: #eee;
  text-align: center;
}

.console-display {
  position: absolute;
  top: 230px;
  left: 0px;
  width: 360px;
  height: 350px;
  max-width: 360px;
  max-height: 350px;
  overflow: hidden;
  border: 4px solid #eee;
  border-radius: 5px;
  background-color: #000;
  color: #eee;
  z-index: 100;
  padding: 5px;
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.console-text {
  width: 360px;
  height: 16px;
  margin-bottom: 0px;
  display: flex;
  gap: 0px;
  white-space: pre-wrap;
}

.console-cursor {
  background-color: #eee;
  color: #000;
  animation: console-cursor-blink 1s infinite;
}

@keyframes console-cursor-blink {
  0%, 50% {
    background-color: #eee;
    color: #000;
  }
  51%, 100% {
    background-color: transparent;
    color: #eee;
  }
}

.sim-status-info-label {
  position: absolute;
  top: 620px;
  left: 0px;
  width: 370px;
  height: 30px;
  background-color: #000;
  color: #eee;
  text-align: center;
}

.sim-status-info {
  position: absolute;
  top: 640px;
  left: 0px;
  width: 360px;
  height: 32px;
  background-color: #000;
  border: 4px double #eee;
  padding: 4px;
}

.sim-mode {
  color: #eee;
  z-index: 100;
  position: absolute;
  width: 100%;
}

#sim-mode-label {
  top: 4px;
  left: 0px;
  width: 50px;
  text-align: right;
}

#sim-mode-hz-label {
  top: 4px;
  left: 180px;
  width: 80px;
  text-align: right;
}

#sim-mode-cycles-label {
  top: 20px;
  left: 180px;
  width: 80px;
  text-align: right;
}

#sim-mode {
  top: 4px;
  left: 54px;
}

#sim-mode-hz {
  top: 4px;
  left: 264px;
}

#sim-mode-cycles {
  top: 20px;
  left: 264px;
}

.manual-button {
  position: absolute;
  width: 70px;
  height: 25px;
  bottom: 85px;
  left: 10px;
  border: 4px double #eee;
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  background-color: #000;
  color: #eee;
  z-index: 100;
}

.manual-button:hover {
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.75 );
}

.manual-button:active {
  background-color: #555;
}

.manual-button-text {
  position: absolute;
  top: 5px;
  text-align: center;
  width: 100%;
}

/* control buttons */
.control-button {
  position: absolute;
  width: 70px;
  height: 65px;
  border: 4px double #eee;
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  background-color: #000;
  color: #eee;
  z-index: 100;
}

.control-button:hover {
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.75 );
}

.control-button:active {
  background-color: #555;
}

.control-button-text {
  position: absolute;
  bottom: 4px;
  text-align: center;
  width: 100%;
}

#stop-button {
  bottom: 0px;
  left: 10px;
}

.stop-button-symbol {
  width: 25px;
  height: 25px;
  background-color: #eee;
  position: absolute;
  left: 22px;
  top: 10px;
}

#step-button {
  bottom: 0px;
  left: 105px;
}

.pause-button-symbol {
  position: absolute;
  left: 38px;
  top: 30px;
  font-size: 12px;
  font-weight: bold;
}

#run-button {
  bottom: 0px;
  left: 200px;
}

.arrow-button-symbol {
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 24px solid #eee;
  position: absolute;
}

.run-button-symbol {
  left: 24px;
  top: 10px;
}

#fast-button {
  bottom: 0px;
  left: 295px;
  animation: fastButtonPulse 2s ease-in-out infinite;
}

#fast-button.no-pulse {
  animation: none;
}

@keyframes fastButtonPulse {
  0%, 100% {
    box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 4px 4px 0 rgba(255, 255, 255, 1.0);
  }
}

.fast-arrow-1 {
  left: 15px;
  top: 10px;
}

.fast-arrow-2 {
  left: 25px;
  top: 10px;
}

.fast-arrow-3 {
  left: 35px;
  top: 10px;
}

/* hide ports */
.hide-ports-left {
  background-color: #000;
  z-index: 10;
  position: fixed;
  width: 50px;
  height: 860px;
  left: 408px;
  top: 60px;
}

.hide-ports-right {
  background-color: #000;
  z-index: 10;
  position: fixed;
  width: 50px;
  height: 860px;
  left: 1680px;
  top: 60px;
}

.hide-ports-up {
  background-color: #000;
  z-index: 10;
  position: fixed;
  width: 1200px;
  height: 50px;
  left: 470px;
  top: 8px;
}

.hide-ports-down {
  background-color: #000;
  z-index: 10;
  position: fixed;
  width: 60px;
  height: 50px;
  display: none;
}

/* the bottom ports are hidden individually since the arrows are part of the nodes */
#hide-ports-down-0 {
  left: 600px;
  top: 918px;
}

#hide-ports-down-1 {
  left: 920px;
  top: 918px;
}

#hide-ports-down-2 {
  left: 1240px;
  top: 918px;
}

#hide-ports-down-3 {
  left: 1560px;
  top: 918px;
}

/* input ports (top) */
.input-port {
  background-color: #000;
  z-index: 20;
  color: #eee;
  width: 120px;
  height: 25px;
}

.input-port-label {
  position: absolute;
  left: 0px;
  top: 2px;
  width: 60px;
  text-align: right;
  font-weight: bold;
}

.input-port-arrow {
  position: absolute;
  right: 35px;
  bottom: -10px;
  font-size: 30px;
  color: #555;
}

.input-port-value {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 38px;
  text-align: left;
  font-weight: bold;
}

#input-0 {
  position: fixed;
  left: 539px;
  top: 25px;
}

#input-1 {
  position: fixed;
  left: 859px;
  top: 25px;
}

#input-2 {
  position: fixed;
  left: 1179px;
  top: 25px;
}

#input-3 {
  position: fixed;
  left: 1499px;
  top: 25px;
}

/* output ports (bottom... just labels */
.output-port-label {
  background-color: #000;
  z-index: 20;
  color: #eee;
  width: 90px;
  height: 20px;
  text-align: right;
}

#output-0 {
  position: fixed;
  left: 500px;
  top: 930px;
}

#output-1 {
  position: fixed;
  left: 820px;
  top: 930px;
}

#output-2 {
  position: fixed;
  left: 1140px;
  top: 930px;
}

#output-3 {
  position: fixed;
  left: 1460px;
  top: 930px;
}

/* container for nodes */
.node-grid {
  position: fixed;
  left: 460px;
  top: 60px;
}

/* Node row 1 */
#node-0 {
  left: 0px;
  top: 0px;
}

#syntax-error-node-0 {
  left: 480px;
  top: 27px;
}

#node-1 {
  left: 320px;
  top: 0px;
}

#syntax-error-node-1 {
  left: 800px;
  top: 27px;
}

#node-2 {
  left: 640px;
  top: 0px;
}

#syntax-error-node-2 {
  left: 1120px;
  top: 27px;
}

#node-3 {
  left: 960px;
  top: 0px;
}

#syntax-error-node-3 {
  left: 1440px;
  top: 27px;
}

/* Node row 2 */
#node-4 {
  left: 0px;
  top: 300px;
}

#syntax-error-node-4 {
  left: 480px;
  top: 327px;
}

#node-5 {
  left: 320px;
  top: 300px;
}

#syntax-error-node-5 {
  left: 800px;
  top: 327px;
}

#node-6 {
  left: 640px;
  top: 300px;
}

#syntax-error-node-6 {
  left: 1120px;
  top: 327px;
}

#node-7 {
  left: 960px;
  top: 300px;
}

#syntax-error-node-7 {
  left: 1440px;
  top: 327px;
}

/* Node row 3 */
#node-8 {
  left: 0px;
  top: 600px;
}

#syntax-error-node-8 {
  left: 480px;
  top: 627px;
}

#node-9 {
  left: 320px;
  top: 600px;
}

#syntax-error-node-9 {
  left: 800px;
  top: 627px;
}

#node-10 {
  left: 640px;
  top: 600px;
}

#syntax-error-node-10 {
  left: 1120px;
  top: 627px;
}

#node-11 {
  left: 960px;
  top: 600px;
}

#syntax-error-node-11 {
  left: 1440px;
  top: 627px;
}


/* node general */
.node {
  display: inline-block;
  background: #000;
  padding: 2px 2px;
  margin: 0px;
  position: absolute;
  width: 251px;
  color: #eee;
  border: 1px solid #eee;
}

.node-syntax-error {
  position: fixed;
  width: 210px;
  height: 20px;
  z-index: 100;
  margin: 0;
  background-color: #000;
  border: 4px double rgb(170, 0, 0);
  color: rgb(170, 0, 0);
  text-align: center;
  line-height: 20px;
  z-index: 200;
  display: none;
}

.node-main {
  display: flex;
  flex-direction: row;
  padding: 1px;
  gap: 1px;
}

/* node arrows - all but damaged node */
.node-arrows {
  position: absolute;
  left: 50%;
  top: -32px;
  width: 0;
  height: 0;
  pointer-events: none;
}
.node-arrow {
  position: absolute;
  font-family: 'DejaVu Sans';
  font-size: 30px;
  color: #555;
}

.arrow-active {
  color: #fff;
}

.node-arrow-up    { left: -40px; top: -8px; }
.node-arrow-down  { left: 10px; top: 294px; }
.node-arrow-left  { left: -170px; top: 164px; }
.node-arrow-right { left: 150px; top: 120px; }

.node-output-value {
  position: absolute;
  /* color: #fff; */
  font-size: 16px;
  width: 40px;
}

.node-output-up    { left: -76px; top: 4px; text-align: right; }
.node-output-down  { left: 32px; top: 303px; text-align: left; }
.node-output-left  { left: -178px; top: 160px; text-align: center;}
.node-output-right { left: 142px; top: 116px; text-align: center; }

/* basic node */
.node-code-area {
  background: #000;
  border: 1px solid;
  padding: 2px 4px;
  width: 180px;
  height: 242px;
  font-size: 16px;
  line-height: 1;
  margin-right: 2px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* individual program line */
.node-line {
    width: 100%;
    height: 20px;
    white-space: pre-wrap;

}

/* highlight when executing */
.node-line-execute {
  color: #000;
  background-color: #fff;
}

/* highlight when read/write blocked */
.node-line-blocked {
  color: #000;
  background-color: #ccc;
}

/* comment text color */
.node-line-comment {
  color: #aaa;
}

/* syntax error text color */
.node-line-syntax-error {
  color: rgb(170, 0, 0);
}

/* node status container */
.node-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 56px;
  gap: 2px;
}

/* node status box */
.node-status-box {
  background: #000;
  border: 1px solid;
  padding: 3px 2px;
  width: 50px;
  height: 40px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0px;
}

.node-status-label {
  font-size: 16px;
  color: #aaa;
  margin-bottom: 1px;
  margin-top: 4px;
  width: 100%;
  text-align: center;
}
.node-status-value {
  font-size: 16px;
  /* color: #fff; */
  width: 100%;
  text-align: center;
}

/* damaged (red) node */
.damaged-node {
  color: rgb(170, 0, 0);
  border: 1px solid rgb(170, 0, 0);
}

.node-message-box-damaged {
  position: absolute;
  top: 40px;
  width: 130px;
  left: 34px
}

.node-message-bar-red {
  height: 16px;
  background-color: rgb(170, 0, 0);
}

/* damaged node debug button */
.debug-button {
  position: absolute;
  top: 150px;
  width: 114px;
  height: 40px;
  left: 34px;
  border: 4px double rgb(170, 0, 0);
  line-height: 40px;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(170, 0, 0, 0.5);
  cursor: pointer;
}

.debug-button:hover {
  box-shadow: 4px 4px 0 rgba(170, 0, 0, 0.75);
}

.debug-button:active {
  background-color: rgba(170, 0, 0, 0.2);
}

/* stack memory node */
.node-message-box-stack {
  position: absolute;
  top: 96px;
  width: 176px;
  left: 10px
}

.node-message-bar {
  height: 16px;
  background-color: #fff;
}

.node-message {
  margin-top: 4px;
  margin-bottom: 4px;
  text-align: center;
  line-height: 20px;
}

.node-stack-box {
  position: absolute;
  background: #000;
  border: 1px solid;
  padding: 3px 2px;
  left: 196px;
  width: 50px;
  height: 240px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0px;
}

.stack-mem-value {
  width: 100%;
  text-align: center;
}

.mem-value-top {
  background-color:rgb(170, 0, 0, 0.5)
}

.zachtronics {
  position: fixed;
  bottom: 5px;
  left: 30px;
  font-size: 16px;
  color: #555;
}

.zachtronics a {
  color: #555;
  text-decoration: none;
}

.zachtronics a:hover {
  color: #aaa;
  text-decoration: underline;
}

.github {
  position: fixed;
  bottom: 5px;
  right: 30px;
  font-size: 16px;
  color: #555;
}

.github a {
  color: #555;
  text-decoration: none;
}

.github a:hover {
  color: #aaa;
  text-decoration: underline;
}

.visible {
  display: block;
}
.hidden {
  display: none;;
}