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

/* Font */
@font-face {
  font-family: 'Fira Code';
  src: url('FiraCode-VariableFont_wght.ttf');
}

/* Core Styling */
html * {
        font-family:"Fira Code",monospace,sans-serif;
}
body{
        margin:40px auto;
        max-width:650px;
        line-height:1.6;
        font-size:1em;
        color:#736e7d;
        /*background-color:#171c23;*/
        background-color:#050014;
        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 { /* code block, usage <div class="code"><p>codegoeshere</p></div> */
        background-color:#050014;
        border:1px solid #8c91fa;
        border-radius:16px;
        padding-left:30px;
        padding-right:30px;
        line-height:2em;

        padding-top:1px;
        padding-bottom:1px;
        color:#e0c386;
}

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;
}

.bq { /* block quote, usage <p class="bq">quotegoeshere</p> */
        padding:0 50px;
        font-style: italic;
        color:#337e6f;
}
blockquote { /* block quote */
        border-left:1px solid #736e7d;
        display:block;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 30px;
        padding-left: 10px;
        margin-right: 40px;
        font-style: italic;
        color:#337e6f;
}

hr {
        color:#736e7d;
        border-color:#736e7d;
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
}

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

a {
        color:#9ad4e0;
}

h1{
  color:#8c91fa;
        line-height:1.2;
        text-align:center;
  font-size:1em;
}

/* add trim. see: https://stackoverflow.com/questions/17047694/add-line-break-to-after-or-before-pseudo-element-content */
h1::after {
  content:"\A\\---/";
  white-space:pre;
}

h2,h3{
  color:#8c91fa;      
  padding-top:24px;
        line-height:1.2;
  font-size:1em;
}

/* Style for inline dates. Rather than be part of the page header/footer, these are configured via a separate include file in /config/date.html so that they can be used via an inline include statement in the post template that they can be omitted on a per-post basis for posts that don't really need to have their published date+author visible. */
.date { 
        padding-bottom:0;
        margin-bottom:0;
        font-size:14px;
        text-align:right;
}

/*
@media screen and (max-width: 1200px) {
.date { 
        text-align:right;
}
}
@media screen and (min-width: 1201px) {
.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. */
@media screen and (max-width: 1200px) {
        .logo {           
                margin-bottom:20px;
                text-align:center;
        }
        #logo {
          font-size:1.1vw;
        }
}

@media screen and (min-width: 1201px) {
        .logo {
                /*transform: translate3d(-120px, 0, 0);*/
                margin-bottom:20px;
        }
        .logo img {
                margin-left:0px;!important;
                margin-right:0px;!important;
        }
        #logo {font-size:0.5vw;text-align:center;}
}

/* Navbar styling.*/
.navbar {
        padding-right:10px;
        margin-bottom:20px;
        text-align:center;
}
.navbar a {
color:#8c91fa;
text-decoration:none;
}

/* Site footer styling */
.footer {
        border-top:2px solid #736e7d;
        font-size:12px;
        margin-top:120px;
        text-align:center;
}
/********************************/
/********************************/


/*** Other misc garbage ***/

/* Arise Index Style */
.arise-toc-td {
  border-width: 1px;
  border-color: #736e7d;
  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;
}