* {
  box-sizing: border-box;
}

body {
  background-color: #EAEFF2;
  padding: 0;
  margin: 0;
}

#buttons {
  margin: 0.5em;
}

#output {
  width: 100%;
  height: 40px;
  background-color: white;
  padding: 1em;
  font-family: courier;
  font-size: 13px;
  box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.1);
}

#editor, #output {
  font-size: 14px;
}

.CodeMirror {
  box-shadow: inset 0px 2px 2px -2px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.2);
  border-top: 1px solid rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

#editor {
  position: relative;
  margin-bottom: 1em;
}


#editor>input {
  position: absolute;
  z-index: 10;
  top: 10px;
  right: 10px;
}

#editor>input.hidden {
  display: none;
}

#output>p {
  margin: 0;
}

.fade-in p {
    animation: fadein 0.5s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}