html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/*https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space*/
body {
  margin: 0;
  height: 100vh;
  color: white;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100%;
}

header {
  flex: 0 1 75px;
  background-image: linear-gradient(to right, var(--solid-dark), var(--solid-light));
  border-bottom: 3px solid var(--primary-border);
}

#content {
  display: flex;
  border-style: solid;
  flex: 1 1 auto;
}

#editor {
  width: 40%;
  background-color: var(--secondary-fill);
  border: 3px solid var(--secondary-border);
}

#viewer {
  width: 60%;
  background-color: black;
}

footer {
  flex: 0 1 50px;
  background-image: linear-gradient(to right, var(--solid-dark), var(--solid-light));
  border-top: 3px solid var(--primary-border);  
}