/* General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    scroll-behavior: smooth;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url(./assets/fonts/PlusJakartaSans-VariableFont_wght.ttf);
}
/* Colors Variables */
: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%);
}
html {
    font-size: 1rem;
    overflow-x: hidden;
}
/* Body */
body {
    font-family: 'Plus Jakarta Sans';
}

.main {
    padding: 1.5rem 1rem;
}

/* Notifications */
.notifications {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 1.5rem;
    & .tittle {
       color: var(--Very-dark-blue);
       font-weight: 800; 
       font-size: 1.25rem;
       word-spacing: 0.563rem;
    }
    & .number {
        display: inline-block;
        width: 2.125rem;
        height: 1.563rem;
        background-color: var(--Blue);
        color: var(--White);
        text-align: center;
        font-weight: 700;
        border-radius: 0.375rem;
    }
    & .mark {
        align-content: end;
        color: var(--Dark-grayish-blue);
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        &:hover {
            color: var(--Blue);
        }
    }
}
/* Post */
.post {
    display: flex;
    position: relative;
    padding: 1rem;
    margin: 0 auto 0.625rem;
    background-color: var(--Very-light-grayish-blue);
    color: var(--Dark-grayish-blue);
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.813rem;
    border-radius: 0.5rem;
    cursor: pointer;
    & .image {
        width: 2.8rem;
        height: 2.8rem;
    }
    & .name {
        margin-right: 0.5rem;
        color: var(--Very-dark-blue);
        font-weight: 800;
        &:hover {
            color: var(--Blue);
        }
    }
    & .reaction {
        margin-left: 0.5rem;
        font-weight: 800;
        &:hover {
            color: var(--Blue);
        }
    }
    & .time {
        color: var(--Grayish-blue);
    }
    & .message_Container {
        margin-top: 0.75rem;
        padding: 1rem;
        border: 0.063rem solid var(--Light-grayish-blue-2);
        border-radius: 0.313rem;
        &:hover {
            background-color: var(--Light-grayish-blue-1);
        }
    }
    & .picture {
        width: 2.6rem;
        height: 2.6rem;
        right: 1rem;
    }
    & .group_Active {
        color: var(--Blue);
    }
}
.not_Read {
    display: inline-block;
    background-color: var(--Red);
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.5rem;
    border-radius: 50%;
}
/*Challenge Info*/
.attribution {
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    text-align: center;
    font-weight: 600;
    & .attribution_Challenge, 
    .attribution_Author {
        color: var(--Red);
        font-weight: 700;
        &:hover {
            color: var(--Dark-grayish-blue);
        }
    }
}

@media (min-width: 768px) {
   .main {
    width: 39rem;
    margin: auto;
   }
   .post {
    .picture {
        position: absolute;
    }
   }
   
}