:root{
    --Red: hsl(1, 90%, 64%);
--Blue: hsl(219, 85%, 26%);
--White: hsl(0, 0%, 100%);
--Very-light-grayish-blue: hsl(210, 60%, 98%);
--Light-grayish-blue-1: hsl(211, 68%, 94%);
--Light-grayish-blue-2: hsl(205, 33%, 90%);
--Grayish-blue: hsl(219, 14%, 63%);
---Dark-grayish-blue: hsl(219, 12%, 42%);
--Very-dark-blue: hsl(224, 21%, 14%);
}
/* start global  rule */
@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&family=Inconsolata:wght@200..900&family=Manrope:wght@200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
   }
  body {
   margin: 0;
   padding: 0;
    background:var(--Very-Pale-Blue-Main-Background);
  }
h1,h2,p{
    font-family: "Poppins", sans-serif;
}
h1{
font-weight: 800;
}

p{
font-weight: 500;
font-size: 15px;
}
/* end global rules  */

/* start main notification  */
main{

}
main .warpper-notification{
margin: auto;
  width: 700px;
  align-items: center;
  padding-bottom: 20px;
}
main .warpper-notification .option-notification{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.heading-title{
  display: flex;
  align-items: center;
}
.option-notification p{
  cursor: pointer;
}
.option-notification p:hover{
  color: var(--Blue);
}
.heading-title .number{
  margin-left: 10px;
  background-color: var(--Blue);
  color: var(--White);
  padding: 5px;
  border-radius: 2px;
}
.notificaation{
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.notificaation img{
  width:50px;
  margin-right: 10px;
}
.notificaation .discription-notification{
width: 650px;
max-width: 100%;
}
.special{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.private-message{
  border: 1px solid var(--Grayish-blue);
    width: 610px;
    max-width: 100%;
    padding: 5px;
    margin-left: 69px;
    border-radius: 5px;
    margin-top: 6px;
    cursor: pointer;
}
.private-message:hover{
  background-color: var(--Light-grayish-blue-2);
}
.non-lu{
  background-color: var(--Light-grayish-blue-1);
  padding: 8px;
  border-radius: 5px;
}
.notificaation .discription-notification p{
  color: var(--Grayish-blue);
  margin-bottom: 5px;
  max-width: 500px;
}
.notificaation .discription-notification p b:first-child,
.notificaation .discription-notification p > b{
  color: black !important;
  cursor: pointer !important;
}
.notificaation .discription-notification p b:last-child{
  color: var(---Dark-grayish-blue);
  cursor: pointer;
}
.notificaation .discription-notification p b:last-child:hover{
  color: var(--Blue);
}
.notificaation .discription-notification p b.bold{
  color: var(--Blue);
  cursor: pointer;
}
.notificaation .discription-notification .time{
  color: var(---Dark-grayish-blue);
  
}
.notificaation .discription-notification p .point{
  background-color: var(--Red);
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
}
/* end main notificatoion  */

@media (max-width:750px) {
  main .warpper-notification{
    width: 450px;
  }.private-message{
    width:350px;
    line-height: 1.2;
  }
  
}