.newpost h1{
    font-size: 2em;
    color: var(--main-color);
    text-align: center;
    margin-bottom: 0;
}

.newpost {
    width: 50%;
    margin: auto;
    padding: 10px;
    margin-bottom: 20px;
    background-color: var(--news-background-color);
}

.newpost p{
    white-space: pre-wrap;
}

.newpost .time{
    text-align: center;
    color: gray;
    margin: 0px;
    font-size: 0.7em;
}

@media only screen and (min-width: 680px) and (max-width: 980px) {
    .newpost{
        width: 75%;
    }
}

@media only screen and (max-width: 680px) {
    .newpost{
        width: 100%;
    }
}

#no-news{
    text-align: center;
}

/* 

    Article Styling.

*/

article>p {
    text-align: center;
}

article>h3 {
    text-align: center;
    font-size: 1.3em;
    color: var(--main-text-color);
}

article>h2 {
    text-align: center;
    font-size: 1.5em;
}

article>ul {
    float: right;
    position: relative;
    left: 30%;
    text-align: left;
    color: var(--main-text-color);
}

article>ol {
    float: right;
    position: relative;
    left: 30%;
    text-align: left;
    color: var(--main-text-color);
}

article>li {
    float:left;
    position:relative;
}

.newpost a{
    color: var(--main-color);
}

.newpost a:hover{
    color: var(--main-color-hover);
    text-decoration: none;
}

/* Fix the position of lists on mobile. */
@media only screen and (max-width: 800px) {
    article>ul, article>ol  {
        float: none;
        position:initial;
        text-align: left;
        color: var(--main-text-color);
    }
}