/*
      *
      *
      html and body
      *
      *
      */

      html, body {
        /*border: .5em solid black;*/
        /*overflow-x: hidden;*/

      }

     /*
      *
      *
      Color Definitions
      *
      *
      */


      .black {
        background-color: rgb(0,0,0);
      }

      .blue {
        background-color: rgb(0,84,151);
      }

      .light_blue {
        background-color: #099DD9;
      }

      .green {
        background-color: rgb(0,123,42);
      }

      .lime {
        background-color: rgb(179, 210, 52);
      }

      .seafoam {
        background-color: rgb(77, 190, 161);
      }

      .red {
        background-color: rgb(182,0,34);
      }

      .orange {
        background-color: rgb(251,74,28);
      }

      .yellow {
        background-color: rgb(251,199,58)
      }

      .purple {
        background-color: rgb(67,41,104);
      }

      /*
      *
      *
      Containers
      *
      *
      */

      .content_wrapper {
        display: flex;
        border: 1em solid black;
        z-index: 1;
      }

      .container_left {
        width: 40%;
        display: flex;
        flex-wrap: wrap;
        z-index: 2;
      }

      .container-middle {
      	width: 1em;
      	z-index: 3;
      }

      .container_right {
        width: 60%;
        float: right;
        /*position: relative;*/
        display: flex;
        overflow-x: scroll;
       /* padding-left: 1em;*/
        z-index: 2;
              }

      /*
      *
      *
      Box Definitions
      *
      *
      */

      .box_1 {
        width: 100%;
        height: 1em;
        }

      .box_2 {
        min-width: 1em;
        max-width: 1em;
        height: 8280em;
      }

      /*
      *
      *
      Media Queries
      *
      *
      */

     /* @media screen and (max-width: 800px) {

        .box_1 {
          min-width: 1.25em;
          height: 180.74em;
        }*/