@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/IBMPlexMono-Regular.ttf");
}


html, body {
  font-family: 
  ui-monospace, 
  "SF Mono",
  "IBM Plex Mono",
  Menlo;

  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh; 

  scrollbar-width: none;
  -ms-overflow-style: none;
}
h1, h2, h3, p, pre {
  margin: 0;
}

/* add back controlled spacing */
#terminal h1, #terminal h2, #terminal h3 { margin-bottom: 12px; }
#terminal p { margin-top: 12px; }
#terminal pre { margin-top: 12px; }



.report-output{
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  padding: 15px;
  overflow-y: visible;
  background: #F7F3E7;
  color: #322A23;
  margin: 1rem auto 1rem auto;
  /* filter: drop-shadow(0px 15px 20px rgb(173, 173, 173)); */
  
  /* white-space: pre;  wrap long text without breaking  d fformatting */
  overflow-wrap: anywhere;
  word-break: break-all;
  text-wrap-mode: wrap;
  white-space-collapse: preserve;

  font-size: 18px;
  line-height: 20px;
  letter-spacing: normal;
  font-kerning: none;
  font-weight: 400;


}
#headerDiv{
  font-size: 16px;
  line-height: 17px;
}

#projectDiv,
#reportDiv {
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;

}

@media(max-width: 700px){
  #terminal{
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-all;
    width: 100%;
    height: auto;
  }
} 
@media(max-width: 500px){
  .report-output {
    max-width: 100%;
    margin: 0rem;
  }
  
} 

/*  Span colors + styling  */

/* Official system colors for xterm  */
.black { color: #000;}
.maroon { color: #800000;}
.green { color: #008000;}
.olive { color: #808000;}
.navy { color: #000080;}
.purple { color: #800080;}
.teal { color: #008080;}
.silver { color: #c0c0c0;}
.grey { color: #808080;}
.red { color: #ff0000;}
.lime { color: #00ff00;}
.yellow { color: #ffff00;}
.blue { color: #0000ff;}
.fuchsia { color: #ff00ff;}
.aqua { color: #00ffff;}
.white { color: #fff;}

/* highlighting */
.hBlack { background-color: #000;}
.hMaroon { background-color: #800000;}
.hGreen { background-color: #008000;}
.hOlive { background-color: #808000;}
.hNavy { background-color: #000080;}
.hPurple { background-color: #800080;}
.hTeal { background-color: #008080;}
.hSilver { background-color: #c0c0c0;}
.hGrey { background-color: #808080;}
.hRed { background-color: #ff0000;}
.hLime { background-color: #00ff00;}
.hYellow { background-color: #ffff00;}
.hBlue { background-color: #0000ff;}
.hFuchsia { background-color: #ff00ff;}
.hAqua { background-color: #00ffff;}
.hWhite { background-color: #fff;}

/* text styling */
.bold { font-weight: bold;}
.italic { font-style: italic;}
.underline { text-decoration: underline;}