*{padding:0;
  margin:0;
  box-sizing: border-box;
  font-family:sans-serif;}

body{position: relative;}

nav{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9));
padding:10px 0;
background-size: cover;
z-index: 999;
width: 100%;
position: fixed;
top: -11px;
transition: top 1.5s;}


nav h1{
  color: white;
 padding: 2px;
 font-family: serif;
 font-size:28px;}

nav h1 #tech-word{color: crimson;
                    font-family: serif;
                  }

nav #website-name-wrapper{
         color:white;
         font-style: oblique;
         font-weight: bold;
         margin-bottom:1px;
         text-align:left;
         padding-left: 4px;
        font-family:serif;
       border-bottom: 1px solid rgba(255,255,255,0.2);}

nav #website-name-wrapper img{object-fit: cover;
        width: 32px;
        margin-right: 7px;
        margin-top: 4px;
      float: right;}


nav ul{margin-top: 10px;}


nav ul li{list-style-type: none;
           display:inline;
           padding:5px 25px;
           cursor: pointer;
           color: white;
           text-transform: capitalize;
           font-size: 14px;}

nav a{color: unset;
      text-decoration: none;}



nav ul li i{ font-size:13px; 
             margin-right: 4px;}

nav ul li:hover{color: lightblue;}

nav ul #more-link{display: none;}

nav ul #more-link,#search-link{float: right;}


nav #sidebar{
   margin-top: 35px;
  display: none;}

nav #sidebar ul li{display:block;
                   border-top: 1px solid rgba(255, 255, 255, 0.1);
                    margin:20px auto;}


nav ul .active_link{color:aqua;
                     border-bottom: 1px solid grey;
                  border-radius: 5px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);}


/*hiding the some links on small screen devices*/

@media screen and (max-width:680px){

  .hide-small{display: none;}

  nav ul li i{display:none;}

  nav ul #more-link{display: inline;}


}




/*reducing the fonts of the navbars*/

@media screen and (max-width:500px){
nav ul li{
           padding:5px 15px;}

nav ul li .hide-small{display: none;}
}




.dropdown-wrapper {position: relative;
                    display: inline-block;}

.dropdown-wrapper .dropdown-content {
  position: absolute;
  display: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9));
  color: white;
  padding: 5px;
  z-index: 999;
  overflow-y: auto;
width: 200px;}

.dropdown-wrapper .dropdown-content  li{
  display: block;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  text-transform: capitalize;
  line-height: 20px;
    }


.dropdown-wrapper .dropdown-content  li:hover{
  color: aqua;
}

#posts-link:hover #posts-dropdown-content{ display:block; }



#search-wrapper{margin-top: 15px;
                display:none;
               text-align: center;
               padding-left: 5px;
               padding-right: 5px;}

#search-input{
    width: 80%;
    margin-bottom: 0;
    display: inline; 
    padding: 2px;
    padding-left: 10px;
    background:rgba(0, 0, 0, 0.1);
    color: white;
    border: 1.5px solid rgba(254, 250, 250, 0.3);
    font-size: 13px;
    outline: none;
    border-radius: 20px 0 0 20px;
}

#search-input::placeholder{font-size: 12px;}

#search-btn{ width: 20%; 
          display: inline;
           padding: 2px;
         border: 1.5px solid rgba(254, 250, 250, 0.3);
       background:rgba(0, 0, 0, 0.2);
    color: white; 
   border-radius:0px 20px 20px 0px;
    font-size: 13px;
   cursor: pointer;
  outline: none;}


#load_more_posts,#loader_img{width:60%;}

main { position:relative; 
      margin-top: 80px; 
     display: grid;
     grid-template-columns:60% 40%; 
   grid-gap: 3px;}

@media screen and (max-width:700px){
    main {
     display: grid;
     grid-template-columns:auto;}

     #load_more_posts,#loader_img{width:100%;}
}


#main-section{display: grid;
           grid-template-columns:repeat(auto-fit,minmax(13rem, 1fr));
            gap: 3px;
            align-self: start;
                          }


main .image-grid-items{
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
     padding: 4px;
     cursor:pointer;
     height:280px;}


main .image-grid-items img{object-fit: cover;
                           width: 100%;
                           cursor: pointer;
                           transition: transform 1.5s, opacity 3s;
                           height: 150px;}

main .image-grid-items img:hover{ 
     transform:scale(1.03);
                            }
main .image-grid-items .post-info-wrapper{ 
    padding:5px;
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   }


.post-info-wrapper .post-title{ 
               padding-right:2px;   
               font-weight: bold;
               font-size: 17px;
               color: #035;
               margin-bottom: 5px;
              line-height: 21px;}




.post-info-wrapper .trimmed_content{margin-top:6px;
                      font-size: 12px;
                      word-wrap: break-word;}



.post-info-wrapper .post-views-wrapper{
        
               font-size: 13px;
               margin-top: 7px;
             }

.post-info-wrapper .post-views-wrapper span{
                color:#034;
                font-weight: bold;
               font-size: 12px;

             }



@media screen and (max-width:600px){

    #main-section{
                         grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); 
                           }

    .post-info-wrapper .post-title{ 
               font-size: 14px;}

}


@media screen and (min-width:700px){
#products-section {position: fixed;
                    width: 40%;
                    right: 0;
                     top: 0;
                    margin-top: 47px;


}

#second-grid-item{overflow-y: auto;
                max-height:700px;
                padding-bottom: 90px;
}

}

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


#advert-section{position: fixed;
                 bottom:0;
                right: 0;
            width: 220px;}




/* modal  styles */
.modal{display: none; 
                        z-index: 999;
                       position: fixed;
                        top: 0;
                        left: 0;
                        background: rgb(0, 0, 0);
                        background: rgba(0, 0, 0, 0.5);
                        width: 100%;
                        height: 100%;
                        overflow-y: auto;
                        
                        }


.modal-content{background: rgb(250, 250, 255);
                        padding: 10px;
                      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.8);
                     margin: 5% auto;
                   width: 85%;}

/*modifyng the modal size on big devices*/

@media screen and (min-width: 700px){
.modal-content{
                     margin: 5% auto;
                   width: 50%;}
               }

.modal-content .message-title{ font-weight: bold; font-size: 14px;}

.modal-content .message-content{ margin-top: 10px; }

.modal-btn-wrapper{ margin-top: 30px; padding-bottom:15px ;}

.modal-btn-wrapper button{ padding: 5px 15px;
                                    border: none;
                                     outline: none;
                                     border-radius: 3px;
                                     cursor: pointer;
                                      }


.modal-btn-wrapper .ok-btn{margin-right: 25px; }

.modal-btn-wrapper .cancel-btn{border: 1px solid rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.8);}


.alert-info{font-size:15px;
            font-weight: bold;
            margin-bottom: 5px;}

.alert_ok_btn{
   margin-right: 25px;
    background: #068;
     color: white;
      font-size: 14px;
   padding: 7px 20px;
   border: none;
   outline: none;
   border-radius: 3px;
  cursor: pointer;}



/*loading img & texts styles*/
#loader_img{text-align: center;
            font-size: 16px;
          padding: 100px 2px;
          word-spacing: 1.7px;}

#loader_img img{width: 42px;}

#loader_img #loading-text{margin-top: 10px;
                         color:#027;}


#load_more_posts{text-align: center;
                     padding:20px 2px 15px 2px;
                     color: #027;
                     word-spacing: 1.6px;
                     font-size: 16px;
                     cursor:pointer;
                     margin: 2px;
                  background:rgba(0, 0, 0, 0.05);
                  display: none;}
   
.no-posts-alert{text-align: center;
                  padding: 30px 2px;
                  font-size: 16px;
                  background:rgba(0, 0, 0, 0.01);
                  word-spacing: 1.7px;
                color: crimson;}



.no-posts-alert .btn-wrapper{margin-top:20px;
                              text-align: center;}

.no-posts-alert .btn-wrapper button{
                           padding: 5px 20px;
                          background: #068;
                          color: white;
                        border-radius: 20px;
                     font-weight: normal;
                   border: 1px solid white;
                 word-spacing: 1.6px;
                 cursor: pointer;
                 font-size: 14px;}



#full-pic-wrapper {border: 1px solid rgba(0, 0, 0, 0.1);}


#post-full-view-wrapper{border-bottom:1px solid rgba(0, 0, 0, 1);}


@media screen and (max-width:600px){

    #post-full-view-wrapper{margin:0;
                            width: 100%;
                           }
}


#post-full-view #views-wrapper{padding: 5px;
                             font-size: 13px;
                            border-bottom:1px solid rgba(0, 0, 0, 0.1);
                             margin-bottom: 10px;}


#post-full-view #views-count{font-size: 13px;
                             padding-right:5px;
                             color: #027;
                             font-weight: bold;
                             }

#post-full-view #title_header{font-size: 24px;
                            opacity: 0.8;
                           word-wrap: break-word;
                          word-spacing: 1.6px;
                         line-height: 25px;
                        }


#post-full-view  #full_post_content{padding: 10px 4px;
                         font-size: 15px;
                         word-spacing: 1.7px;
                         line-height: 25px;
                         word-wrap: break-word;}


#full-pic-wrapper{text-align: center;
                  position: relative;}

#full-pic-wrapper img {width: 400px;
                        object-fit: cover;

                        }  

#full-pic-wrapper  video {width: 50%;
                         display: none;}  


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


#full-pic-wrapper img {width:100%;} 

#full-pic-wrapper video {width:100%;}      
}



#full_post_content{padding: 10px;
                         font-size: 15px;
                         word-spacing: 1.7px;
                         line-height: 25px;
                        word-wrap: break-word;}






/* footer styles*/

footer{
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgb(22, 40, 50), rgba(0, 0, 0, 0.9));
       color: rgba(255, 255, 255, 0.8);
       position: absolute;
       bottom:-150px;
       width: 100%;
       text-align:center; 
       padding:10px;
       margin-top:100px;
       font-size:13px;
      z-index: 9999;}


footer span {word-spacing: 2px; font-size: 12.3px;}

footer a {color:skyblue;
         text-decoration: none;}

footer button{ padding: 4px 25px; 
              background-color: #045;
             color: white;
            outline: none;
           border: 1px solid rgba(255, 255, 255, 0.5);
        margin:10px auto;
    border-radius: 20px;
  word-spacing: 1.8px;
 cursor: pointer;}


@media screen and (max-width:500px){
    nav ul li{padding:5px 12px;}
}



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

    footer{width:60%; }
}