hr {
        border: none;
        height: 1px;
        /* Set the hr color */
        color: #CCC; /* old IE */
        background-color: #CCC; /* Modern Browsers */
    }
    .card {
      margin-bottom: 20px;
      margin-left: 10px;
      display: inline-block;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
      border-radius: 5px; /* 5px rounded corners */
    }
    
    /* Add rounded corners to the top left and the top right corner of the image */
    img {
      border-radius: 5px 5px 0 0;
    }
    
    /* 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 {
        height: 160px !important;
        padding: 2px 16px;
    }
    .grid-container {
      display: grid;
      gap: 5px;
      grid-template-columns: auto auto auto;
      padding: 10px;
    }
    
    /*.grid-item {*/
    /*  text-align: center;*/
    /*}*/
    .container {
        padding-top: 10px;
        padding-bottom: 30px;
    }
    
    .blog-title {
        text-align: center;
    }
    .blog-title h3 {
        color: #00652e;
    }
    
    #postContent {
        text-align: right;
        direction: rtl;
    }
    
    #postImage img {
        width: 600px;
        border: 1px solid #ccc;
        border-radius: 10px;
    }
    
    hr {
        border: none;
        height: 1px;
        /* Set the hr color */
        color: #CCC; /* old IE */
        background-color: #CCC; /* Modern Browsers */
    }
    
    .h-text {
        direction: rtl;
    }
    .card {
      margin-bottom: 20px;
      margin-left: 10px;
      display: inline-block;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
      border-radius: 5px; /* 5px rounded corners */
    }
    
    img {
      border-radius: 5px 5px 0 0;
    }
    
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
    }
    
    .container {
      padding: 2px 16px;
    }
    .grid {
        display: grid;
        grid-gap: 15px;
        justify-content: center;
        grid-template-columns: 600px;
        text-align: center;
    }
    .container {
        padding-top: 10px;
        padding-bottom: 30px;
    }
    .container p {
        font-size: 16px;
        color: #616161;
        font-weight: 500;
        padding-top:10px;
    }
    
    .wrapper {
        margin-left:auto;
        margin-right:auto;
        width: 870px;
        overflow: hidden; /* add this to contain floated children */
    }
    
    .content {
        width: 600px;
        float:left; /* add this */
    }
    
    .sidebar {
        margin-right:20px;
        width: 250px;
        float: left; /* add this */
    }