html,
body,
header,
.view {
  height: 100%;
  /* word-break:break-all;  */
  overflow-wrap: break-word;
}

body {
    background-color: #eee;
    color: #3c4858;
}

body a {
    color: #3c4858;
}

body a:hover {
    color: #89229b;
}

.main {
    position: relative;
    margin-top: -3rem;
    background-color: #fff;
    border-radius: 8px;
    z-index: 3;
}

.post-thumbnails {
    display: block;
    width: 100%;
    height: 160px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.post-content {
    padding: 0 4rem;
}

@media only screen and (max-width: 768px) {
    .post-content {
        padding: 0 2rem;
    }
}

.post-content img {
    max-width: 100%;
}

.post-content h1,h2,h3,h4,h5,h6 {
    font-weight: 600;
    padding-top: 50px;
    margin-top: -50px;
}

.post-content h1::before,h2::before,h3::before,h4::before,h5::before,h6::before {
    content: "# ";
    color: #0e5796;
}

.comments {
    width: 60%;
    margin: 0 auto;
}

.about-avatar {
    position: relative;
    margin: -8rem auto 1rem;
    max-width: 10rem;
    z-index: 3;
}

/*
* toc 
*/

#toc {
    padding: 0 1rem 0;
}

#tocbot ol {
    list-style: none;
    padding-inline-start: 10px;
}

.tocbot-list ol {
    list-style: none;
    padding-left: 15px;
}

.tocbot-link {
    color: #34495e;
}

.tocbot-active-link {
    font-weight: 600;
    color: #89229b;
}

.tocbot-is-collapsible {
    max-height: 1000px;
    overflow: hidden;
    transition: all 300ms ease-in-out;
}

.tocbot-is-collapsed {
    max-height: 0;
}

/*
* footer
*/

footer a {
    color: #3c4858;
}

/*
* Rewrite mdb.css
*/

.nav-pills .nav-item a {
    color: #3c4858;
}

.nav-pills .nav-item a.active {
    color: #fff;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #ff4f5e !important;
}

.nav-pills .nav-link:hover {
    background-color: rgba(158,158,158,.3);
}

.nav-pills .nav-link.active {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.list-group-item {
    border: 0;
}

/* Navbar */

.navbar {
    background-color: transparent;
    font-size: 14px;
}

.top-nav-collapse {
    background-color: rgba(255,255,255,0.33);
}

.navbar-col-show {
    background-color: #1976d2;
}

@media only screen and (max-width: 768px) {
    .navbar {
        background-color: transparent;
    }

    .top-nav-collapse {
        background-color: transparent;
    }

    .navbar-col-show {
        background-color: #563d7c;
    }
}

.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon span {
background: #ffffff;
}

.animated-icon span:nth-child(1) {
top: 0px;
}

.animated-icon span:nth-child(2) {
top: 10px;
}

.animated-icon span:nth-child(3) {
top: 20px;
}

.animated-icon.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

.animated-icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}