html {
  box-sizing: border-box;
}

svg {
  overflow: visible;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#wrapper {
  height: 100%;
}

body {
  background: #3698db;
  font-family: "Kanit";
  color: white;
  opacity: 0;
}

.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  width: 100%;
  font-size: 80px;
}

.content {
  display: flex;
}

.blue {
  background-color: #3698db;
}

.green {
  background-color: #80cbc4;
}

.purple {
  background-color: #8f44ad;
}

.red {
  background-color: #e84c3d;
}

.dark {
  background-color: #2d3e50;
  fill: #2d3e50;
}

.offwhite {
  background-color: #ecf0f1;
}

#butterfly {
  opacity: 0;
}

.headers {
  font-size: 36px;
  line-height: 120px;

  font-weight: normal;
  margin: 0;
  background: black;
  padding-left: 50px;
  position: fixed;
  display: block;
  width: 100%;
  overflow: hidden;
}

.static {
  color: #6699fc;
  display: inline-block;
}

.messages {
  color: #ccc;
  display: inline-block;
  position: absolute;
  width: 100%;
}
.message {
  position: absolute;
  top: 0;
  left: 0;
}

.scramble .content {
  font-family: Courier;
  color: #dae5cc;
  font-size: 42px;
}

.scramble .content span {
  font-weight: 400;
  color: #90e62a;
}

#motionpath {
  height: 100%;
  overflow: hidden;
}

.code {
  position: fixed;
  bottom: 180px;
  width: 100vw;
  visibility: hidden;
}

/* pretty print stuff */

pre {
  opacity: 0;
  font-size: 22px;
  //font-weight: bold;

  position: absolute;
}

pre.prettyprint {
  left: 1%;
}

pre .lit {
  color: #f60;
}

pre .pln {
  color: #ccc;
}