/* ___ Header styles ___ */

header {
  background: #22201e;
  color: #fff;
  padding: 1.5em 0;
}

header .brand {
  border-bottom: 1px solid #393735;
}

header .logo {
  position: relative;
  margin-bottom: -1px;
}

header p {
  font-size: 1.2em;
  margin-left: 3em;
  margin-bottom: 0;
}


/* ___ Body styles ___ */

/* Styles for sticky footer */
.page-wrap {
  min-height: 97%;
  margin-bottom: -3em;
}
.page-wrap:after{
  content: "";
  display: block;
}

.main {
  margin-top: 2em;
}
.main textarea {
  resize: vertical;
}

.main .btn-run {
  min-width: 5em;
}

/* Input area */
.input-json {
  min-height: 21.5em;
}

/* Output area */
.panel {
  background: hsl(0, 0%, 97%);
  border: 1px solid #DDD;
  width: 100%;
  min-height: 25em;
}


/* ___ Footer styles ___ */

footer {
  text-align: center;
  height: 3em;
}

footer hr {
  max-width: 15%;
}

/* ___ Base styles ___ */
body {
  height: 100%;
}

/* ___ Header styles ___ */

header {
  background: #22201e;
  color: #fff;
  padding: 1.5em 0;
}

header .brand {
  border-bottom: 1px solid #393735;
}

header .logo {
  position: relative;
  margin-bottom: -1px;
}

header p {
  font-size: 1.2em;
  margin-left: 3em;
  margin-bottom: 0;
}


/* ___ Body styles ___ */

/* Styles for sticky footer */
.page-wrap {
  min-height: 92%;
}
.page-wrap:after{
  content: "";
  display: block;
}

.main {
  margin-top: 2em;
}
.main textarea {
  resize: vertical;
}

.main .btn-run {
  min-width: 5em;
}

/* Input area */
.input-json {
  min-height: 21.5em;
}

/* Output area */
.panel {
  background: hsl(0, 0%, 97%);
  border: 1px solid #DDD;
  width: 100%;
  min-height: 25em;
}


/* ___ Footer styles ___ */

footer {
  text-align: center;
  height: 3em;
}

footer hr {
  max-width: 15%;
}

Add a fix for sticky footer on Firefox and Safari
Add a fix for sticky footer on Firefox and Safari