@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,500..800;1,500..800&display=swap');
* {
    padding: 0;
    margin: 0;
   box-sizing: border-box;
}
: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-blue1: hsl(211, 68%, 94%);
--Light-grayish-blue2: hsl(205, 33%, 90%);
--Grayish-blue: hsl(219, 14%, 63%);
--Dark-grayish-blue: hsl(219, 12%, 42%);
--Very-dark-blue: hsl(224, 21%, 14%);
}
h1 {
    font-size: 23px;
    height: 100%;
    color: var(--Very-dark-blue);
    font-weight: 800;
}
.three {
    margin-left: 5px;
    padding: 2px 10px;
    font-size: 16px;
    font-weight: 900;
    color: var(--White);
    background-color: var(--Blue);
    border-radius: 5px;
}
body {
    width: 100%;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    background-color: var(--Very-light-grayish-blue);
    color: var(--Dark-grayish-blue);
    font-weight: 500;
}
main {
    padding: 35px 30px;
    background-color: var(--White);
    width: 50%;
    margin: 60px auto;
    border-radius: 20px;
    box-shadow: 1px 2px 11px 10px hsla(219, 14%, 63%, 0.05);
}
.Notification-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    align-items: center;
}
.Notification-bar p {
    margin-left: auto;
}

.messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.messages img {
    width: 45px;
}
.container, .light-blue, .rizky {
    display: flex;
    padding: 15px 20px;
    gap: 20px;
}
.light-blue {
    background-color: var(--Very-light-grayish-blue);
    border-radius: 5px;
    border: 1px solid var(--Light-grayish-blue1);
}
.name-black {
    cursor: pointer;
    font-weight: 800;
    color: var(--Very-dark-blue);
}
.ash-blue {
    font-weight: 800;
    cursor: pointer;
}
.ash-blue:hover, .name-black:hover {
    color:var(--Blue)
}
.dark-blue {
    cursor: pointer;
    color: var(--Blue);
    font-weight: 800;
}
.red-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--Red);
    border-radius: 50%;
    margin-left: 5px;
}
.flexed-activity {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.activity-time {
color: var(--Grayish-blue);
}
.rizky {
flex-direction: column;
}
.rizky-container {
    display: flex;
    gap: 20px;
}
.comment {
    cursor: pointer;
    margin-left: 10%;
    width: 92%;
    padding: 15px 20px;
    border: 1px solid var(--Light-grayish-blue1);
    border-radius: 5px;
}
.comment:hover {
    background-color: var(--Light-grayish-blue2);
}
.chess-container {
    width: 45px;
    height: 45px;
    margin-left: auto;
    cursor: pointer;
    border-radius: 8px;
}
.chess-container img {
    width: 100%;
}
.chess-container:hover {
border: 2px solid var(--Light-grayish-blue2);
}
#marked {
    cursor: pointer;
}
#marked:hover {
color: var(--Blue);
}

.attribution { 
    font-size: 11px; 
    text-align: center;
    color: var(--Very-dark-blue);
    margin-top: 20px;
 }
.attribution a { 
    color: hsl(228, 45%, 44%);
 }

 /* Media Queries */
@media screen and (max-width: 1000px) {
    main {
        width: 80%;
    }
}
@media screen and (max-width: 800px) {
    main {
        width: 95%;
    }
}
@media screen and (max-width: 400px) {
    h1 {
        font-size: 16px;
        height: 100%;
    }
    .three {
        margin-left: 0;
        padding: 3px 9px;
        font-size: 12px;
    }
    body {
        font-size: 12px;
    }
    main {
        border-radius: 0;
        padding: 20px 15px;
        width: 100%;
        margin: 0;
    }
    .Notification-bar {
        margin-bottom: 20px;
    }
    .messages img {
        width: 35px;
    }
    .container, .light-blue, .rizky {
        padding: 10px 15px;
        gap: 10px;
    }
    .red-dot {
        width: 6px;
        height: 6px;
    }
    .comment {
        margin-left: 15%;
        width: 70%;
        padding: 10px 15px;
        border: 1px solid var(--Light-grayish-blue1);
        border-radius: 5px;
    }
    .attribution { 
        font-size: 9px; 
        text-align: center;
        color: var(--Very-dark-blue);
        margin-top: 20px;
     }
}