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

/* Core Styling */
html * {
        font-family:sans-serif;
}
body {
        margin:2em auto;
        max-width:45em;
        /*min-width:35em;*/
        line-height:1.5;
        font-size:large;
        color:#33ccff;
        background-color:#121619;
        padding:0 2em;
}
/********************************/
/********************************/

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

.visually-hidden {
	display: none;
}

p {
	margin-top: 1em;
	margin-bottom: 0.2em;
}

p.sponsor {
	color: #ff6fa9;/*#f34189;*/
	font-weight: bold;
	font-size: medium;
}

video {
        width:100%;
}

svg {
	display:inline-block;
        margin: 3em 2em 2em 2em;
	vertical-align:middle;
}

img.logo {
	display:inline-block;
        margin: 2em;
	vertical-align:middle;
}

svg.logo {
	display:inline-block;
        margin: 2em;
	vertical-align:middle;
}

img.icon {
	width: 16px;
	height: 16px;
	display:inline-block;
        margin: 0em 0.2em 0em 0.2em;
	vertical-align:middle;
	border-radius: 0;
}

svg.icon {
	width:16px;
	height:16px;
	display:inline-block;
        margin: 0em 0.2em 0em 0.2em;
	vertical-align:middle;
}

img {
    max-width: 100%;
    max-height: 100%;
    margin-top:3em;
    margin-bottom:0.5em;
    border-radius:1.2em;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

code {
	display:block;
        background-color:#293137;
        border-radius:1.2em;
        padding-left:2em;
        padding-right:2em;
        line-height:2em;
        padding-top:0.5em;
        padding-bottom:0.5em;
        color:#33ccff;
	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;
}

figcaption {
        font-style: italic;
        font-size: smaller;
        text-align: center;
}

blockquote {git remote set-url origin git@github.com:krulf/retrogamedays.git
git config --global user.email 47870144+krulf@users.noreply.github.com
        border-left:1px solid #00ace6;
        display:block;
        margin-top: 1em;
        margin-bottom: 2em;
        margin-left: 3em;
        padding-left: 1em;
        margin-right: 4em;
        font-style: italic;
        color:#00ace6;
}

hr {
        color:#33ccff;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
}

#endline { /* Special kind of <hr> for spacing out footnotes from the rest of a post */
        color:#33ccff;               
        margin-left: auto;              
        margin-right: auto;
        max-width: 100%;
        margin-top: 6em;
}

a {
        color:#b3ecff
}

h1 {
        line-height:1.2
}

h2 { 
        padding-top:1em;                                                                                  
        line-height:1;                                                                                    
        margin-bottom:-0.3em;
	color: #ff6fa9;/*#f34189;*/
}

h3, h4 {
        padding-top:0.5em;
        line-height:1;
	margin-bottom:-0.5em;
	color: #df6aff;/*#ac03da;*/
}

ul,ol {
        line-height:1.4;
}

/* 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:1em;
}

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

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


/*** 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: 1.5em;
        text-align:center;
    	border-radius:0;
}

/* Navbar styling. */
.topbar {
        padding-right:1em;
        border-top:1px solid #33ccff;
        border-bottom:1px solid #33ccff;
        margin-bottom:2em;
        text-align:center;
        font-size:large;
	font-variant-caps:all-small-caps;
        line-height:2;
}
.topbar a {
	color:#ff33ff;
	text-decoration:none;
	white-space: nowrap;
}

/* Site footer styling */
.footer {
        border-top:1px solid #33ccff;
        font-size:small;
        margin-top:6em;
        text-align:center;
}

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


/*** Other misc garbage ***/

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

/* Mobile device 1200px? */
@media screen and (max-width: 1200px) {
  body {
        font-size: xx-large;
  }
  .topbar {
        font-size: xx-large;
  }
}

/* Mobile device 800px? */
@media screen and (max-width: 800px) {
  body {
        font-size: medium;
  }
  .topbar {
        font-size: medium;
  }
}