app.css

body {
    text-shadow: 0px 1px 3px rgba(0,0,0, 0.5);
    font-family: 'Roboto', 'Open Sans', sans-serif;
    overflow: hidden;
    background: #222244;
    color: white;
}
#githubLink{
  color:white;
  text-decoration: underline;
  padding-left:60px;
}
#githubLink::before{
  display:inline-block;
  content:' ';
  width:20px;
  height: 20px;
  position: relative;
  right:8px;
  top:4px;
  background-image: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%22438.549px%22%20height%3D%22438.549px%22%20viewBox%3D%220%200%20438.549%20438.549%22%20style%3D%22enable-background%3Anew%200%200%20438.549%20438.549%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20d%3D%22M409.132%2C114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736%2C15.166%2C259.057%2C5.365%2C219.271%2C5.365%0A%09%09c-39.781%2C0-76.472%2C9.804-110.063%2C29.408c-33.596%2C19.605-60.192%2C46.204-79.8%2C79.8C9.803%2C148.168%2C0%2C184.854%2C0%2C224.63%0A%09%09c0%2C47.78%2C13.94%2C90.745%2C41.827%2C128.906c27.884%2C38.164%2C63.906%2C64.572%2C108.063%2C79.227c5.14%2C0.954%2C8.945%2C0.283%2C11.419-1.996%0A%09%09c2.475-2.282%2C3.711-5.14%2C3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567%2C1.136%0A%09%09c-4.187%2C0.767-9.469%2C1.092-15.846%2C1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559%0A%09%09c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559%0A%09%09c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997%0A%09%09c-0.572-1.335-0.098-2.43%2C1.427-3.289c1.525-0.859%2C4.281-1.276%2C8.28-1.276l5.708%2C0.853c3.807%2C0.763%2C8.516%2C3.042%2C14.133%2C6.851%0A%09%09c5.614%2C3.806%2C10.229%2C8.754%2C13.846%2C14.842c4.38%2C7.806%2C9.657%2C13.754%2C15.846%2C17.847c6.184%2C4.093%2C12.419%2C6.136%2C18.699%2C6.136%0A%09%09c6.28%2C0%2C11.704-0.476%2C16.274-1.423c4.565-0.952%2C8.848-2.383%2C12.847-4.285c1.713-12.758%2C6.377-22.559%2C13.988-29.41%0A%09%09c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126%0A%09%09c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035%2C7.52-42.637%2C22.557-58.817%0A%09%09c-7.044-17.318-6.379-36.732%2C1.997-58.24c5.52-1.715%2C13.706-0.428%2C24.554%2C3.853c10.85%2C4.283%2C18.794%2C7.952%2C23.84%2C10.994%0A%09%09c5.046%2C3.041%2C9.089%2C5.618%2C12.135%2C7.708c17.705-4.947%2C35.976-7.421%2C54.818-7.421s37.117%2C2.474%2C54.823%2C7.421l10.849-6.849%0A%09%09c7.419-4.57%2C16.18-8.758%2C26.262-12.565c10.088-3.805%2C17.802-4.853%2C23.134-3.138c8.562%2C21.509%2C9.325%2C40.922%2C2.279%2C58.24%0A%09%09c15.036%2C16.18%2C22.559%2C35.787%2C22.559%2C58.817c0%2C16.178-1.958%2C30.497-5.853%2C42.966c-3.9%2C12.471-8.941%2C22.457-15.125%2C29.979%0A%09%09c-6.191%2C7.521-13.901%2C13.85-23.131%2C18.986c-9.232%2C5.14-18.182%2C8.85-26.84%2C11.136c-8.662%2C2.286-18.415%2C4.004-29.263%2C5.146%0A%09%09c9.894%2C8.562%2C14.842%2C22.077%2C14.842%2C40.539v60.237c0%2C3.422%2C1.19%2C6.279%2C3.572%2C8.562c2.379%2C2.279%2C6.136%2C2.95%2C11.276%2C1.995%0A%09%09c44.163-14.653%2C80.185-41.062%2C108.068-79.226c27.88-38.161%2C41.825-81.126%2C41.825-128.906%0A%09%09C438.536%2C184.851%2C428.728%2C148.168%2C409.132%2C114.573z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fg%3E%0A%0A%3C%2Fsvg%3E%0A);
  background-size: contain;

  }
#__editor {
    margin: 0;
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 50%;
    right: 0;
}
#__toolbar {
    padding:5px;
    background: #444444;
    margin: 0;
    position: absolute;
    top: 0px;
    height:40px;
    width:50%;
    left: 50%;
    right: 0;
}
#__consoleBar {
    padding:5px;
    background: #444444;
    margin: 0;
    position: absolute;
    bottom: 0px;
    height:20px;
    width:50%;
    left: 0;
}
.title {
  display:inline-block;
  font-size: 20px;
  margin:3px;
}
.title-small {
  display:inline-block;
  font-size: 16px;
  margin:3px;
}
#__toolbar .button,
#__console .button {
  margin-right:15px;
}
.button {
  float:right;
  cursor: pointer;
  display: inline-block;
  padding:4px 7px;
  box-shadow: 0px 1px 5px rgba(0,0,0, 0.5);
}
.button.green {
  background-color: #60d030;
}
.button.green:hover {
  background-color: #68e035;
}
.button.blue {
  background-color: #3060d0;
}
.button.blue:hover {
  background-color: #3568e0;
}
#__stage {
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width:50%;
}
#__helpContainer, #__mdnIframeContainer {
    z-index: 100;
    background: #444444;
    margin: 0;
    position: absolute;
    top: 3%;
    left: 5%;
    right: 5%;
    width:90%;
    height:90%;
    padding:10px 10px;
    box-shadow: 0px 3px 30px rgba(0,0,0, 1);
}
#__mdnIframeContainer {
  z-index: 101;
}
.flexbox-container {
  display: flex; 
  width: 100%; 
  height: 100%; 
  flex-direction: column; 
  background-color: blue; 
  overflow: hidden;
}
.flexbox-row {
  background: #444444;
}
#__mdnIframeUrlBar, #__mdnIframeBackButton {
  margin-bottom: 6px;
  border: 1px solid #ddd;
  color: #ddd;
  background: #444;
  padding: 4px;
  border-radius: 4px;
}
#__mdnIframeBackButton {
  width: 35px;
}
#__mdnIframeBackButton:disabled {
  border: 1px solid #888;
  color: #888;
}
#__mdnIframeUrlBar {
  width: calc(100% - 70px);
}
#__mdnIframe {
  flex-grow: 1; 
  border: none; 
  margin: 0; 
  padding: 0;
  background: #444;
}
#__loadingScreen {
    z-index: 100;
    background: rgba(0,0,0, 0.5);
    margin: 0;
    position: absolute;
    top: 20%;
    left: 20%;
    width:40%;
    height:40%;
    padding:30px 30px;
    box-shadow: 0px 3px 30px rgba(0,0,0, 1);
}
#__console {
    z-index: 50;
    background: #444444;
    margin: 0;
    position: absolute;
    top: 15%;
    left: 0%;
    right: 50%;
    width:calc(50%-20px);
    height:85%;
    padding:10px 10px;
    box-shadow: 0px 3px 30px rgba(0,0,0, 1);

}
#__helpContainer .container {
  overflow-y: auto;
  height: 90%;
}
#__consoleContainer {
  overflow-y: auto;
  box-shadow: 0px 1px 5px rgba(0,0,0, 0.5);
  max-height: 90%;
}

.logElement {
  font-size: 14px;
  font-family: monospace;
  text-shadow: none;
  border-top: 2px solid rgba(255,255,255,0.1);
  padding:5px;
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
.logElement.info {
  background: #3366dd !important;
}
.logElement.error {
  background: #dd4433 !important;
}

.helpContent {
  display:block;
  float:left;
  padding:5px;
  height: 1500px;
  width: 32%;
  font-family: monospace;
  font-size: 14px;
  text-shadow:none;
  letter-spacing: 0.05em;
}
.helpContent p {
  line-height: 22px;
}