.diagram {
  border: 1px solid black;
  padding: 1em;
  letter-spacing: normal;
  box-sizing: border-box;
}
  .diagram * {
    box-sizing: border-box;
  }

  .diagram_title {
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 1em;
  }

  .diagram_bars {
    height: 20em;
  }


    .diagram_bar {
      float: left;
      border: 1px solid black;
      background-color: #CECECE;
      position: relative;
      top: 100%;
      transform: translateY(-100%);
      box-shadow: 8px 6px 20px -3px rgba(0, 0, 0, 0.35);
    }

      .diagram_bar_value {
        text-align: center;
        font-weight: bold;
        font-size: 1em;
        position: absolute;
        top: 0;
        left: 50%;
        margin-top: 0.25em;
        transform: translateX(-50%);
      }


    .diagram_desc {
      float: left;
      font-size: 0.85em;
      text-align: center;
      margin: 0 0.5em 0 0.5em;
      padding-top: 0.75em;
      text-align: center;
      font-weight: bold;
      text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.35);
    }

    .diagram_bar.diagram_bar_hover {
      box-shadow: 8px 6px 20px -3px rgba(0, 0, 0, 1);
      transition: all 0.25s ease-out;
      transform: translateY(-106.25%) scale(1.125);
    }
    .diagram_desc.diagram_bar_hover {
      text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
      transition: all 0.25s ease-out;
      transform: translateY(12.5%) scale(1.25);
    }


   .diagram_desc_vertical {
     text-align: left;
     writing-mode: vertical-rl;
     text-orientation: mixed;
   }

   .diagram_desc_vertical div {
     position: relative;
     left: -50%;
     transform: translateX(50%);
   }