/*** Core page styles to set the primary colours and styles to be inherited by everything else ***/

/* Core Styling */
html * {
        font-family: system-ui, sans-serif;
}
body{
        margin:40px auto;
        max-width:650px;
        line-height:1.6;
        font-size:18px;
        color: #d2b48c; /* muted gold-beige text */
        background-color: #1e1b17; /* warm dark brown background */
        padding:0 10px;
}
/********************************/
/********************************/

/*** Post styling. This section is for defining markup classes to make it easier to write prettier posts. ***/

img {
    max-width: 100%;
    max-height: 100%;
    margin-top:20px;
    margin-bottom:20px;
    border-radius:16px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

code {
        background-color: #2a2420; /* slightly warmer dark */
        border-radius:16px;
        padding-left:30px;
        padding-right:30px;
        line-height:2em;
        padding-top:1px;
        padding-bottom:1px;
        color: #d2b48c; /* same as body text */
        font-family:monospace;
}

pre {
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
}

blockquote {
        border-left: 1px solid #6b5633;
        display:block;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 30px;
        padding-left: 10px;
        margin-right: 40px;
        font-style: italic;
        color: #bfa074; /* subtle, readable tone */
}

hr {
        border: none;
        border-top: 1px solid #6b5633;
        margin: 1.5em auto;
        max-width: 300px;
}

#endline { /* Special kind of <hr> for spacing out footnotes from the rest of a post */
        border: none;
        border-top:1px solid #6b5633;              
        margin-left: auto;              
        margin-right: auto;
        max-width: 300px;
        margin-top: 80px;
}

a {
    color: #d6b676; /* muted gold */
    text-decoration: none;
}
a:hover {
    color: #f0d89a; /* lighter gold on hover */
}

h1{
        line-height:1.2
}

h2,h3{
        padding-top:24px;
        line-height:1.2
}

/* Style for inline dates. These are configured via a separate include file in /config/content_header.html. See notes on Arise page creation for more details. */
.date { 
        padding-bottom:0;
        margin-bottom:0;
        font-size:14px;
}

@media screen and (max-width: 900px) {
.date { 
        text-align:right;
}
}
@media screen and (min-width: 901px) {
.date { 
        float:right;
        margin-left:30px;
}
}

/********************************/
/********************************/

/*** Modular component styles. Includes styling for the headers, navigation controls, and footer. */

/* Site logo. Styled to responsively move to either left or be centred, depending if the page is being viewed on desktop or mobile respectively. */
.logo {           
        margin-bottom:20px;
        text-align:center;
}
.logo img {
        max-height: 80px;
        opacity: 0.95;
}

/* Navbar styling. */
.topbar {
        text-align: center;
        padding: 10px 0;
        border-top: 1px solid #6b5633;
        border-bottom: 1px solid #6b5633;
        margin-bottom: 20px;
}
.topbar a {
    color: #d2b48c;
    padding: 0 8px;
    text-decoration:none;
}
.topbar a:hover {
    color: #f0d89a;
}

/* Site footer styling */
.footer {
    border-top: 1px solid #6b5633;
    color: #a89064;
    font-size: 13px;
    margin-top: 100px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 20px;
    line-height: 1.5;
}

.footer a {
    color: #d6b676;
    text-decoration: none;
}

.footer a:hover {
    color: #f0d89a;
}

.footer span {
    opacity: 0.8;
}

/********************************/
/********************************/

/*** Other misc garbage ***/

/* Arise Index Style */
.arise-toc-td {
  border-width: 1px;
  border-color: #6b5633;
  border-top-style: solid;
  text-align: center;
  padding-right: 10px;
  padding-bottom: 5px
}
.arise-toc-th {
  padding-bottom: 20px;
  border-bottom: 1px;
  border-bottom-style: solid;
}