header {
  background-color: #404040 !important; }
  header h1 {
    font-family: 'Playfair Display SC', serif;
    color: #ffffff !important;
    letter-spacing: 0.2em; }
    header h1 .logo {
      letter-spacing: 0.5em;
      font-weight: bold;
      text-shadow: 0px 0px 10px #ffffff; }

body {
  letter-spacing: 0.1em; }

main {
  box-shadow: 10px 0px 200px #dedede; }

.error {
  color: #ff2222; }

.emotion-progress {
  text-align: center;
  color: #ffffff; }
  .emotion-progress li {
    border-radius: 2px !important; }
  .emotion-progress .icon.is-positive {
    color: #ff2222; }
  .emotion-progress .icon.is-negative {
    color: #2222ff; }
  .emotion-progress .level0.is-active {
    background-color: #2222ff; }
  .emotion-progress .level1.is-active {
    background-color: #7777ff; }
  .emotion-progress .level2.is-active {
    background-color: #9999ff; }
  .emotion-progress .level3.is-active {
    background-color: #bbbbff; }
  .emotion-progress .level4.is-active {
    background-color: #999999; }
  .emotion-progress .level5.is-active {
    background-color: #ffbbbb; }
  .emotion-progress .level6.is-active {
    background-color: #ff9999; }
  .emotion-progress .level7.is-active {
    background-color: #ff7777; }
  .emotion-progress .level8.is-active {
    background-color: #ff2222; }