* {
  margin: 0px;
  font-family: "Open Sans", sans-serif;
}

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

.clear {
}

.header {
  background-color: black;
  display: flex;
}

.pageHeader {
  flex: 80%;
}

.pageHeading {
  background-color: blanchedalmond;
  width: max-content;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-transform: uppercase;
}

#codePlayer {
}

.codePlayer {
}

.toggles {
  flex: 20%;
  display: flex;
  padding: 20px;
  background-color: blanchedalmond;
}

.toggle {
}

.toggles .toggle {
  padding: 5px;
}

.toggles div a {
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px;
}

.toggles div a:hover {
  color: grey;
  border: black solid 2px;
  border-radius: 6px;
  padding: 7px;
}

.selected {
  color: grey;
  border: black solid 1px;
  border-radius: 6px;
}

.run {
  padding: 0px;
  margin: 0px;
}

#run {
  background-color: black;
  border-radius: 4px;
  color: blanchedalmond;
  padding: 5px;
  cursor: pointer;
}

#run:hover {
  background-color: blanchedalmond;
  border-radius: 4px;
  color: black;
  padding: 5px;
  border: black 2px solid;
  cursor: pointer;
}

#html {
}

#result {
}

.codeContainer {
  display: flex;
  height: 100%;
}

/* .codeContainer textarea {
} */

.htmlContainer,
.cssContainer,
.jsContainer,
.resultContainer {
  flex: 25%;
}

.codeTextArea {
  resize: none;
  outline: none;
  width: 100%;
  height: 100%;
}

.codeLabel {
  display: flex;
  align-items: center;
  padding: 5px;
  text-transform: uppercase;
}

#cssContainer,
#jsContainer {
}

iframe {
    flex: 25%;
    border: black solid 1px;
    margin-left: 6px;
    padding-bottom: 4px;
    width: 100%;
    height: 100%;
}