@font-face {
  font-family: slkscr;
  src: url("./FIXEDSYS.ttf");
}

html, body {
  margin: 0;
  padding: 0;
  color: white;
  background-color: #293039;
}
canvas {
  display: block;
}

#main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
}

#left {
  padding: 0px 4px;
  flex-grow:1;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#popup {
  position: absolute;
  top: 0;
  left: 0;
  width:100vw;
  height: 100vh;
  background-color: #293039;
}

#popup-close {
  position: absolute;
  top: 0;
  right: 0;
}

#columns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width:100vw;
  height: 100vh;
  overflow: auto;
}

#columns > * {
  height: 100%;
  flex-grow:1;
}

#screen-container {
  display: flex;
  flex-direction: column;
}

#log {
  width: 400px;
  max-height: 400px;
  overflow:scroll;
  flex-grow: 1;
}

#documentation {
  margin-top: 16px;
}

#compiler-errors {
  margin-top: 8px;
  color: #f66;
}

.hidden {
  display: none;
}

.closer {
  transform: rotate(270deg);
  writing-mode: vertical-lr;
  transition: transform 0.25s;
  user-select: none;
  cursor: pointer;
}

.closer.rotated {
  transform: rotate(360deg);
}

.scroll {
  overflow-y: scroll;
  /* max-height: 50vh; */
  position: relative;
  flex: 1;
  background-color: #394049;
}

.code-container {
  display: flex;
  flex-direction: row;
  min-height: 100%;
  /* padding:4px; */
  gap: 4px;
  /* max-height: 50vh; */
  /* overflow-y: scroll; */
  background-color: #394049;
}

.code-container > * {
  /* min-height:400px; */
  font-family: monospace;
  font-size:14px;
}

.buttons {
  position:sticky;
  right:0;
  bottom:0;
  float: right;
}

.line-numbers {
  display: flex;
  flex-direction: column;
  text-align: right;
  padding: 0px 4px;
  padding-right: 8px;
  min-width: 24px;
  background-color: #293039;
  user-select: none;
  font-size: 13px;
}

.stack {
  margin-left: 4px;
  border-radius: 8px;
  padding: 4px;
  background-color: #394049;
}

.syntax-container {
  position: relative;
  display: flex;
  flex-grow: 1;
}

.syntax {
  position: absolute;
  top: 0;
  left: 4px;
  font-size: 13px;
  font-family: monospace;
  pointer-events: none;
}



textarea.code {
  border:none;
  padding:0;
  padding-left:4px;
  margin:0;
  outline:0;
  resize: none;
  color: white;
  background-color: #394049;
  flex-grow: 1;
  font-size: 13px;
}

.syntax-container textarea.code {
  color: transparent;
  caret-color: #fff;
}

h1 {
  margin: 8px 4px;
  font-family: monospace;
}

a {
  color:white;
  /* text-decoration: none; */
  /* border-style: solid;
  border-width: 1px;
  border-color: rgb(133, 133, 133);
  background-color: rgb(239, 239, 239);
  border-radius: 2px;
  padding: 1px 6px; */
  font-family: sans-serif;
}

.pxl {
	font-family: slkscr;
}

a:visited {
  color: #d9a9ff
}

button  {
  margin-top: 2px;
  cursor: pointer;
}

/*  editor. */

.term {
  color: #d7f;
}

.str {
  color: #4e8;
}

.num {
  color: #f90;
}

.math {
  color: #4bc;
}

.fun {
  color: #8af;
}

.obj {
  color: #f66;
}

.cls {
  color: #fd6;
}

.cnst {
  color: #f90;
}

.cmnt {
  color: #999;
}