*{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
}
:root{
--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%);
--Blue: hsl(219, 85%, 26%);
--Red: hsl(1, 90%, 64%)
}

body
{
    display: flex;
    min-height: 100vh;
    justify-content: center;
    background-color: var(--Very-light-grayish-blue);
    max-width: 1440px;
    align-items: center;
    font-size: 16px;
    
}

b{
    cursor: pointer;
}

b:hover{
    color: var(--Blue);
}

header{
display: flex;
justify-content: space-between;
}

header p:first-child{font-size: 20px; font-weight: 800px;}

.container{
background-color: var(--White);
margin: 4rem /*0*/;
border-radius: 10px;
width: 700px;
padding: 20px;
}

.top{
    display: flex;
    align-items: center;
    
}

b{
    font-weight: 800;
}

strong:hover{
color: var(--Blue);
}

.gray:hover{
    color: var(--Blue);
}

.club{
    color: var(--Grayish-blue)
}

.club:hover{
color: var(--Blue);
}

.strategy{
    color: var(--Grayish-blue);
}

.chess-board{
    /*margin-left: 160px;*/
    margin-left: auto;
}
.chess-board:hover{
    transform: scale(1.5);
}
small{
    color: var(--Grayish-blue);
}

#top-number{
    background-color: var(--Blue);
    width: 25px;
    align-items: center;
    justify-content: center;
    margin: 5px;
    color: var(--White);
    padding: 2px 6.7px;
    border-radius: 3px;
    font-weight: 800;
}

#all-read{
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
    color: var(--Grayish-blue);
    cursor: pointer;
}

#all-read:hover{
    color: var(--Blue);
}

img{
    width: 10%;
    margin: 0.5rem;
}

#mark{
    background-color: var(--Light-grayish-blue-2) ;
    margin: 7px 0px;
    display: flex;
    border-radius: 5px;
}

#angela{
    background-color: var(--Light-grayish-blue-2) ;
    margin: 7px 0px; 
    display: flex;
    border-radius: 5px;
}

#jacob{
    background-color: var(--Light-grayish-blue-2) ;
    margin: 7px 0px; 
    display: flex;
    border-radius: 5px;
}

.reply{
    margin: 7px 0px; 
    display: flex;
}

#kimberly{
    margin: 7px 0px; 
    display: flex;
}

#nathan{
    margin: 7px 0px; 
    display: flex;
}

#anna{
    margin: 7px 0px; 
    display: flex;
}

.activity{
    margin-top: 20px;
}

.rizky{
  border-radius: 5px;
  /*margin: 1rem;*/
  margin-left: 5rem;
  padding: 1rem 0.5rem;
  width: auto;
  border: 1px solid var(--Grayish-blue)
    
}

fieldset:hover{
    background-color: var(--Light-grayish-blue-1);
}

.dot{
        margin-left: 3px;
        height: 8px;
        width: 8px;
        background-color: var(--Red);
        border-radius: 50%;
        display: inline-block;
     
}

    .notification:hover:not(#mark, #angela, #jacob){
        color: var(--Blue)
    }

    @media screen and (max-width:550px){
      body{
        font-size: 14px;
        max-width: auto;
        background-color: var(--White);
        min-width: 375px;
       
      }  
      .container{
        width: 100%;
        place-content: center;
        gap: 5px;
        
        padding: 1rem 0;
        margin: -0.5rem .1rem;
       
      }

      .rizky{
        border-radius: 5px;
       
        margin-left: 3rem;
        padding: 1rem 0.5rem;
        width: auto;
        border: 1px solid var(--Grayish-blue)}


header{
    align-items: center;
}
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
    }