*{padding:0;margin:0}html,body{min-height:100vh;min-width:100vw;font-size:16px;line-height:1.5;font-family:"Plus Jakarta Sans",sans-serif;display:flex;background-color:#f2f6fd}a{text-decoration:none;color:#3f5680;font-weight:800}li{list-style:none}main{max-width:40%;background-color:#fff;margin:auto;border-radius:10px}main .notification{padding:30px;display:flex;flex-direction:column}main .notification .notification__header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:20px}main .notification .notification__header .notification__count{display:flex;flex-direction:row;gap:10px;align-items:center}main .notification .notification__header .notification__count #notif-count{padding:1px 10px;color:#fff;background-color:#0a317b;border-radius:5px}main .notification .notification__header .notification__read{color:#5e6778}main .notification .notification__header .notification__read:hover{cursor:pointer;text-decoration:underline}main .notification .notification__text-block{display:flex;flex-direction:column}main .notification .notification__text-block ul .new{background-color:#f2f6fd;cursor:pointer}main .notification .notification__text-block ul .new .notification__section .notification__content .user__notification::after{content:"🔴"}main .notification .notification__text-block ul li{margin:10px 0;border-radius:10px}main .notification .notification__text-block ul li .notification__section{display:flex;flex-direction:column}main .notification .notification__text-block ul li .notification__section .message{border:1px solid #dde7ee;padding:20px;border-radius:5px;color:#5e6778;max-width:80%;align-self:flex-end}main .notification .notification__text-block ul li .notification__section .message:hover{background-color:#f2f6fd;cursor:pointer}main .notification .notification__text-block ul li .user{display:flex;gap:20px;align-items:center;flex-direction:row;padding:10px}main .notification .notification__text-block ul li .user .user__img{max-width:10%}main .notification .notification__text-block ul li .user .notification__content{display:flex;flex-direction:column}main .notification .notification__text-block ul li .user .notification__content .user__notification{color:#939dae;max-width:100%}main .notification .notification__text-block ul li .user .notification__content .user__notification .user-name{font-weight:800;color:#000}main .notification .notification__text-block ul li .user .notification__content .user__notification .post{color:#5e6778;font-weight:800}main .notification .notification__text-block ul li .user .notification__content .user__notification .user-name,main .notification .notification__text-block ul li .user .notification__content .user__notification .goup,main .notification .notification__text-block ul li .user .notification__content .user__notification .post{cursor:pointer}main .notification .notification__text-block ul li .user .notification__content .user__notification .user-name:hover,main .notification .notification__text-block ul li .user .notification__content .user__notification .goup:hover,main .notification .notification__text-block ul li .user .notification__content .user__notification .post:hover{color:#0a317b}main .notification .notification__text-block ul li .user .notification__content .notification__time{color:#939dae}main .notification .notification__text-block ul li .comm__picture{display:flex;flex-direction:row;justify-content:space-between;align-items:center}main .notification .notification__text-block ul li .comm__picture .comm-img{max-width:10%}@media(max-width: 1080px){main{max-width:60%}}@media(max-width: 770px){main{max-width:70%}}@media(max-width: 660px){main{max-width:75%}}@media(max-width: 560px){main{max-width:90%}}@media(max-width: 470px){main{max-width:100%}main .notification{padding:10px 5px}}