/* article styles */

header * {
    margin: 0;
    padding: 0;
}

/* loading spinner */

.loading {
    position: fixed;
    z-index: 99999;
    background: var(--loading);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none; /* default for now */
    align-items: center;
    justify-content: center; 
}

/* content */

main {
    min-height: calc(100dvh - 71px);
    display: flex;
    justify-content: center;
    padding: 0 3%;
    padding-top: 70px;
    overflow-x: hidden;
}

main .content {
    width: 100%;
    max-width: 1280px;
    background-color: var(--body-bg);
    padding: 20px 0;
}

main .content > h1:first-child {
    font-size: 54px;
    margin-bottom: 30px;
    text-align: center;
}

main .content h1 {
    font-weight: 600;
}

.thumbnail {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--thumbnail);
}

.thumbnail img {
    width: 100%;
    max-height: inherit;
    object-fit: contain;
}

/* author profile photo and name */

.post-info {
    height: 45px;
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

.post-info .post-info-content {
    width: 700px; 
    display: flex;
    align-items: center;
}

.post-info .info {
    height: 100%;
    display: flex;
    align-items: center;
}

.post-info .info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.post-info .category {
    transition: .2s;
}

.post-info .category a {
    background-color: var(--category-bg);
    color: var(--category-color);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: .2s;
}

.post-info .category a:hover {
    background-color: var(--category-bg-hover);
}

.post-info .post-info-content > span {
    width: 1px;
    height: 70%;
    margin: 0 10px;
    background-color: var(--article-division);
}


/* post */

.post {
    display: flex;
    justify-content: center;
}

.post .post-content {
	width: 700px;
}

.post .post-content p {
	font-size: 18px;
	line-height: 1.5em;
}

.post h1:first-child {
    margin-bottom: 20px;
}

.post ol li,
.post ul li {
    /* list-style-position: inside; */
    margin-left: 20px;
}

/* annoying bugs fix */

nav .profile-name {
    margin: 0;
}

nav ul li a {
    padding-bottom: 2px !important;
}

nav .languages > div {
    margin-bottom: 0px !important;
}

/* TinyMCE content.min.css file */

body{line-height:1.4;}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#ccc}figure{display:table;margin:1rem auto}figure figcaption{color:#999;display:block;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}code{background-color:#e8e8e8;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}p{margin-bottom:24px;}

/* responsiveness */

@media only screen and (max-width: 670px) {
    main .content > h1:first-child {
        font-size: 44px;
    }
}

@media only screen and (max-width: 500px) {
    .post-info .creation,
    .post-info .read-time {
        display: flex;
        flex-direction: column;
        font-size: 14px;
    }
}