body {
      font-family: Arial, Helvetica, sans-serif;
      /* background-color: dodgerblue; */
    }

    @media screen and (min-width: 1200px) {
      .container {
        width: 85%;
      }
    }
    

    ul{
      padding-left: 10px;
    }
    /* Float four columns side by side */
    .column {
      float: left;
      width: 25%;
      padding: 0 10px;
      /* height: 500px; */
    }
    
    /* Remove extra left and right margins, due to padding in columns */
    .row {
        margin: 0 -5px;
        
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* Style the counter cards */
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
      /* padding: 16px; */
      text-align: center;
      background-color: #f1f1f1;
      /* height: 90%; */
    }
    
    /* Responsive columns - one column layout (vertical) on small screens */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
      }
    
      .card {
        /* Add shadows to create the "card" effect */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        width: 85%;
    
      }
      
      /* On mouse-over, add a deeper shadow */
      .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
      }
      
      /* Add some padding inside the card container */
      .container {
        padding: 2px 16px;
      }
  }