fcc-challenges/markdown-previewer/markdownPreviewer.css

body {
  display: flex;
  flex-direction: column;
  background-color: #eee8d5;
  color: #073642;
  overflow: hidden;
}

#editorAndPreview {
  display: flex;
}

#buttonHeader {
  height: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

#eraseButton {
  background-color: #dc322f;
  color: #fdf6e3;
}

#reloadButton {
  background-color: #268bd2;
  color: #fdf6e3;
  margin-left: 1rem;
  margin-right: 1rem;
}

#editor {
  font: monospace;
  border: none;
  outline: none;
  background-color: #073642;
  color: #eee8d5;
}

#editor, #preview {
  padding: 0px 3rem 0px 3rem;
}

#preview {
  overflow: auto;
}

code {
  font: monospace;
  background-color: LightGrey;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

img {
  max-width: 100%;
  height: auto;
}

#textEditor {
  background-color: #073642;
}

#buttonHeader {
  height: 3rem;
}

@media (orientation: portrait), (max-device-width: 768px) {
  #editorAndPreview {
    flex-direction: column;
    justify-content: flex-start;
  }
  #editor {
    height: 30vh;
    width: 100vw;
  }
  #preview {
    overflow-y: scroll;
    height: 40vh;
    width: 100vw;
  }
}

@media (min-device-width: 1024px), (orientation: landscape) and (max-device-height: 425px) {
  #editorAndPreview {
    flex-direction: row;
    justify-content: flex-end;
  }
  #textEditor, #preview {
    width: 50vw;
    height: 95vh;
  }
  #editor {
    resize: none;
    width: 100%;
    height: 100%;
    padding-bottom: 3%;
  }
  @media (max-device-height: 425px) {
    #textEditor, #preview {
      height: 90vh;
    }
  }
}