@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);

body {
  font-family: 'Ubuntu Mono', monospace;
  background-color: #f2f2f2;
}

pre,
code {
  font-family: 'Ubuntu Mono', monospace;
}

pre {
  padding: .75rem 1rem !important;
}

pre code {
  line-height: 1.5;
}

.examples {
  margin-left: 10vw;
  margin-right: 10vw;
}

.examples-header {
  margin-bottom: 2.5em;
}

.example {
  padding: 1em 2em;
  border-radius: .3em;
  background-color: rgba(255,255,255,.5);
  margin-bottom: 2.5em;
}

.example h3 {
  text-align: center;;
}

.example__codeLink {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.example__codeLink:hover {
  text-decoration: underline;
}

.main-title a {
  text-decoration: none;
  color: inherit;
}

.swatches {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
  .swatches li {
    cursor: pointer;
    display: inline-block;
    height: 2em;
    margin: 1px;
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    width: 2em;
    transition: box-shadow .3s;
  }

  .swatches li:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }

  .swatches li.selected {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }

.swatch-value {
  opacity: .5;
  display: block;
  text-align: center;
  padding: 1em;
}


@keyframes moveLeftRight {
  to {
    transform: translateX(50%);
  }
}
