@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&family=Cairo:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&family=Cairo:wght@300&family=Markazi+Text:wght@500&display=swap');

#title {
    font-size: 26pt;
}

#content > p {
    font-size: 21px;
    text-align: justify;
}

.article-main-img {
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    /*filter: contrast(1.1) brightness(1.1);*/
    border: 1px solid #00000017;
}

img {
    max-width: 100%;
    height: auto;
}

.pure-img {
    max-width: none;
    height: inherit;
    object-fit: inherit;
}

blockquote {
    border-right: lightgray 4px solid;
    padding: 10px;
}

blockquote > p {
    font-size: 24px;
}

.centered-div {
    display: block;
    margin: auto !important;
    padding-bottom: 20px;
}

@media (max-width: 600px) {
    .p-x {
        padding: 0.5rem !important;
    }

    #title {
        font-size: 23pt;
    }

    #top-name {
        text-align: center;
    }

    .navbar-menu {
        margin: 7px 0 !important;
    }

    .menu-item {
        text-align: center;
        justify-content: center !important;
    }
}

.text-brand {
    color: #659dbd;
    font-size: 20px !important;
    padding: 0;
    margin: 0;
    margin-bottom: -4px;
}

.btn-primary {
    padding: 2px 32px;
    margin: auto;
    display: block;
}

.element {
    font-size: 15pt !important;
}

.element-div {
    padding: 0 !important;
    margin-bottom: 20px;
}

.menu-item {
    padding: 0 19px;
}

.custom-link {
    text-decoration: none;
    color: #659dbd;
    font-size: 15pt;
    display: block;
    margin-top: 15px;
}

body {
    background-image: url('/public/image/default-trans-min.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#avatar {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    object-fit: cover;
    box-shadow: 1px 3px 5px #ccc;
    border: 1px white solid;
    margin: 0;
    position: relative;
    top: 30%;
    -ms-transform: translateY(-30%);
    transform: translateY(-30%);
}

#profile-image {
    text-align: left;
}

#fullname, #username, #email, #mobile {
    margin: 0 !important;
}

#edit-profile {
    display: inline-block;
    border: 1px #659dbd solid;
    background: white;
    color: #659dbd;
    margin-right: 20px;
}

* {
    font-family: 'Markazi Text', serif;
}

.text-brand {
    color: #659dbd;
}

.bg-brand {
    background-color: #659dbd;
}

.ff-ruqaa {
    font-family: 'Aref Ruqaa', serif;
}

.rounded {
    border-radius: 0.1rem !important
}

#avatar{
    aspect-ratio: 1;
    width: 80px !important;
    height: 80px !important;
    /*max-width: 80px !important;*/
    z-index: 10;
}
#avatar-edit{
    position: relative;
    z-index: 20;
    top: 0;
    right: -80px;
    width: 80px !important;
    height: 80px !important;
}
#views-counter{
    opacity: 0.5;
    margin: 3px;
}

#author{
    color: #659dbd !important;
    font-size: 16px;
}

#counter-box{
    min-height: 54px;
    margin: 7px;
    width: 104px;
    text-align: center;
    border-radius: 12px;
    border: 1px #1a757636 solid;
    box-shadow: 1px 1px 5px #56d2d370;
    display: inline-block;
}

#score-box{
    min-height: 54px;
    margin: 7px;
    width: 104px;
    text-align: center;
    border-radius: 12px;
    border: 1px #1a757636 solid;
    box-shadow: 1px 1px 5px #56d2d370;
    display: inline-block;
}

@media (max-width: 768px) {
    #profile-image {
        text-align: center;
    }
    #profile-data{
        padding-right: 75px;
        margin-top: 20px;
    }
    #new-article{
        margin-bottom: 17px;
        margin-right: 17px;
    }
    .justify-content-end {
        justify-content: unset!important;
    }
    #buttons-div{
        width: 100%;
        display: block;
        text-align: center;
    }
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
.dark #container{
    background: #2e2e2e;
    color: #e4e4e4;
}

.dark{
    background-color: black;
}

#theme-toggle{
    background: white;
    border-color: white;
    color: black;
    margin: 10px auto;
    border-radius: 0.1rem;
    padding-bottom: 6px;
}
.dark #theme-toggle{
    background: #2e2e2e;
    border-color: #2e2e2e;
    color: #e4e4e4;
}

.dark #bio{
    color: #c7c7c7;
}
.dark #author{
    color: #5988ea !important;
}

.dark #share-label{
    color: #5988ea !important;
}
.dark .text-secondary{
    color: #b3b3b3 !important;
}
.dark .card {
    background-color: inherit;
}
.dark .btn-clear{
    color: #e4e4e4;
}

.dark .form-control{
    background-color: #2e2e2e;
    color: white;
}

.dark .form-select{
    background-color: #2e2e2e;
    color: white;
}

.form-control{
    font-size: 18pt;
}

#share-label{
    color: #3b5998 !important
}
.dark #share-label{
    color: #6597ff !important
}

#container{
    margin: 0 !important;
    max-width: 100%;
    width: 100%;
}

.card{
    border: none;
    border-radius: 0 !important;
}


#category-index {
    color: grey !important;
    font-size: 14px !important;
}
#peak {
    color: grey !important;
    font-size: 16px !important;
    margin-top: 9px !important;
    margin-bottom: 17px !important;
    display: block;
}

#title-index{
    width: 93%;
    text-align: center;
    display: block;
    /* color: #008b7d !important; */
    color: #00838f !important;
    margin: 4px auto !important;
}

#cat-aut-div{
    width: 100%;
    margin: auto;
    text-align: center;
}

.article-card{
    margin-top: 25px !important;
    box-shadow: 0px 0px 5px #00000012;
    padding-top: 13px;
}

#articles{
    max-width: 1250px;
    margin: auto !important;
}

#container{
    max-width: 1250px;
    margin: auto !important;
}


/********************* FADE IN SCC *************************/

.tile {
    -webkit-transform: translateY(50px) rotate(-5deg) translateZ(0);
    transform: translateY(50px) rotate(-5deg) translateZ(0);
    -webkit-transition-delay: .3s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .9s;
    opacity: 0;
    margin: auto;
    display: block;
    max-width: 360px;
    text-align: center;
    position: absolute;
    top: 50%;
    /*-ms-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/
}

.img-tile {
    -webkit-transform: translateY(50px) rotate(40deg) translateZ(0) scale(0.5);
    transform: translateY(50px) rotate(40deg) translateZ(0) scale(0.5);
    -webkit-transition-delay: .3s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .9s;
    opacity: 0;
}

.spec-tile {
    -webkit-transform: translateY(50px) rotate(5deg) translateZ(0);
    transform: translateY(50px) rotate(5deg) translateZ(0);
    -webkit-transition-delay: .3s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .9s;
    opacity: 0;
}

.bottom-right.inView {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg) translateZ(0);
    transform: translateY(0px) rotate(0deg) translateZ(0);
}
.inView {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg) translateZ(0);
    transform: translateY(-100%) rotate(0deg) translateZ(0);
}
.img-inView {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg) translateZ(0) scale(1);
    transform: translateY(0px) rotate(0deg) translateZ(0) scale(1);
    /*box-shadow: 1px 1px 15px #00000014;*/
}

.tile-wrapper{
    height:400px;
    margin-top:65px;
}

.right-tile{
    right: 4%;
}

/*********************** END - FADE IN STYLES *************************/

.column{
    height: 400px;
    margin: auto;
    display: block;
    position: relative;
 }

.index-img{
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    box-shadow: 1px 1px 15px #00000014;
}

.index-card{
    margin: 0;
    position: absolute;
    top: 50%;
    right: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
.index-card>p{
    font-size: 19px;
    max-width: 350px;
}


.index-row{
    /*background: aliceblue;*/
    padding-top: 67px;
}

.top-brief{
    text-align: center;
    /*display: inline-block;*/
    font-size: 25px;
}
.primary{
    color: #3b5998;
    color: #54829c;
    font-family: 'Aref Ruqaa', serif;
    position: relative;
    top: 3px;
}

.img-tile>img{
    /*box-shadow: 1px 1px 15px #00000014;*/
    border-radius: 25px;
    filter: drop-shadow(1px 1px 10px #00000022);
}

.tile>p{
    font-size: 19px;
}

.btn-primary{
    border: none;
}
.btn-primary:hover{
    background: #3a80c1;
}

.index-h1{
    color: #3b5998;
    color: #54829c;
}

.index-btn{
    width: 250px;
}

hr:not([size]) {
    height: 0.5px;
    color: grey;
}

.logout{
    color: #8c0615 !important;
}
.dark .logout{
    color: #c23321 !important;
}

footer{
    /*background: #2f494fb8;*/
    /*background: #5a727eb3;*/
    padding-bottom: 30px;
    padding-top: 30px;
    margin-top: 50px;
}

[lang-selector]{
    border-radius: 0.1rem;
}

.right-menu{
    float: right;
}

.icon-div{
    width: 50px;
    height: 50px;
    margin: auto;
    margin-bottom: 20px;
}

.spec-div{
    text-align: center;
    padding: 20px;
}
.spec-div>p{
    font-size: 20px;
}

.right-menu{
    margin-left: 50%;
}