index.css

* {
	box-sizing: border-box;
	outline: 0;
	text-decoration: none;
	word-wrap: break-word;
}
html {
	font-size: 100%;
	line-height: 1.5;
}
@media (max-width: 960px) {
	html {
		font-size: 80%;
	}
}
body {
  margin: 0;
  padding: 0;
	overflow-x: hidden;
}
a {
  color: #1e90ff;
}
header {
  width: 100%;
  padding-bottom: 2rem;
  background: #24292e;
  color: #f5f5f5;
  text-align: center;
}
section {
  width: 100%;
  margin-bottom: 0.5rem;
}
.wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
.main {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 66%;
  padding: 1rem;
  background: #f5f5f5;
}
.section-content {

}
.section-demo {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  width: 100%;
}
.code {
  flex: 0 0 60%;
  width: 60%;
	overflow-x: auto;
}
.code code {
  width: 100%;
}
.showcase {
  flex: 0 0 40%;
  width: 40%;
  padding: 0.75rem;
}
@media (max-width: 960px) {
  .main {
    width: 100%;
  }
  .section-demo {
    flex-flow: column;
    align-items: center;
  }
  .code, .showcase {
    flex: 0 0 100%;
    width: 100%;
  }
}