/* Start global rules */
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box
}
body{font-family: 'Roboto', sans-serif; background-color: #Fdfcfa}
/* End global rules */
/* Start Bootstrap styling */
nav{font-family: 'Aref Ruqaa', serif;    background-color: #Fdfcfa}
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-nav .active,
.navbar-light .navbar-nav .nav-link:hover{outline: 0;   color: #0984e3 !important}
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link{color:#5d35ae}
.navbar-toggler:focus,
.btn-check:focus+.btn,
.btn:focus{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none
}
@media(min-width:991px){
    .navbar-brand{
        position: absolute;
        top: 45%;
        left: 45%
    }
}
@media(max-width:767px){
    .navbar-nav{text-align: center;   flex-direction: column-reverse}
    .navbar-collapse{margin-top: 2rem}
}
/* End Bootstrap styling */
.replays, .profile, footer{direction: rtl}

.welcome h1{
    font-size: 42px;
    background: -webkit-linear-gradient(#e84393, #7c38ae);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h1, p, .contents, footer{
     font-family: 'Aref Ruqaa', serif;
    font-family: 'Scheherazade New',
    serif; 
}
.welcome p{
    font-size: 22px;
    background: -webkit-linear-gradient(#333, #6c5ce7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contents .content{
    border-radius: 5px;
    font-weight: bolder;
    font-size: 24px;
    transition: 0.6s;
    color: #fafafa
}
.contents .replies-box{
    background-color: #0652DD;
    border: 2px solid #1289A7
}
.contents .replays-box:hover{
    background-color: #1289A7;
    border: 2px solid #0652DD
}
.contents .likes-box{
    background-color: #e84393;
    border: 2px solid #b9055c
}
.contents .likes-box:hover{
    background-color: #b9055c;
    border: 2px solid #e84393
}
.contents .comments-box{
    background-color: #0984e3;
    border: 2px solid #044e87
}
.contents .comments-box:hover{
    background-color: #044e87;
    border: 2px solid #0984e3
}
.contents .shares-box{
    background-color: #6c5ce7;
    border: 2px solid #372f74
}
.contents .shares-box:hover{
    background-color: #372f74;
    border: 2px solid #6c5ce7
}

.allr{
    border: 1px solid #80808021;
    background-color: #8080800d;
}
@media(max-width:991px){
    .welcome h1 {font-size: 28px}
    h1, .profile p{text-align: center}
    .contents .content{font-size: 18px}
}
/* Start Footer styling */
.footer .logo,
.footer .rights{color: #5d35ae}
.footer .rights-div{border-top: 1px solid #5d35ae40}
.svg-inline--fa{font-size: 22px; margin-bottom: 10px}
.fa-facebook-f{color: #1877f2}
.fa-linkedin-in{color:#000000}
.fa-instagram{color:#c13584}
.fa-goodreads{color:#553b08}
.fa-pinterest{color:#e60023}
.fa-heart{color: #ff1c1c; margin-bottom: 0; font-size: 16px}
@media(max-width:767px){
    .footer{text-align: center}
    .svg-inline--fa {font-size: 16px}
    .footer .rights{font-size: 14px}
}
.svg-inline--fa{
    margin-bottom: 0;
    font-size: 16px;
    margin-right: 5px
}
/* End Footer styling */