@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;800&family=Space+Mono:wght@700&display=swap');
:root{
/*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%);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}



body{
    background-color: var(--lightGrayishBlue-1);
    display: flex;
    font-family: 'Plus Jakarta Sans', sans-serif;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    max-width: 1440px;
}

.notfication{
margin-top: 5rem;
background-color: white;
max-width: 50rem;
width: 100%;
line-height: 3.5;
padding-left: 4.5rem;
}


.notificationCard{
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width: fit-content;
line-height: 4.5;
}

img{
    width: 30%;

}

.msg{
box-shadow:  0 3px 10px rgb(0 0 0 / 0.2);
font-size: 0.825rem;
padding: 1.2rem;
max-width: 40rem;
line-height: 1.5;
position: absolute;
top: 64%;
height: fit-content;
border:1px solid var(--lightGrayishBlue-2);

border-radius: 0.4rem;
}

.msg:hover{
    background-color: var(--lightGrayishBlue-1);
}

.time{
font-weight: lighter;
    position: absolute;
 padding-top: 2rem;
}

.offset{
    margin-bottom: 7rem;
}

.img1{
position:absolute;
left: 25rem;
}

.name {
    color: var(--veryDarkBlue);
}
.subject {
    color: var(--dark-grayish-blue);
}

.name,
.subject {
    font-weight: 800;
}

.name:hover,
.subject:hover {
    color:var(--blue);
}


.read{
    position: absolute;
    right: 35rem;
    top: 5rem;
 
}

a{
    text-decoration: none;
}
p{
    position: relative;
    bottom: 0.5rem;
    word-break: break-all;
}

.alert{
    height: 20px;
    padding: 0 10px; color: white;
    background-color: var(--blue);
    border-radius: 5px;
}

.unread {
    background: var(--lightGrayishBlue-1);
    border-radius: 10px;
    padding: 15px;
    width: 90%;
    height: 60px;
   margin-top: 20px;
}

.red-circle {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    vertical-align: middle;
}


@media screen and (max-width: 600px) {
    body {
        height: 100%;
        overflow: hidden;
        height: 80vh;
       word-wrap: break-word;
    }
.read{
    position: absolute;
    top: 7rem;
    right:3rem;
}
.img1{
    position:absolute;
    left: 1rem;
    }
    .notfication{
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .notificationCard{
        word-wrap: break-word;
    }


    .msg{
        position: absolute;
        top: 33rem;
        width: 30rem;
    }


.webber{
    word-break: break-all;
    position: absolute;
    height: 100px;
    width: 75%;
    top: 14rem;
    line-height: 1.5;
}
.time{
    margin-top: 2rem;
}

.webber1{
    word-break: break-all;

    height: 100px;
    width: 75%;
    top: 1.5rem;
    line-height: 1.5;
}


    
}