@import url(pygments.css);
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700&display=swap');

/******** FONTS ********/

@font-face {
    font-family: 'Holtwood One SC';
    font-style: normal;
    font-weight: 400;
    src: local('Holtwood One SC'), local('HoltwoodOneSC'), url(/theme/fonts/holtwoodonesc.woff) format('woff');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu'), url(/theme/fonts/ubuntu.woff) format('woff');
}


/******** BUILT-INS ********/

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    padding: 0;
    margin: 10px 0;
}

body {
    min-height: 100%;
    font-family: 'Ubuntu Mono', monospace;
    background: rgb(244, 244, 244);
    font-size: 13px;
}

footer>small {
    font-family: 'Ubuntu';
}

h1,
h2,
h3,
h4 {
    font-family: 'Ubuntu Mono', monospace;
    margin: 0;
    padding: 0;
    display: inline-block;
}

a {
    color: #F36C00;
    text-decoration: none;
}

hr {
    background-color: #ccc;
    height: 1px;
    border: 0;
}

blockquote {
    background-color: #ededed;
    border: 1px solid #ccc;
    margin: 0 !important;
    padding: 10px 20px;
}

p.attribution {
    font-style: italic;
}

div.note {
    background-color: #f4f2ca;
    border: 1px solid #e0dc9a;
    padding: 10px 20px;
    color: #8f8b52;
}

article div.section {
    margin: 5px 0 20px 0;
}

pre {
    background-color: #fafafa;
    border: 1px solid #ccc;
    padding: 10px 20px;
}


/* UTILITY CLASSES */

.lfloat {
    float: left;
}

.rfloat {
    float: right;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

.clearfix {
    display: block;
}

body>div.wrapper {
    width: 1000px;
    margin: 0 auto;
    min-height: 100%;
}

.bs {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
}

.site {
    width: 1000px;
    margin: 0 auto;
    margin-bottom: 50px;
}


/******** HEADER ********/

header.site {
    padding: 50px 0;
}

header.site>h1 {
    font-size: 4em;
}

header.site>h1:nth-child(2) {
    position: relative;
    z-index: -1;
    top: -5px;
    text-align: right;
}

h1.stamp {
    padding: 0.2em 0.6em;
}


/******* NAV ********/

nav {
    width: 200px;
    text-align: right;
}

nav>ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav>ul>li {
    margin: 0.3em 0;
    position: relative;
    transition-property: left;
    -webkit-transition-property: left;
    transition-duration: .2s;
    -webkit-transition-duration: .2s;
}

nav>ul>li>a {
    color: #fff;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 1.65em;
}

nav>ul>li.active {
    transform: rotate(0) !important;
    -webkit-transform: rotate(0) !important;
}

nav>ul>li.active>a {
    color: #000;
    background: #fdc100;
    margin: 0;
    padding: 0 0.6em;
}


/******* FOOTER ********/

footer.site {
    width: 740px;
    float: right;
    background-color: #000;
    margin-top: 50px;
    color: #fff;
    padding: 20px;
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
}

footer.site section.lfloat {
    margin-right: 50px;
}

footer.site ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer.site ul lh {
    line-height: 1.5em;
}

footer.site p {
    margin: 0;
    padding: 0;
}

footer.site {
    font-size: 0.8em;
}

section.content {
    margin-left: 220px;
}

section.content>div.body {
    margin: 0 10px;
}

ol.article-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ol.article-list>li {
    border-bottom: 1px solid #ccc;
}

ol.article-list>li>article>footer {
    margin: 0 15px !important;
}

ul.tags {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.tags>li {
    display: inline-block;
    margin-left: 3px;
}

ul.tags>li:after {
    content: ', ';
}

ul.tags>li:last-child:after {
    content: '';
}

article>footer>div.social {
    margin-bottom: 10px;
}

.stamp {
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 0 0.6em;
}

section.content h1 {
    font-size: 2em;
    margin-bottom: 5px;
}

article h2>a {
    color: #000;
    transition-property: color text-shadow;
    transition-duration: .2s;
    -webkit-transition-property: color text-shadow;
    -webkit-transition-duration: .2s;
}

article h2>a:hover {
    color: #F36C00;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

article>div.summary {
    margin: 20px 15px;
}

article>div.content {
    margin: 0 15px;
}

article>footer {
    font-size: 0.8em;
    margin: 20px 15px;
    color: #666;
}

article h2 {
    margin: 5px 0;
}

article>div.content {
    margin-bottom: 20px;
}

p.paginator {
    text-align: right;
}

.lrot {
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
}

.rrot {
    transform: rotate(.5deg);
    -webkit-transform: rotate(.5deg);
}

.rfloat {
    float: right;
}

.float {
    float: left;
}

ul.socialbtn {
    list-style-type: none;
    padding: 0;
    margin: 0 0 10px 0;
}

ul.social {
    margin-top: 20px;
    padding: 5px 0 5px 5px;
    width: 75%;
}

ul.social>li {
    display: inline-block;
}

ul.social>li>a {
    width: 32px;
    height: 32px;
    display: inline-block;
    background-repeat: no-repeat;
    opacity: 0.3;
    transition-property: opacity;
    transition-duration: .5s;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: .5s;
}

ul.social a:hover {
    opacity: 1;
}


/* Icons */

ul.social a[href*='github.com'],
ul.social a[href*='git.io'] {
    background-image: url('../images/icons/github.png');
}

ul.social a[href*='linkedin.com'] {
    background-image: url('../images/icons/linkedin.png');
}

ul.social a[href*='mailto:'] {
    background-image: url('../images/icons/email.png');
}

ul.social a[href*='delicious.com'] {
    background-image: url('../images/icons/delicious.png');
}

ul.social a[href*='digg.com'] {
    background-image: url('../images/icons/digg.png');
}

ul.social a[href*='facebook.com'] {
    background-image: url('../images/icons/facebook.svg.png');
}

ul.social a[href*='last.fm'],
.social a[href*='lastfm.'] {
    background-image: url('../images/icons/lastfm.png');
}

ul.social a[type$='atom+xml'],
.social a[type$='rss+xml'] {
    background-image: url('../images/icons/rss.png');
}

ul.social a[href*='twitter.com'] {
    background-image: url('../images/icons/twitter.svg.png');
}

ul.social a[href*='instagram.com'] {
    background-image: url('../images/icons/instagram.svg.png');
}

ul.social a[href*='t.me'] {
    background-image: url('../images/icons/telegram.svg.png');
}

ul.social a[href*='plus.google.com'] {
    background-image: url('../images/icons/google-plus.png');
}

ul.social a[href*='stackexchange.com'] {
    background-image: url('../images/icons/stack-exchange.png');
}

ul.social a[href*='grooveshark.com'] {
    background-image: url('../images/icons/grooveshark.png');
}

ul.social a[href*='picpay.com'] {
    background-image: url('../images/icons/donation.png');
}

ul.social a[href*='maps.app.goo.gl'] {
    background-image: url('../images/icons/map.svg.png');
}

a.feed>img {
    position: relative;
    top: 5px;
}

pre {
    white-space: pre-wrap;
    /* css-3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

.logo {
    height: 35vh;
    display: block;
    margin: 0 auto;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    background-color: black;
    color: white;
    text-align: center;
}

small {
    font-size: 0.95em;
}