@charset "utf-8";
/* CSS Document */

 .container {
      display: flex;
      flex-wrap: wrap;      /* allow children to wrap to new lines */
      gap: 12px;
      padding: 12px;
    
    }

.box1 {
      background: #f0f0f0;
      border: 1px solid #ccc;
      padding: 10px;
      flex: 1 1 320px;                /* make boxes share available space equally */
      box-sizing: border-box;
      text-align: center;
     font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
     min-width: 150px;
    background-color: #ffffff;
    }
.box {
      background: #f0f0f0;
      border: 1px solid #ccc;
      padding: 10px;
      flex: 1 1 320px;      /* grow, shrink, base width 200px */
      box-sizing: border-box;
      text-align: center;
      min-width: 150px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
       color: #000000;
    }

.box2 {
      background: #f0f0f0;
      border: 1px solid #ccc;
      padding: 10px;
      flex: 1 1 320px;      /* grow, shrink, base width 200px */
      box-sizing: border-box;
      text-align: center;
      min-width: 150px;
    background-color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
       color: #000000;
    }
.box3 {
      background: #f0f0f0;
      border: 1px solid #ccc;
      padding: 20px;
      flex: 1 1 320px;      /* grow, shrink, base width 200px */
      box-sizing: border-box;
      text-align: center;
      min-width: 150px;
    background-color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
       color: #000000;
    }

.box4 {
      background: #f0f0f0; 
      border: 1px solid #ccc;
      padding: 20px;
      flex: 1 1 320px;      /* grow, shrink, base width 200px */
      box-sizing: border-box;
      text-align: center;
      min-width: 150px;
    background-color: #ffffff;
    margin-left: 50px;
     margin-right: 50px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
       color: #000000;
    }

.box5 {
       background: #272727;
      border: 2px solid #ccc;
      padding: 10px;
      flex: 1 1 320px;      /* grow, shrink, base width 200px */
      box-sizing: border-box;
      text-align: center;
      min-width: 150px;
    background-color: #95D430;
    margin-left: 50px;
     margin-right: 50px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
       color: #000000;
    }


@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Side by side */
  }