/* ---
| MISC, PREP
--- */
html, body { padding: 0; margin: 0; position: relative; height: 100%; }
body { font-size: 1.1rem; overflow-x: hidden; }
body > * { position: relative; z-index: 1; }
*:not(strong) { box-sizing: border-box; color: #2e2f3e; }
img { vertical-align: middle; }
.c { text-align: center; }
/* links & buttons */
a { cursor: pointer; color: #006da5; text-decoration: underline; }
.dark a { color: #94d2ee; }
a:hover { text-decoration: none; }
.btn-cntr { margin: 1.8rem 0 1rem 0; }
.btn-cntr.right { text-align: right; }
.but, button { border-radius: 3px; background: #58174b; color: white; padding: .75rem .85rem; text-decoration: none !important; transition: background .5s; position: relative; border: none; cursor: pointer; }
.but:hover, button:hover { background: #007db5 !Important; }
/* space-themed blocks */
.space { background: #58174b !important; position: relative; }
.space::after { content: ''; display: block; width: 100%; height: 100%; background: url('../imgs/misc/space.gif') center; position: absolute; left: 0; top: 0; opacity: .15; }
.space > * { position: relative; z-index: 2; }
/* floats etc */
.fl { float: left; }
.fr { float: right; }
.cl { clear: both; }
.cf::after { content: ''; display: block; clear: both; }
.right-img { float: right; width: 450px; border-radius: 50%; border: solid 6px #d4653c; margin: 0 0 0 2rem; }
/* GH download */
a.github-download { float: right; background: #ddd; border-radius: .6rem; padding: .5rem 1rem; color: #666; text-decoration: none; font-weight: bold; }
a.github-download:hover { background: #e3e3e3; }
.github-download img { height: 40px; display: inline-block; vertical-align: middle; margin-left: .6rem; }
/* text */
p, *:not(code) > span, a, li { font-family: 'source sans pro'; }
p, li { line-height: 1.75rem; }
section > p:first-child { margin: 0; }
.big, .big-kids > * { font-size: 1.5rem; line-height: 2rem; }
/* in-page nav */
article nav, #page-nav { background: #eaeaea; padding: 1.2rem 2rem 1.5rem .6rem; display: inline-block; margin-top: .5rem; }
article nav ul, #page-nav ul { margin: 0; }
.nav-ext img { width: 30px; vertical-align: middle; border-radius: 4px; background: white; padding: .25rem; }
/* headings */
h1, h2, h3 { font-family: 'varela round'; letter-spacing: -1px; }
h1 { margin: 0 0 1.5rem 0; font-size: 2.55rem; font-weight: normal; }
h1.hidden { display: none; }
h2 { font-size: 2.3rem; margin: 2.2rem 0 1.4rem 0; }
.post h2 { font-weight: normal; }
h2 a { color: inherit; text-decoration: none; font: inherit; }
h2 a:hover { text-decoration: underline; }
h3 { font-size: 1.55rem; margin: 2rem 0 .5rem 0; }
.anchor { display: none; font-size: 1.5rem; cursor: pointer; opacity: .5; position: relative; top: -.3rem; text-decoration: none !important; }
*:hover > .anchor { display: inline; }
h2 + h3 { margin-top: 1.5rem; }
h3 .anchor { font-size: 1.2rem; top: -.1rem; }
/* main container */
section { width: 1300px; max-width: 86%; margin: 0 auto; padding: 2.5rem 0; }
section::after { display: block; clear: both; content: ''; }
section > div { width: calc(100% - (355px + 3.5rem)); margin-top: .7rem; float: left; }
/* code blocks */
code { font-size: .97rem; font-family: consolas, monospace, 'courier new'; }
code:not(.block) { background: #eaeaea; color: #b42626; line-height: 1.3rem; padding: .15rem .3rem; }
a code { color: inherit !important; }
.code + img { display: block; margin: 1.5rem auto 0 auto; }
.runnable { padding-bottom: .65rem; }
code.block { color: #fff; display: block; display: block; white-space: pre-wrap; margin: 1.5rem 0; padding: 1.25rem 1.7rem !important; position: relative; }
code.block::selection { color: #d4653c; background: white; }
.runnable + p { margin: -2.6rem .4rem 2rem 0; text-align: right; z-index: 1000000; position: relative; }
.runnable + p button { background: #e4e4e4; padding: .6rem 1rem; color: #d4653c; }
.runnable + p button:hover { background: #fff; }
.runnable + p button::after { content: '\25BA Run'; }
#demo_contingent_html { display: none; }
.code a { position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; background: url('../imgs/icons/copy.png'); display: none; opacity: .5; transition: .35s; cursor: pointer; z-index: 10; }
.code:hover a { display: block; }
.code a:hover { opacity: 1; }
/* tags (as header) */
header .tags { margin-left: 1rem; }
header .tags a, .single-tag { background: #eaeaea; border-radius: 3px; padding: .1rem .4rem .2rem .4rem; color: #0288c4c4; margin-right: .35rem; font-size: .9rem; font-family: consolas, monospace, "courier new"; letter-spacing: -.5px; text-decoration: none; }
.single-tag { font-size: inherit; }
header .tags a:hover { text-decoration: underline; }
header .tags a::before, .single-tag::before { content: '#'; }
/* info and quote boxouts */
blockquote, .info, .alt-info { background: #f6e5d6; padding: 1.2rem; border-left: solid 6px #d4653c; margin: 1.5rem 0; }
blockquote, .alt-info { background: #d4ebf5; border-color: #77bcd9; }
.info, .info i, .info em { color: #575757; }
blockquote p:first-of-type { margin-top: 0; }
blockquote p:last-of-type { margin-bottom: 0; }
/* repeated sections (borders between) */
.bottom-sep { margin-bottom: 1.2rem; padding-bottom: 1.7rem; border-bottom: dashed 2px #ccc; }
.bottom-sep p:last-child { margin-bottom: 0; }
/* ---
| SITE HEADER
--- */
#top { background: rgba(255, 255, 255, .15); padding: 1rem 2.5rem 1rem 2rem; position: relative; z-index: 2; }
#top * { color: white; }
/* logo */
#logo { text-decoration: none; }
#logo img { width: 50px; display: inline-block; margin-right: .5rem; transition: transform .5s, margin .3s; }
#logo:hover img { transform: rotate(180deg); margin-right: 1.4rem; }
#logo span { font-size: 1.5rem; position: relative; top: .35rem; font-family: 'varela round'; font-weight: bold; }
/* nav */
#top nav { margin-top: 1.2rem; }
#top .mobile-mode { right: 1.8rem !important; margin-top: .45rem !important; }
#top nav a { text-decoration: none; font-family: 'varela round'; font-weight: bold; }
#top nav:not(.mobile-mode) a { padding: 1rem 0; }
#top nav a:hover { text-decoration: underline; }
#top nav:not(.mobile-mode) a:not(:last-of-type) { margin-right: 1.4rem; }
/* go vegan */
#top::before { font-style: italic; content: '#chooselovegovegan'; position: absolute; top: 50%; line-height: 0; font-size: 1.8rem; left: calc(50% - (500px / 2)); color: #fff5; font-family: 'consolas'; text-align: center; width: 500px; z-index: 2; }
/* ---
| SITE FOOTER
--- */
footer { background: #eaeaea; }
footer div { border-top: solid 1px #ccc; text-align: center; padding: 1rem 0 2rem 0; }
footer * { text-decoration: none; }
footer p { margin: 0 0 .5rem 0 !important; }
footer a:not(:last-of-type)::after { content: ' | '; letter-spacing: .6rem; }
/* ---
| RIGHT COL
--- */
#right { width: 355px; margin-top: .7rem; }
#right > * { background: #eaeaea; padding: 2rem 1.7rem; }
#right > *:not(:last-child) { margin-bottom: 2rem; }
#right h3 { margin: 0; padding-bottom: .5rem; border-bottom: solid 2px #d4653c; color: #3e3f4e; font-size: 1.3rem; }
#right h3 img:first-of-type { margin-right: .5rem; height: 40px; position: relative; top: -5px; }
#right > * :last-child { margin-bottom: 0; }
#right .btn-cntr { margin-top: 1.5rem; }
#right .but { padding: .5rem .85rem; background: #d4653c; }
/* hello box */
#hello-box *:not(a) { color: white; }
#hello-box h3 { margin-bottom: 0; }
/* lists */
#right ul { list-style: none; }
#right * ul { padding: 0; }
#right .links-list a { color: #666; font-weight: 600; text-decoration: none; }
#right .links-list a:hover { text-decoration: underline; }
#right .links-list a, #right li { display: block; position: relative; }
#right .smaller-icons a { position: relative; top: 2px; }
#right nav a:hover { text-decoration: underline; }
#right .links-list > *:not(:last-of-type) { padding-bottom: 1rem; }
#right .wider-spacing > *:not(:last-of-type) { padding-bottom: 1.8rem; }
#right .links-list > *:not(:last-of-type)::after { content: ''; position: absolute; bottom: .4rem; left: 0; width: 100%; height: 1px; border-bottom: solid 1px #d5d5d5; }
#right li a img { margin-right: .6rem; width: 50px; }
#right .smaller-icons a img { width: 24px; position: relative; top: -2px; }
#right .wider-spacing > *:not(:last-of-type)::after { bottom: 1rem; }
#right li p { margin-top: .6rem; font-size: 1rem; }
/* blog tags */
#tags p span { color: #666; }
/* ---
| ARTICLES (blogs and projects)
--- */
/* articles list */
.articles-list h2 { font-size: 1.6rem; margin-top: 0; }
/* specific article/project */
.posts section header { margin-bottom: -1rem; }
.posts section header p { color: #777; margin: -1rem 0 -.5rem 0; font-size: .9rem; }
.posts article:last-of-type { margin-bottom: 0; padding-bottom: 0; border: none; }
/* end-of-article Ko-fi prompt */
#end-of-article-ko-fi-prompt { margin-top: 2.8rem; clear: both; }
#end-of-article-ko-fi-prompt img { width: 32px; vertical-align: middle; margin-right: .6rem; }
/* ---
| MAX: 1100px
--- */
@media (max-width: 1100px) {
#top::before { left: 15%; }
}
/* ---
| MAX: 1050px
--- */
@media (max-width: 1050px) {
h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
section { max-width: 92%; }
section > div { width: calc(100% - (340px + 2.4rem)); }
code.block { padding: 1rem 3.8rem 1rem 1.3rem !important; }
#right { width: 330px; }
#right > * { padding: 1.8rem 1.5rem; }
}
/* ---
| MAX: 950px
--- */
@media (max-width: 950px) {
#top::before { font-size: 1.5rem; left: 11%; }
}
/* ---
| MAX: 900px
--- */
@media (max-width: 900px) {
#top nav:not(.mobile-mode) a:not(:last-of-type) { margin-right: 1rem; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.37rem; }
section { padding: 2rem 0; }
section > div { width: calc(100% - (290px + 2rem)); }
#right { width: 290px; }
#right > * { padding: 1.8rem 1.5rem; }
#right p, #right li { font-size: 1rem; }
#right > * { padding: 1.6rem 1.3rem; }
}
/* ---
| MAX: 850px
--- */
@media (max-width: 850px) {
#top::before { display: none; }
}
/* ---
| MAX: 800px
--- */
@media (max-width: 800px) {
section > div, #right { float: none; width: 100%; }
}
/* ---
| MAX: 500px
--- */
@media (max-width: 500px) {
#logo img { width: 35px; }
#logo:hover img { margin-right: 1rem; }
#logo span { font-size: 1.2rem; top: .25rem; }
#top .mobile-mode { margin-top: -.2rem !important; }
}