.body {
  flex: 1;
  display: flex;
  flex-flow: column;
  overflow: hidden;

  .output {
    flex: 1;
    position: relative;

    .content {
      &,
      & .graph,
      & .code {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }

      .graph,
      .code {
        opacity: 0;
        transition: opacity 0.2s;

        &.active {
          opacity: 1;
          transition: opacity 0.2s;
        }
      }

      .graph > div {
        width: 100%;
        height: 100%;
      }

      .code {
        padding: 0 8px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        color: #f8f8f2;
        background: rgba(0, 0, 0, 0.8);
      }
    }
  }
}

@media (min-width: 640px) {
  .body {
    flex-flow: row;
  }
}
