:root {
    --white: #ffffff;
    --white-dark: rgba(250,250,250,1);
    --black: rgba(0, 0, 0, 1);
    --primary: #343a40;
    --primary-dark: #2a2e32;
    --primary-light: #3d4247;
    --secondary: #1a4781;
    --grey: rgb(193, 193, 193);
    --grey-light: rgb(242, 242, 242);
    --grey-dark: rgb(127, 127, 127);
}

html,body {
    font-family: "OpenSans Text", serif;
    font-size: 16px;
}
@media (max-width: 600px){
    html,body {
        font-size: 12px;
    }
    h1 {font-size: 1.5rem;}
    h2 {font-size: 1.4rem;}
    h3 {font-size: 1.3rem;}
    h4 {font-size: 1.2rem;}
    h5 {font-size: 1.1rem;}
    h6 {font-size: 1.0rem;}
}
a {color: var(--primary);text-decoration: none;}
a:hover {color: var(--primary-light);}


.element-animation {opacity: 0;transform: translateY(2rem);}
.element-animation.element-show {opacity: 1;transition: all 1s;transform: translateY(0%);}
.element-animation.top {opacity: 0;transform: translateY(-2rem);}
.element-animation.top.element-show {opacity: 1;transition: all 1s;transform: translateY(0%);}
.element-animation.left {opacity: 0;transform: translateX(-2rem);}
.element-animation.left.element-show {opacity: 1;transition: all 1s;transform: translateX(0%);}
.element-animation.right {opacity: 0;transform: translateX(2rem);}
.element-animation.right.element-show {opacity: 1;transition: all 1s;transform: translateX(0%);}

.white {color: var(--white) !important;}
.white-dark {color: var(--white-dark) !important;}
.black {color: var(--black) !important;}
.primary {color: var(--primary);}
.secondary {color: var(--secondary) !important;}
.grey {color: var(--grey) !important;}
.grey-light {color: var(--grey-light) !important;}

.bg-white {background-color: var(--white) !important;}
.bg-black {background-color: var(--dark) !important;}
.bg-primary {background-color: var(--primary) !important;}
.bg-secondary {background-color: var(--secondary) !important;}
.bg-grey {background-color: var(--grey) !important;}
.bg-grey-light {background-color: var(--grey-light) !important;}

.btn-primary {background-color: var(--primary) !important;border-color: var(--primary) !important;outline: none !important;border: 0 !important;box-shadow: none !important;}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {color: var(--white) !important;background-color: var(--primary-light) !important;border-color: var(--primary-light) !important;outline: none !important;border: 0 !important;box-shadow: none !important;}

#mainErrors,
#mainSuccess {z-index: 100500;width: fit-content;margin-top: 0.5rem;}

.background-image {background-size: cover;background-position: center;background-repeat: no-repeat;background-image: url("/img/no-image.jpg")}
.background-image.contain {background-size: contain;}
.text-smaller,.text-small {font-size: 0.8rem;}

.navbar .nav-link {color: var(--white);}

.main-container {width: 980px;margin: 0 auto;padding: 0 1rem;}
.main-container>.container-fluid {padding: 0;}
@media (max-width: 980px) {.main-container {width: 100%;}}

.pagination {margin: 1rem 0;}
.pagination .page-item .page-link {color: var(--grey-dark);}
.pagination .page-item.active .page-link {background-color: var(--primary-light);border-color:var(--primary);color: var(--white);}

.app-breadcrumb {padding: 0.5rem 0;margin-bottom: 1rem;font-size: 0.8rem;font-style: italic;border-bottom: 1px solid var(--grey-light)}
.app-breadcrumb a {color: var(--grey-dark);}
.app-breadcrumb a:hover {color: var(--grey-dark);text-decoration: none;}
.app-breadcrumb a:after {font-family: 'FontAwesome', serif;content: '\f101';margin-left: 0.3rem;}
.app-breadcrumb a:last-child:after {content: '';}

.like {}
.like.active {color: var(--primary-light);}
.dislike.active {color: var(--primary-light);}

.comments-container {}
.comments-container .comment {/*border-top: 1px solid var(--grey-light);*/margin-top: 0.5rem;}
.comments-container .comment-list>div>.comment:first-child {/*border-top: 0 solid var(--grey);*/}
.comments-container .comment-title {padding: 0.3rem 0.5rem 0.2rem 0.5rem;font-size: 0.8rem;}
.comments-container .comment-title .comment-user {font-style: italic;font-weight: bold;}
.comments-container .comment-title .comment-date {color: var(--grey-dark);font-style: italic;font-size: 0.7rem;margin-left: 1rem;}
.comments-container .comment-text {padding: 0 0.5rem;font-size: 0.8rem;white-space: pre-line;/*max-height: 8rem;overflow-x: auto;*/}
.comments-container .comment-likes {padding: 0 0.55rem;font-size: 0.8rem;margin-top:0.5rem;}
.comments-container .comment-answer-block {padding: 0 1rem;margin-top:0.5rem;font-size: 0.8rem;}
.comments-container .comment-replay-link {cursor: pointer;color: var(--primary);font-weight: bold;}

.comments-container .comment-children {margin-left: 1rem;}
.comments-container .comment .comment-body {border-left: 3px solid var(--primary);background-color: var(--white-dark);}
.comments-container .comment.disabled .comment-body {opacity: 0.8;background-color: var(--grey-light);border-left-width: 0;}
.comments-container .comment.trashed .comment-body {opacity: 0.8;background-color: var(--white-dark);border-left: 3px solid var(--grey);}

blockquote {padding:0.5rem;border-left:2px solid var(--grey);background-color: var(--grey-light);margin:0;margin-bottom:0.5rem;}
blockquote>p:last-child {margin-bottom:0;}