body {
  background: #EEEEEE;
  padding: 20px;
}

pre {
  margin: 0px;
}

.page-title {
  padding: 0px;
  font: 30px Roboto;
}

.example-container {
  box-shadow: -2px 2px 4px grey;
  background: white;
  padding: 20px;
  margin: 20px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font: 12px Roboto;
}

.example-code-view {
  flex-grow: 1;
  flex-shrink: 1;
  margin: 0px 0px 5px 0px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.example-title {
  font: 24px Roboto;
  margin-bottom: 10px;
}

.example-description {
  font: 14px Roboto;
  margin-bottom: 10px;
}

.example-code {
  background: #EEEEFF;
  border-radius: 5px 0px 0px 5px;
  padding: 10px;
  overflow-x: auto;
  flex-shrink: 1;
}

.example-output-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  flex-grow: 1;

  min-width: 300px;

  background: #EEEEFF;
  border-radius: 5px;
}

.example-console {
  background: #111111;
  color: #DDFFDD;
  padding: 10px;
  flex-grow: 1;
  margin: 0px;
  overflow-x: auto;
}
.example-iframe {
  flex-grow: 1;
  margin: 0px;
  background: white;
  min-height: 50%;
}

.example-download-link {
  flex-grow: 0;
  color: grey;
  font: 12px Roboto;
}

@media only screen and (max-width: 500px) {
  .example-container {
    padding: 10px 5px;
    margin: 20px 0px;
  }

  body {
    padding: 2px;
    margin: 2px;
  }


}



