@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;800&display=swap');
/* weights 500 & 800 */
:root{
    --font1 : Plus Jakarta Sans;

    /* primary */
    --Red: hsl(1, 90%, 64%);
    --Blue: hsl(219, 85%, 26%);

    /*  neutral  */
    --White: hsl(0, 0%, 100%);
    --Verylightgrayishblue: hsl(210, 60%, 98%);
    --Lightgrayishblue-1: hsl(211, 68%, 94%);
    --Lightgrayishblue-2: hsl(205, 33%, 90%);
    --Grayishblue: hsl(219, 14%, 63%);
    --Darkgrayishblue: hsl(219, 12%, 42%);
    --Verydarkblue: hsl(224, 21%, 14%);
}

*{
    font-family: var(--font1);
    margin: 0px;
}
html{
    height: 100%;
}
body{
    display: flex;
    height: 100%;
    background-color: var(--Verylightgrayishblue);
}
main{
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.136);
    width: 50%;
    padding: 2em;
    margin: auto;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
}
h1{
    font-size: 1.6rem;
    color: var(--Verydarkblue);
}
#notif-number{
    position: relative;
    top: -5px;
    color: white;
    background-color: var(--Blue);
    margin-left: 15px;
    border-radius: 10px;
    font-size: 1rem;
    display:inline-block;
    text-align: center;
    width: 30px;
    padding: 5px;
}
#mark-as-read{
    font-size: 1rem;
    font-weight: 500;
    color: var(--Grayishblue);
}
#mark-as-read:hover{
    color: var(--Blue);
    cursor: pointer;
}
.notification{
    display: grid;
    grid-template-rows:1fr ;
    grid-template-columns: 70px 1fr;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
}
.unread-notif{
    background-color: var(--Verylightgrayishblue);
}
.unread-notif-dot::after{
    height: 8px;
    width: 8px;
    margin-left: 5px;
    margin-bottom: 1px;
    border-radius: 50%;
    display: inline-block;
    content: '';
    background-color: var(--Red);
}
.avatar{
    width: 45px;
    grid-row: 1 / 3;
}
h3{
    font-size: 1rem;
    font-weight: 500;
    color: var(--Darkgrayishblue);
}
.user-name{
    color: var(--Verydarkblue);
    font-weight: 800;
}
.user-name:hover, .post:hover , .group:hover, .chess-image:hover{
    cursor: pointer;
    color: var(--Blue);
}
.chess-image:hover{
    box-sizing: border-box;
    border: 1px solid var(--Lightgrayishblue-2);  
    border-radius: 7px;
}
.post{
    font-weight: 800;
}
.group{
    font-weight: 800;
    color: var(--Blue);
}
h4{
    color: var(--Grayishblue);
    font-weight: 500;
}
.chess-image{
    grid-column: 3 / 3;
}
p{
    grid-column: 2 / 3 ;
    border: 1px solid var(--Lightgrayishblue-1);
    color: var(--Darkgrayishblue);
    font-size: 1rem;
    padding: 10px;
    margin-right: 15px;
    margin-top: 10px;
    border-radius: 5px;
}
p:hover{
    background-color: var(--Lightgrayishblue-2);
    cursor: pointer;
}

@media screen and (width<700px) {
    main{
        width: 100%;
        padding: 1em;
        padding-top: 2em;
        border-radius: 0px;
    }
    
}