/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 @import url('https://fonts.googleapis.com/css?family=Big Shoulders Display&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Bebas Neue&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');


 .flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  }
   
  .graphcolumn1 {
    padding: 10px;
    flex: 10%;
  }

  .graphcolumn2 {
    padding: 10px;
    flex: 40%;
  }

  .graphcolumn3 {
    padding: 10px;
    flex: 20%;
  }

    /* Responsive layout - makes a one column-layout instead of a three-column layout */
  @media (max-width: 900px) {
    .graphcolumn1, .graphcolumn2, .graphcolumn3{
      flex: 100%;
    }
  }

  .chartheader {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 50px;
  }

  .charttotal {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 24px;
  }

  .chartscore {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 40px;
    margin-bottom: 20px;
    color: #48B8D2;
  }

  .chartsuffix {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 20px;
    color: #000000;
  }