body {
  margin: 0px;
  font-family: "Raleway", sans-serif;
}
.header {
  width: 100%;
  height: 50px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header h1 {
  /* padding:10px 20px; */
  /* background-color: white; */
  color: white;
  font-size: 24px;
  font-weight: 600;
}

.editor {
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
}

.editor .code {
  width: 500px;
  border-right: 1px solid black;
  /* height: 33.33%; */
}

.editor .code > div {
  width: 100%;
  /* height:25%; */
  /* border: 2px solid black; */
  color: black;
}
#html-code {
  border-bottom: 1px solid blue;
}
#css-code {
  border-bottom: 1px solid blue;
}
#js-code {
  border-bottom: 1px solid blue;
}

.editor .preview {
  width: calc(100% - 500px);
  height: 100vh;
}

.editor .preview iframe {
  width: 100%;
  height: 100vh;
  border: none;
}
.CodeMirror {
  height: auto;
}