style.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: 14px;
  min-height: 100vh;
  margin: 0;
  /* grid container settings */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  grid-template-areas:
    "container"
    "logs"
}


h1 {
  margin: 0;
  padding: 10px 0;
  grid-area: title;
}

.sample-name {
  grid-area: name;
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 0.5em;
  border: none;
}

textarea {
  font-family: monospace;
  line-height: 1.25;
}

.container {
  grid-area: container;
  display: grid;
  padding: 0;
  background-color: var(--background-color);
  grid-template-columns: 1fr 1fr;
}

#mpostcode,
#result {
  height: 75vh;
  margin: 10px;
}



  #result {
    display: inline-block;
    position: relative;
  }


svg {
  height: max-content;
}

#log {
  white-space: pre-wrap;
  margin: 10px;
  padding: 10px;
}

#mpostcode,
#target_content {
  padding: 1em;
  font-size: 1.2em;
  resize: none;
  outline: none;
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  color: var(--text-color);
}

progress {
  height: 4px;
  width: 100%;
  display: none;
  min-width: 50%;
}

.CodeMirror.cm-s-default,
.CodeMirror.cm-s-nord {
  height: auto;
  max-height: 75vh;
}

.logs {
  grid-area: logs;
  border-top: 1px solid var(--border-color);
}
.share-popover section{
  background: var(--header-color);
  display: grid;
  padding: 8px;
  input {
    width: 75ch;
  }
  textarea{
    width: 75ch;
    height: 10ch;

  }

}