/* Cosmetic styles for DEMO only */
*,
*:after,
*:before {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Open Sans", "Cantarell",  sans-serif;
  background-color: #242927;
  color: #f5f6fa;
  padding: 1.5em 0;
}

body.light-theme {
  background-color: #f5f6fa;
  color: #242927
}

button::-moz-focus-inner {
  border: 0;
}

.theme-changer {
  float: right;
  cursor: pointer;
  background: transparent;
  border: none;
  color: #7887b0;
  font-weight: bold;
  outline: 0;
    &:active,
    &:focus {
      outline: 0;
    }
}

h2,
h4 {
  margin-bottom: .5em;
}

h4 {
  color: #7887b0;
  font-size: .85rem;
}

.styling {
  margin-left: 1em;
  color: #313037;
}

.dex-buttons {
  width: 70%;
  margin: 1.5em auto;
}

@media screen and (max-width: 47.938em) {
  .dex-buttons {
    width: 85%;
  }
}
/* end Cosmetic styles */