body { 
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--color-basic-100);
}

.hero {
  height: 100vh;
  padding: var(--spacing-four)
}

.developers {
  display: flex;
  width: 756px; /* TODO - should be relative. Fixed for design comp FPO */
  height: 850px;
  background: var(--color-green-300);
}

#code-demo {
  width: 80%;
  margin: auto;
}

#code-demo .text-editor {
  font-size: 14px;
  border-radius: var(--spacing-three);
  box-shadow: var(--box-shadow-xl);
}

#code-demo code[class*="language-"], 
#code-demo pre[class*="language-"] {
  min-height: 231px;
  margin: 0;
  padding: var(--spacing-four);
  padding-top: 0;
  color: var(--color-basic-100);
  background: white;
  overflow: hidden;
}

#code-demo .token.selector, 
#code-demo .token.important, 
#code-demo .token.atrule, 
#code-demo .token.keyword, 
#code-demo .token.builtin {
  color: var(--color-basic-800);
}

#code-demo .token.boolean, 
#code-demo .token.number, 
#code-demo .token.function {
  color: var(--color-teal-600);
}

#code-demo .token.string, 
#code-demo .token.char, 
#code-demo .token.attr-value, 
#code-demo .token.regex, 
#code-demo .token.variable {
  color: var(--color-basic-600);
}

#code-demo .token.property, 
#code-demo .token.class-name, 
#code-demo .token.constant, 
#code-demo .token.symbol {
  color: var(--color-figment-yellow);
}

#code-demo .token.operator,
#code-demo .token.entity,
#code-demo .token.url {
	color: var(--color-green-700);
}

#code-demo .window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-three);
  background: var(--color-basic-600);
  color: white;
  border-top-left-radius: var(--spacing-three);
  border-top-right-radius: var(--spacing-three);
}

p {
  margin: 0;
}

#code-demo .window-head .window-placeholder {
  width: 44px
}

#code-demo .window-head .window-controls {
  display: flex;
}

#code-demo .window-head .window-controls .dot {
  width: 12px;
  height: 12px;
  margin-right: var(--spacing-three);
  border-radius: var(--spacing-three);
  background: white;
}

#code-demo .window-head .window-controls .dot.red {
  background: red;
}

#code-demo .window-head .window-controls .dot.yellow {
  background: yellow;
}

#code-demo .window-head .window-controls .dot.green {
  background: green;
}

#code-demo #terminal-editor {
  background: none;
}

#code-demo pre[class*="command-line"]  {
  background: var(--color-basic-900);
  min-height: 110px;
  padding-bottom: 0;
  border-bottom-left-radius: var(--spacing-three);
  border-bottom-right-radius: var(--spacing-three);
}

#code-demo .token.command {
  background: none;
}

#code-demo .bash-header {
  border-top: solid 1px var(--color-basic-600);
  border-bottom: solid 1px var(--color-basic-600);
  background: var(--color-basic-900);
}

#code-demo .bash-header p {
  margin: 0;
  color: var(--color-basic-100);
  padding: var(--spacing-two) var(--spacing-four);
}

#code-demo .command-line-prompt:nth-child(1) {
  display: none;
}

#code-demo .command-line-prompt {
  border: none;
}

@media only screen and (max-width: 600px) {
  .developers {
    width: 100%;
    height: auto;
    background: var(--color-green-300);
  }

  #code-demo {
    width: 90%;
    padding-top: 5%;
    padding-bottom: 5%;
    margin: auto;
  }

  #code-demo .text-editor {
    font-size: 10px;
  }

  #code-demo code[class*="language-"], 
  #code-demo pre[class*="language-"] {
    overflow: auto;
  }
}