/* style elemen bady */
body {
     margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Trebuchet MS';
       
     }
     /* style elemen header */
      header{
           margin: 8px;
           background-color: #749BC2;
           padding: 20px;
           box-sizing: border-box;
           font-family: 'Trebuchet MS';
      }

 /* style clss card*/
 .card{
      margin: 8px;
      width: 520px;
      min-height: 400px;
      background-color: #fff;
      box-shadow: 15px 15px 60px rgba(0 ,0 ,0 ,0 ,5 );
      padding: 12px;
 }

 /* style class top*/
 .card .top {
display: flex;
justify-content: space-between;
align-items: center;

 }
 /* style slass userDetails*/
 .card .top .userDetails {
      display: flex;
      align-items: center;
      
 }
  
 /* styl class top*/
 .card .top .userDetails .profile_img {
      position: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 8px;

 }
 /* style ckass cover */
 .cover {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;

 }
 /* style elemen h3 in class userDetails */
 .card .top .userDetails h3 {
      font-size: 18px;
      color: #000;
      font-weight: 500;
      line-height: 0.90em;

 }
 /* style elemen span dalam elemen h3 */
 .card .top .userDetails .h3 .span {
      font-size: 0.75em;

 }
 /* style class dot */
 .dot{
      transform: scale(0.6);
      cursor: pointer;

 }
   /* style class imgbx*/
   .imgbx {
        position: relative;
        width: 100%;
        height: 320px;
        margin: 10x 0 15px;
        cursor: pointer;

     }
     /* style class acetionBtn*/
     .actionBtn {
          display: flex;
          justify-content: space-between;
          align-items: center;

     }
     /* style elemen img dalam class acetionBtn*/
     .actionBtn img {
          max-width: 24px;
          cursor: pointer;

     }
     /* style elemen img dalam class left acetionBtn*/
     .actionBtn .left .img {
          margin-right: 8px;

     }
     /* style class likes */
     .likes {
          font-weight: 500;
          margin: 5px;
          font-size: 16px;
          color: #000;

     }
     /* style slass massage*/
     .messeges {
          font-weight: 400;
          margin: 5px;
          color: #000;
          line-height: 1.5em;

     }
     /* style elemen b dalam class masagge*/
     .massages b {
          color: #000;

     }
     /* style elemen apan dalam class masagge*/
     .massages span {
          color: rgb( 18, 18, 237);
          cursor: pointer;

     }
     /* style class addCommensr*/
     .comments {
          margin-top: 10px;
          font-weight: 400;
          color: #999;
          
     }
     /* style class addCommenst*/
     .addcomments {
          display: flex;
          align-items: conter;
          margin-top: 10px;

     }
     /* style class userImg  dalam class addCommenst*/
     .addcomments .userImg {
          position: relative;
          width: 36px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 8px;

     }
     /* style class text*/
     .text {
          width: 100%;
          border: none;
          outline: none;
          font-weight: 400;
          font-size: 16px;
          color: #262626;

     }
     /* style class postTime*/
     .postTime {
          margin-top: 10px;
          font-weight: 500;
          color: #777;
     }

      /*------------css responsive mobile App---------------*/
       @media only screen and(max-width: 720px) {
         .header, .container, .card {
           width: auto;
         }
     }
     @media only screen and(max-width: 520px) {
          .header, .container, .card {
            width: auto;
          }
      }    
      @media only screen and(max-width: 360px) {
          .header, .container, .card {
            width: auto;
          }
      }