@font-face {
    font-family: "montserrat";
    src: url('../fonts/montserrat/Montserrat-Regular.otf');
}

p, h1, h2, h3, h4, h5, h6, button, a, span, div{
    font-family: montserrat !important;
    
}


body {
    background-color: rgb(255, 255, 255);
}
#hovering:hover {
    background-color: rgb(241, 241, 241);
}
.writer{
   justify-items: left;
}

a{
    text-decoration: none !important;
    color: rgb(50, 50, 50);

}

a:hover{
    color: #2855df;
}

#thumbnail{
    height: 30%;
    width: auto;
    overflow: hidden;
}
.comments{
    border-radius: 20px;
    border: 1px rgb(209, 209, 209) solid;
}


.postIntro{
    font-style: oblique;
   
    border-left: 3px #4c76f3 solid;
    
}

.avatar{
    border-radius: 50%;
    border: 2px rgba(255, 255, 255, 0.861) solid !important;
    width: 70px !important;
    height: 70px !important;
}

.avatar-home{
    border-radius: 50%;
    border: 1px rgb(201, 201, 201) solid;
    width: 42px;
    height: 42px;   
}
.avatar-home-user{
    border-radius: 50%;
    border: 1px white solid;
    width: 52px;
    height: 52px;   
}
.avatar-read{
    border-radius: 50%;
    border: 2px #ababab solid;
    width: 65px;
    height: 65px;   
}

#mymenu a{
    color: #051622;
    display: list-item;
    list-style: none;
    text-decoration: none;
    font-size: medium;
    margin-bottom: 0.8cm;
}

#mymenu-nav a{
    color: #ffffff;
    display: list-item;
    list-style: none;
    text-decoration: none;
    font-size: medium;
    
}
#arrow:hover{
    background-color: #051622;
    color: red;

}


#profile-back{
    background-color:#051622 !important;
    height: 200px !important;
    margin-top:0cm;
}


.thumbnail {
 
    width: 100%;
    height: 110px;
    overflow: hidden;
  }

  .thumbnail img {
    position: relative;
    left: 50%;
    top: 50%;
  
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }

.article-thumbnail{
    width: 100%;
    height: 220px;
    overflow: hidden;
    margin: 0cm;


}

.article-thumbnail img {
    position: relative;
    left: 50%;
    top: 50%;
    
    
  
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }






@media screen and (max-width:767px) {
    .search{
       display: none;
    }
    .icon{
        display: inline-block;
    }
    #input{
        display: none;
    }
}

@media screen and (min-width:768px) {
    .search{
       display: inline-block;
    }
    .icon{
        display: none;
    }
}


/*   ##################################################   screen sizes home page   ######################################################   */

@media screen and (max-width:330px){
   #desktopview{
       display: none;
   }
    
  #tabletview{
      display:none;
  }

  #small{
    display:block;
 }
 #smaller{
    display:none;
 }


}

@media screen and (min-width:331px){
    #desktopview{
        display: none;
    }
     
   #tabletview{
       display:none;
   }
 
   #small{
     display:none;
  }
  #smaller{
    display:block
 }
 .reactions{
    display: none;
}

 
 }

@media screen and (min-width:575px){
    #desktopview{
        display: none;
    }

    #tabletview{
        display: block;
    }

    #mediumtabletview{
        display:none
     }
     #smaller{
        display:none
   
 }
}
 @media screen and (min-width:850px){
    #desktopview{
        display: block;
    }

    #tabletview{
        display: none;
    }

    #mediumtabletview{
        display:none
     }
     #smaller{
        display:none;
    
 }
 }

/**  #########################################################################   Close  ###########################################################################################*/


/* ################################################################## Screen Sizes Read Page ###################################################################*/


@media screen and (max-width:574px){
    .smallr{
        display: block;
    }
    .tablet{
        display: none;
    }

    .desktop{
        display: none;
    }

    .reactions{
    display: none;
    }
 }

 @media screen and (min-width:575px){
    .smallr{
        display: none;
    }
    .tablet{
        display: block;
    }
    .desktop{
        display: none;
    }


    .reactions{
    display: none;
    }
 }

 @media screen and (min-width:800px){
    .smallr{
        display: none;
    }
    .tablet{
        display: none;
    }
    .desktop{
        display: block;
    }

    .reactions{
    display: block;
    }

 }







@media screen and (max-width:370px){
 
    .avatar{
        border-radius: 50%;
        border: 3px white solid;
        width: 120px;
        height: 120px;

    }
    .img-wrap{

        position: relative;
        padding-top: 2cm;
    }
    #profile-back{
        background-color:#051622;
        height: 3.7cm;
        margin-top:0cm;
    }
 
}


@media screen and (min-width:371px){
   
    .avatar{
        border-radius: 50%;
        border: 3px white solid;
        width: 150px;
        height: 150px;
    }
    .img-wrap{

        position: relative;
        padding-top: 2cm;
    }
    #profile-back{
        background-color:#051622;
        height: 4cm;
        margin-top:0cm;
    }
    
}


@media screen and (min-width:790px){
   
    .avatar{
        border-radius: 50%;
        border: 3px white solid;
        width: 180px;
        height: 180px;
    }
    .img-wrap{

        position: relative;
        padding-top: 2cm;
    }
    #profile-back{
        background-color:#051622;
        height: 4.5cm;
        margin-top:0cm;
    }
    
}

@media screen and (min-width:1070px){
   
    .avatar{
        border-radius: 50%;
        border: 3px white solid;
        width: 220px;
        height: 220px;
    }
    .img-wrap{

        position: relative;
        padding-top: 2cm;
    }
    #profile-back{
        background-color:#051622;
        height: 5cm;
        margin-top:0cm;
    }
    
}