* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

.app {
  width: 100%;
  height: 100%;
  position: relative; }

.codeSample {
  background-color: white;
}

.page-header, .editor-header { height: 2em }

.page-footer { height: 3em }

.editor-pane {
  width: 50%;
  position: relative;
}

.editor-header {
    width: 50%;
    position: relative;
}

.editor-wrapper {
  display: flex;
  align-items: flex-start;
}
.change-marker {
  position: absolute;
}

div.is-warning {
  background-color: #ffe08a;
}

.reset-wrapper {
  position: relative;
}
.reset-code {
  position: absolute;
  top: -2em;
  z-index: 4;
}

.danger {
  color: hsl(348, 86%, 61%);
}

.warning {
  color: hsl(44,  100%, 77%);
}

.success {
  color: hsl(153, 53%,  53%);
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  height: 2em;
  width: 100%;
  padding: 0.2em 0;
}

progress[value]::-webkit-progress-bar {
  background-color: hsl(0, 0%, 93%);
  border-radius: 9999px;
}

progress[type="danger"]::-webkit-progress-value {
  border-radius: 9999px;
  background: hsl(348, 86%, 61%);
}

progress[type="warning"]::-webkit-progress-value {
  border-radius: 9999px;
  background: hsl(44, 100%, 77%);
}

progress[type="success"]::-webkit-progress-value {
  border-radius: 9999px;
  background: hsl(153, 53%, 53%);
}

progress[type="danger"]::-moz-progress-bar {
  border-radius: 9999px;
  background: hsl(348, 86%, 61%);
}

progress[type="warning"]::-moz-progress-bar {
  border-radius: 9999px;
  background: hsl(44, 100%, 77%);
}

progress[type="success"]::-moz-progress-bar {
  border-radius: 9999px;
  background: hsl(153, 53%, 53%);
}