@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: url('/theme/Comfortaa-Regular.woff2') format('woff2'),
         url('/theme/Comfortaa-Regular.ttf') format('ttf');
}

@font-face {
    font-family: 'Sacramento';
    font-style: normal;
    font-weight: 400;
    src: url('/theme/Sacramento-Regular.woff2') format('woff2'),
         url('/theme/Sacramento-Regular.ttf') format('ttf');
}

@font-face {
    font-family: 'Zilla Slab';
    font-style: normal;
    font-weight: 400;
    src: url('/theme/ZillaSlab-Regular.woff2') format('woff2'),
         url('/theme/ZillaSlab-Regular.ttf') format('ttf');
}

body {
    background-color: #184c74;
}

a {
    text-decoration: none;
}

.main {
    width: 80%;
    margin: 0 auto 0 auto;
}

.main-header {
    background-color: #777777;
    font-family: 'Comfortaa', cursive;
    padding: 3rem;
}

.main-header .main-header-text {
    margin: 0 auto;
    width: 50%;
    min-width: 70%;
}

.main-header h1 {
    font-family: 'Sacramento', cursive;
    font-size: 5rem;
    font-weight: normal;
    margin: 0;
    text-align: center;
}

.main-header h1 a {
    color: #FFAA00;
}

.main-header h1 .main-header-underline {
    border-top: 0.25rem solid #FFAA00;
    margin-top: -1.5rem;
}

.main-header h2 {
    color: #FFFFFF;
    font-family: 'Comfortaa', cursive;
    font-weight: normal;
    margin: 2.25rem 0 0 0;
    text-align: center;
}

.main-menubar {
    background-color: #502D16;
    padding: 0 1rem 0 1rem;
    text-align: center;
}

.main-menubar a {
    border-color: #FFAA00;
    border-style: solid;
    border-width: 0.2rem;
    color: #FFAA00;
    display: inline-block;
    font-family: 'Comfortaa', cursive;
    font-size: 1.5rem;
    font-weight: normal;
    padding: 0.5rem 1rem 0.25rem 1rem;
}

.main-menubar a:hover {
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.main-body {
    background-color: #2D2D2D;
}

.main-content {
    padding: 2rem 0.75rem 1.5rem 1.5rem;
}

.main-sidebar {
    padding: 2rem 1.5rem 1.5rem 0.75rem;
}

.main-footer {
    background-color: #502D16;
    border-top-color: #FFAA00;
    border-top-style: solid;
    border-top-width: 2px;
    color: #FFFFFF;
    font-family: 'Comfortaa', cursive;
    text-align: center;
    padding: 1rem;
}

.main-footer a {
    color: #FFFFFF;
}

.main-footer a:hover {
    color: #FFAA00;
}

.content-panel {
    background-color: #FFFFFF;
    border-color: #FFAA00;
    /*border-radius: 1rem;*/
    border-style: solid;
    border-width: 3px;
    margin-bottom: 1.5rem;
    padding: 0.8rem 0.5rem 0.5rem 0.5rem;
}

.content-panel h1 {
    font-family: 'Comfortaa', cursive;
    font-size: 1.3rem;
    margin: 0.25rem 0;
    text-align: center;
}

.content-panel h1 a {
    color: #000000;
}

.content-panel a:hover {
    color: #FFAA00;
}

.content-panel hr {
    border: 0;
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 1px;
    width: 75%;
}

.content-panel .content-body {
    font-family: 'Zilla Slab', serif;
}

.content-panel ul.content-panel-links {
    list-style-type: none;
    margin: 1rem;
    padding: 0;
}

.content-panel ul.other-posts-content-panel-links {
    list-style-type: disc;
    margin-left: 2rem;
    margin-right: 2rem;
}

.content-panel ul.other-posts-content-panel-links .other-posts-article-pin {
    margin-right: 0.2rem;
    vertical-align: middle;
    width: 1rem;
}

.content-panel ul.content-panel-links-centered li {
    text-align: center;
}

.content-panel ul.content-panel-links li {
    margin: 0.5rem 0;
}

.content-panel ul.content-panel-links.other-posts-content-panel-links li {
    margin: 1rem 0;
}

.content-panel ul.content-panel-links a {
    color: #000000;
    font-family: 'Zilla Slab', serif;
    font-size: 1.25rem;
}

.content-panel.content-panel-portrait {
    background-color: #2D2D2D;
    background-image: url("/file/portrait.colour.jpeg");
    background-repeat: no-repeat;
    background-size: 200px 206px;
    height: 206px;
    margin: 0 auto 1.5rem auto;
    padding: 0;
    text-align: center;
    width: 200px;
}

.article-pin {
    margin-right: 0.5rem;
    vertical-align: middle;
    width: 1.5rem;
}

.article-title {
    font-size: 1.75rem !important;
}

.article-title a {
    font-size: 1.75rem;
}

.article-timestamp {
    display: block;
    font-family: 'Comfortaa', cursive;
    font-size: 0.75rem;
    margin: 0.65rem 0 0 0;
    overflow: hidden;
    text-align: center;
}
.article-timestamp:before,
.article-timestamp:after {
    background-color: #000000;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 37.5%;
}
.article-timestamp:before {
    right: 1rem;
    margin-left: -50%;
}
.article-timestamp:after {
    left: 1rem;
    margin-right: -50%;
}

.article-body {
    font-family: 'Zilla Slab', serif;
    font-size: 1.2rem;
    margin: 0 auto;
    width: 90%;
}

.article-body h2 {
    font-size: 1.5rem !important;
}

.article-body h3 {
    font-size: 1.3rem !important;
    font-style: italic;
}

.article-body ul li {
    margin: 0 0 0.50rem 0;
}

.article-body ol li {
    margin: 0 0 0.50rem 0;
}

.article-body ol.list-long > li {
    margin-bottom: 1rem;
}

.article-body ol.list-lower-roman {
    list-style-type: lower-roman;
}

.article-body cite {
    color: #777777;
    cursor: pointer;
    font-size: smaller;
    font-style: normal;
    vertical-align: super;
}

.article-body ul.footnotes {
    margin: 0;
    padding: 0;
}

.article-body ul.footnotes li {
    list-style-type: none;
    margin: 0 0 0.25rem 0;
}

.article-body table {
    border-collapse: collapse;
    width: 100%;
}

.article-body table th, 
.article-body table td {
    border-color: black;
    border-style: solid;
    border-width: 1px;
    padding: 0.25rem;
}

.article-body table.table-centered-text th,
.article-body table.table-centered-text td {
    text-align: center;
}

.article-body .blockquote {
    padding-left: 8%;
    padding-right: 8%;
    font-style: italic;
    display: inline-block;
}

@media screen and (max-width: 480px){
    .article-body .blockquote {
        padding-left: 10%;
        padding-right: 10%;
    }
}

.article-body .blockquote-verse {
    font-style: normal;
}

.article-body hr {
    display: block;
    margin-bottom: 2rem;
    margin-top: 2rem;
    width: 30%;
}

.article-more {
    text-align: center;
}

.article-more a {
    color: #000000;
    font-family: 'Comfortaa', cursive;
    font-size: 1rem;
}

.article-tags {
    text-align: center;
}

.article-tags hr {
    border: 0;
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 1px;
    width: 75%;
}

.article-tags .article-tags-title {
    color: #777777;
    font-family: 'Comfortaa', cursive;
}

.article-tags a {
    color: #000000;
    font-family: 'Comfortaa', cursive;
    font-size: 1.0rem;
    margin: 0 0 0 0.25rem;
}

.article-previous {
    display: inline-block;
    float: left;
    text-align: left;
}

.article-next {
    display: inline-block;
    float: right;
    text-align: right;
}

.article-previous,
.article-next {
    color: #777777;
    font-family: 'Comfortaa', cursive;
}

.article-previous a,
.article-next a {
    color: #000000;
    font-family: 'Comfortaa', cursive;
}

.page-title-body-separator {
    border: 0;
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 1px;
    text-align: center;
    width: 75%;
}

.pagination .pagination-newer {
    color: #000000;
    font-family: 'Comfortaa', cursive;
    float: left;
}

.pagination .pagination-older {
    color: #000000;
    font-family: 'Comfortaa', cursive;
    float: right;
}

img.noscript-value {
    vertical-align: bottom;
}

.tippy-content {
    text-align: center;
    font-style: normal;
    font-weight: normal;
}

.tippy-content a {
    color: #FFAA00;
}

.tippy-content em {
    font-style: italic;
}

.tippy-content strong {
    font-weight: bolder;
}

/* *** LAYOUT *** */

.main-body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
        "c c c c c c c c s s s s";
}

.main-content {
    grid-area: c;
}

.main-sidebar {
    grid-area: s;
}

@media screen and (max-width: 992px) {
    .main {
        margin: auto;
        width: 100%;
    }

    .main-body {
        display: inherit;
    }

    .main-content {
        padding: 2rem 1.5rem 2rem 1.5rem;
    }

    .main-sidebar {
        padding: 2rem 1.5rem 2rem 1.5rem;
    }

    .main-header {
        padding: 2rem;
    }

    .main-header h1 {
        font-size: 3rem;
    }

    .main-header h2 {
        font-size: 1rem;
    }

    .main-menubar {
        padding: 0;
    }

    .main-menubar a {
        font-size: 1.0rem;
        font-weight: normal;
        padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    }
}

/* *** /LAYOUT *** */