@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
--Very-dark-grayish-blue : hsl(217, 19%, 35%);
--Desaturated-Dark-Blue: hsl(214, 17%, 51%);
--Grayish-Blue: hsl(212, 23%, 69%);
--Light-Grayish-blue: hsl(210, 46%, 95%);
}
html,body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
body {
  background-color: var(--Grayish-Blue);
  font-family: "Manrope", serif;

}
main {
    background-color: var(--Light-Grayish-blue);
    min-height: 30rem;
    /* padding: 1rem; */
    border-radius: 10px;
 width: 90%;

  }

  section{
    padding: 1rem;
  }

   .img-1 img{
    max-width: 100%;
    /* width: 100%; */
   }

   .main-div-2-h5{
    padding: 1rem 0;
    max-width: 70%;
font-size: 1.2rem;
color: var(--Desaturated-Dark-Blue);
font-weight: 700;
   }

.main-div-2-p{
    max-width: 88%;
    font-size: 13px;
    font-weight: 500;

}

.main-div-3{
    display: flex;
    padding: 1rem 0;
    align-items: center;
    justify-content: space-between;
}

.main-div-3-div-1{
    display: flex;
    gap: 14px;
}

.Profile-pic{
    
    border-radius: 100%;
    width: 10%;
}

.Share-icon{
    border-radius: 90%;
    /* width: 10%; */

}

.main-div-3-div-2{
    border-radius: 100%;
    background-color: var(--Light-Grayish-blue);
}



@media(min-width:765px){
    main{
        display: flex;
       width: 50%;
       min-height: 3rem;
    }
    
    .img-1 img{
         height: 100%;
    }

    .main-div-2-p{
        max-width: 100%;
    }

    .main-div-2-h5{
        max-width: 100%;
       }

       section{
        padding: 2rem;
      }
}