*{
    margin: 0;
    padding: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box main {
  flex: 1 1 auto;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
}

#left-header{
    display: flex;
}

#left-header *{
  margin: 0 10px; 
}

#mode{
  width: 50px;
}

textarea{
    resize: none;
}

main{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#coding{
    position: relative;
}

#editing, #highlighting {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 10px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100vh - 72px);

  overflow: auto;
  white-space: pre; /* Allows textarea to scroll horizontally */
}

#editing, #highlighting, #highlighting * {
  /* Also add text styles to highlighting tokens */
  font-size: 10pt;
  font-family: monospace;
  line-height: 15pt;
}

#editing, #highlighting {
  position: absolute;
  top: 0;
  left: 0;
}

/* Move the textarea in front of the result */
#editing {
  z-index: 1;
}

#highlighting {
  z-index: 0;
}

/* Make textarea almost completely transparent */
#editing {
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favorite color */
}

#editing, #highlighting, #highlighting * {
  /* Also add text styles to highlighing tokens */
  /* etc. */
  tab-size: 2;
}

#preview{
    margin: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}