
body {
  background-color: rgb(0, 5, 0);
  background-image: radial-gradient(
    rgba(0, 150, 0, 0.35), black 120%
  );
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  color: white;
  font: 1.3rem Inconsolata, monospace;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.75);
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.35),
      transparent 4px
    );
    pointer-events: none;
  }
  
}

.gridContainer {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}


.coverImg {
  margin: 0 auto;
  width: 90%;
  height: auto;
}

.container {
  position: relative;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box; 
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.myInput {
  background-color: transparent;
  border: none;
  width: 100%;
  color: white;
  caret-color: transparent;

  &:focus {
    outline: none;
    caret-color: transparent;
  }
}
pre {
  background: #000;
  color: white;
  font-family: monospace;
  padding: 1ch;
}
.myInput.caret-bar > span {
  animation: blink 1s step-end infinite;
  border-left: 12px solid white;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
  pointer-events: none;
}
.myInput.caret-bar > span :empty{
  padding-right:1em;
}
@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}

.parserBox {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    width: 100%;
    height: 384px;
    margin: 32px 0;
    padding-left: 10px;
    overflow: auto;
    overflow-y: scroll;
}
.parser-text-title {
  /*color: orange;*/
  background: white;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  margin: 32px 0 0 0;
  padding: 8px;
  width: 100%;

}
.parser-text-intro {
  font-weight: bold;
}
.parser-text {
  margin-top: 16px;
}


