body{
    margin: 0;
    padding: 0;
    background-color: #d6bb93;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;

}

.container{
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: auto 1fr;
    height: 100%;
    row-gap: 20px;
}

#sidebar{
    background-color: #6d0000;
    grid-row: 1 / 3;
    grid-column: 1;
}

.nav, .navSecond{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
    text-align: justify;
    margin-left: 0.6rem;
    margin-bottom: 1.5rem;
}

.nav a:hover, .navSecond a:hover{
    color: #e4cca9;
}

div a{
    text-decoration-line: none;
    color: rgb(247, 244, 244);
    padding: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.nav a img, .navSecond a img, .like img, #searchBar img{
    margin-right: 1.5rem;   
    vertical-align: middle;
    width: 1.2rem;
}



#userId img, .bottom img,  #trending img{
    width: 3rem;
}

#userId{
    display: flex;
    gap: 1rem;
}

#userId h2{
    margin-top: 1rem;
}

#greeting{
    display: flex;
    gap: 1rem;
}

.dashboard{
    display: flex;
    gap: 1rem;
    margin: 1rem;
}

.dashboard img{
    width: 1.5rem;
}

#header{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
     background-color:#74732a;
}

.top, .bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
}

#search{
    width: 35rem;
    height: 35px;
    border-radius: 20px;
    text-align: center;
    margin: 0;
    border: none;
   
}

.bottom{
    display: flex;
    margin: 20px;
}

button{
    width: 100px;
    height: 40px;
    background-color: #6d0000;
    border: none;
    color: white;
    font-weight: 900;
    font-size: 0.9rem;
    border-radius: 18px;
}

button:hover{
    background-color: #8f2222;
}

#header h1, #header h4, h2{
    margin: 0;
    color: white;
}

#project-heading{
    margin: 0.5rem;
}

span{
    font-size: 25px;
}

.content{
    display:grid;
    grid-template-columns: 2.5fr 1fr;
    grid-column: 2;
}

#projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(0, auto); /* auto height rows */
    margin: 0 20px 20px 20px;
    gap: 20px;
    text-align: justify;
}

.chart-container {
  position: relative;
  width: 100%;           
  max-width: 600px;      
 height: 250px;        
}

canvas {
  width: 100% !important;
  height: 100% !important;
}

#projects>div{
    background-color: #eaebed ;
    border-radius: 10px;
    border-left: 0.6rem solid #6d0000;
    text-align: justify;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.like{
    display: flex;
    justify-content: flex-end; 
    align-content: flex-end;
    margin-top: auto;
    
}

.like img{
    cursor: pointer;
    padding: 0.4rem;           /* space around icon */
    border-radius: 40%; 
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.like img:hover {
    background-color: #9e1a1a;     
    box-shadow: 0 0 8px rgba(0,0,0,0.3);  /* shadow glow */
}


#projects>div:hover, #trending:hover, #announcments:hover{
    box-shadow: 2px 2px 12px #6d0000;
}


#announcments, #trending{
    background-color: #eaebed ;
    border-radius: 10px;
    height: auto;
    padding: 1rem;
}


#trending h4,p{
    margin: 0.3rem;
}

#trending div{
    margin-bottom: 0.5rem;
}


#right-sidebar{
    display: grid;
    row-gap:20px;
    margin-bottom:  20px;
    margin-right:  20px;
}

#right-sidebar p{
    font-size: 0.9rem;
}

.icon{
    display: flex;
}

@media (max-width: 962px) {
    .container{
        width: 100%;
        max-width: 100%;
    }

    #header{
        width: 100%;
    }

    #projects {
        grid-template-columns: 1fr; 
        margin: 0 10px 10px 10px;
        grid-column: 1/3;
        width: auto;
    }

    #right-sidebar{
        grid-row: 2;
        grid-column: 1/3;
        
    }
}

@media (max-width: 768px){
     .container{
        width: 100%;
    }

    #projects {
        grid-template-columns: 1fr; /* Single column on tablets/small screens */
        margin: 0 10px 10px 10px;
        grid-column: 1/3;
        width: auto;
    }

    #right-sidebar{
        grid-row: 2;
        grid-column: 1/3;
        margin-left:  20px;
    }
     #sidebar{
        display: none;
    }
}