body {
  background-color: #00BCD4;
  margin: 0 auto;
  max-width: 750px;
}
html, body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Georgia, Helvetica;
  font-size: 17px;
}
.main {
  background-color: rgba(255, 255, 255, 0.2);
  margin: 50px 0;
  padding-top: 20px;
  text-align: center;
  color: #fff;
  font-family: 'Poiret One', cursive;
}
.mail a {
  text-decoration: none;
  color: #fff;
}
.tagline {
  background-color: rgba(255, 255, 255, 0.2);
  position: relative;
  margin: 0;
  padding: 8px 0 8px 0;
}
.tagline-text {
  vertical-align: middle;
}
.fork {
  position: fixed;
  top: 0;
  right: 0;
}
pre {
  white-space: normal;
  margin-bottom: 0;
}
pre code {
  white-space: pre;
}

.example {
  background-color: rgba(255, 255, 255, 0.2);
  margin: 50px 0;
  padding: 20px;
  color: #fff;
}
/* Example 0 */
#example-0 span {
  padding-left: 5px;
}
#example-0 div {
  padding-top: 10px;
}

/* Example 1 */
#example-1 {
  height: 400px;
}

/* Example 2 */
#example-2 {
  height: 400px;
}

/* Example 3 */
#example-3-container {
  position: relative;
}
#example-3-container.open #example-3 {
  visibility: visible;
}

#example-3 {
  visibility: hidden;
  border: 2px solid #00626e;
  bottom: 100%;
  position: absolute;
  height: 250px;
  width: 314px;
}

/* Example 4 */
#example-4 {
  display: none;
}

/* Example 5 */
#example-5 {
  height: 400px;
}