#full-page-wrapper{display: grid;
                    grid-template-columns:60% 40%;
                           position: relative;}



                                            
.full_page_grid_items{ padding: 8px;}





#full_post_wrapper{ 
 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
 padding: 20px;

}

#posted-date-wrapper{padding:5px;

      font-size: 12px;
     display: flex;
     justify-content: space-between;
   align-items: center;}

#full-post-views{font-weight: bold;
                 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
                 padding: 3px;
                 border-radius: 2px;
                 }

#posted-date{font-weight: bold;
             opacity: 0.8;
             
             }



#full-post-title{padding: 10px;
                 }

#full-post-picture-wrapper{
                         }

#full-post-picture{object-fit: cover;
                           width: 100%;
                           max-width: 350px;
                           cursor: pointer;
                           transition: transform 1.5s, opacity 3s;
                           }



#full-post-picture:hover{ 
     transform:scale(1.05);}

#img-icons-wrapper{display:grid;
                   justify-content: space-between;
                   align-content: center;
                    
                  }

#social_icons_wrapper{}


#social_icons_wrapper  img{width: 45px;
                          padding: 10px;
                           cursor: pointer;}



/*resizing the image on larger screens*/
@media screen and (min-width:700px){

#img-icons-wrapper{ 
                 grid-template-columns:auto auto;
                justify-content: space-between;
                   align-content: center;
                  }
                        

#social_icons_wrapper{}
}


#full-content{font-size: 16px;
              padding:5px;
              line-height: 27px;
              word-spacing: 1.7px;
              margin-top:5px;
              word-wrap: break-word;
               }

#full-content img{ max-width: 100%;}

#full-content hr{opacity: 0.2;
                  margin: 20px 0;
                }

#full-content a{opacity: 0.9;
                 text-decoration: none;

                }




/* popular posts styling */

#second-grid-item{display: grid;

                grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
                         grid-gap: 3px;
                
                        

                       }



#popular-posts-title{
                     text-align: center;
                     padding: 4px;
                 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
                 color: #035;
              }


.popular-post-grid-items {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 5px;
    height: 245px;
     cursor: pointer;

}



.popular-post-grid-items img{object-fit: cover;
                              width: 100%;
                              height: 140px;
                               transition: transform 1s, opacity 1s;
                            }


.popular-post-grid-items img:hover{
    transform: scale(1.02);
}

.popular-post-title  {padding: 3px;
                      margin-bottom: 5px;
                      border-top: 1px solid rgba(0, 0, 0, 0.2);
                      font-size: 15px;
                      }

.trimmed-popular-content{font-size: 12px;}


.popular-post-views-wrapper{padding: 8px 4px; 
                           font-size: 12px; }

.popular-post-views-wrapper span{font-weight: bold;
                                    opacity: 0.8;}



/*balancing the grid on all screen sizes*/
@media screen and (max-width:800px){

#full-page-wrapper{display: grid;
                    grid-template-columns:100%;

                                                }
#second-grid-item{display: grid;
                         grid-template-columns:repeat(auto-fit, minmax(10rem,1fr));
                         grid-gap: 3px; }}


@media screen and (min-width:800px){

#popular-posts-section {position: fixed;
                    width: 40%;
                    right: 0;
                    top: 0;
                    margin-top: 42px;
                
              }
#second-grid-item {overflow-y: auto;
                max-height:700px;
                padding-bottom: 90px;}

}