@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
:root{
    --primary-color:#fff;
    --secondary-color:rgb(20, 203, 108);
    --tertiary-color:#175a3a;
}
*{
   text-decoration: none;
   list-style-type:none ;
   font-family: 'Poppins', sans-serif;
}

.all-boxes{
display: flex;

}
.sidebar{
    padding: 1rem;
}
.c-boxes{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 3rem;
}
.box{
    padding: 1rem;
    background-image: linear-gradient(to left, #c1dfd0 , rgb(50, 236, 140));
    margin: 1rem;
    border-radius: 4px;
    height: 300px;
}
.box h4{
    color: var(--primary-color);
}

.box i{
    color: var(-primary-color);
    
}
.posts{
    width: 80%;
    margin: auto;
}
.post {
    display: flex;
    width: 80%;
    justify-content: space-between;
}
.post img{
    width: 400px;
    border-radius: 4px;
    box-shadow: 4px 4px 4px 4px #ccdcd4;
}
.b{
    margin: 1rem;
}
.b i{
    color: var(--secondary-color);
    font-size: 2rem;
}
.h{
    text-align: left;
    padding: 3rem;
    text-decoration: overline;
    color: var(--secondary-color);
}
@media only screen and (max-width: 600px){
    .post {
        display: block;
        width: 100%;
        justify-content: space-between;
    }
    .post img{
        width: 100%;
        border-radius: 4px;
        box-shadow: 4px 4px 4px 4px #ccdcd4;
    }
    .b{
        margin: 1rem;
    }
    .b i{
        color: var(--secondary-color);
        font-size: 2rem;
    }
    
}