.animate-bg {
  -webkit-transition: background-color 100ms linear;
  transition: background-color 100ms linear; }

/* Common Mixins */
body, html {
  height: 100%;
  margin: 0px;
  font: "Raleway", "Arial", sans-serif;
  color: #455A64; }

#example-app {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%; }

a {
  color: inherit; }

h1 {
  display: inline; }

h6 {
  font-size: 110%;
  margin-bottom: 10px; }

code {
  font-size: 115%; }

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFFFFF;
  background-color: #546E7A;
  border-color: #455A64; }

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFFFFF;
  background-color: #37474F;
  border-color: #263238; }

.button-primary {
  margin: 5px 5px 0 0;
  border-radius: 2px; }

code {
  color: #546E7A; }

hr {
  margin-top: 1rem;
  margin-bottom: 1.5rem; }

/*  REDUX STATE CODEBLOCK */
pre {
  font-size: 90%;
  margin: 0;
  background-color: #CFD8DC;
  counter-reset: line-numbering;
  font-family: Consolas, Menlo, Monaco, monospace;
  padding: 5px;
  border-radius: 3px 10px 3px 10px;
  color: #455A64;
  white-space: pre-wrap;
  word-wrap: break-word; }

pre .line::before {
  content: counter(line-numbering);
  counter-increment: line-numbering;
  padding-right: 1em;
  /* space after numbers */
  width: 1.5em;
  text-align: right;
  font-weight: 600;
  font-size: 12px;
  color: #616161; }