@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600");*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}html,body{background:#fff;color:#48484d;font-size:16px;font-family:"Source Sans Pro";font-weight:300;line-height:22px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased}.clearfix:before,.clearfix:after{content:" ";display:table;clear:both}.block{border-bottom:solid 1px #eee;padding-bottom:40px;margin-bottom:40px}p{margin-bottom:20px}p:last-child{margin-bottom:0}a{display:inline-block;color:#3173be;text-decoration:none;transition:all 0.14s;cursor:pointer}a:hover{color:#4485cf;text-decoration:none}img{display:block;max-width:100%;height:auto}@font-face{font-family:'icomoon';src:url("../fonts/icomoon/icomoon.eot?-c9lwgf");src:url("../fonts/icomoon/icomoon.eot?#iefix-c9lwgf") format("embedded-opentype"),url("../fonts/icomoon/icomoon.woff?-c9lwgf") format("woff"),url("../fonts/icomoon/icomoon.ttf?-c9lwgf") format("truetype"),url("../fonts/icomoon/icomoon.svg?-c9lwgf#icomoon") format("svg");font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-codepen:before{content:"\e600"}.icon-google-plus:before{content:"\ea8a"}.icon-twitter:before{content:"\ea93"}.icon-dribbble:before{content:"\eaa8"}.icon-github:before{content:"\eab1"}.icon-linkedin:before{content:"\eac8"}.container{max-width:1140px;padding:0 10px;margin:0 auto}.container.large{max-width:100%}@media (min-width: 768px){.col-1{float:left;width:25%}}@media (min-width: 768px){.col-2{float:left;width:50%}}@media (min-width: 768px){.col-3{float:left;width:75%}}@media (min-width: 768px){.col-4{float:left;width:100%}}h1,h2,h3,h4,h5,h6{font-family:"Source Sans Pro";font-weight:300;line-height:1.2em;color:#242429}h1{font-size:32px;font-weight:400;margin-bottom:40px}h2{font-size:24px;margin-bottom:10px}h3{font-size:20px;margin-bottom:10px}.button{display:inline-block;background:#3173be;color:#f9f9ff;padding:10px 14px;transition:all 0.14s;font-weight:400}.button:hover{color:#f9f9ff;background:#4485cf}body{padding-top:5px;padding-bottom:200px}body:before{content:"";position:fixed;background:linear-gradient(to right, #2ec355, #4393ed);display:block;z-index:10;top:0;left:0;width:100%;height:5px;-webkit-animation:hue 10s infinite linear;animation:hue 10s infinite linear}body:after{content:"";position:fixed;background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);z-index:10;left:0;bottom:0;width:100%;height:200px;pointer-events:none}@-webkit-keyframes hue{from{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}to{-webkit-filter:hue-rotate(360deg);filter:hue-rotate(360deg)}}@keyframes hue{from{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}to{-webkit-filter:hue-rotate(360deg);filter:hue-rotate(360deg)}}body>header .container{padding-top:100px}body>header h1{margin:0}body>header h1 a,body>header h1 a:hover{color:#242429}body>header h2{margin-top:0;border-bottom:solid 1px #eee;padding-bottom:40px;margin-bottom:40px}body>header h2 a,body>header h2 a:hover{color:#48484d}body>footer h3:first-child{border-top:solid 1px #eee;padding-top:40px;margin-top:40px}body>footer [class*="icon-"]{font-size:0;text-decoration:none;margin-right:10px}body>footer [class*="icon-"]:before{font-size:24px}body>footer .social-links{margin-bottom:20px}@media (min-width: 768px){body>footer .col-2+.col-2{text-align:right}body>footer [class*="icon-"]{margin-left:10px;margin-right:0}}#latest-tweet{display:block}#latest-tweet ul,#latest-tweet li{display:block;list-style:none}#latest-tweet .interact a{margin-right:10px}.post-overview{margin-bottom:40px}.post-overview .post.teaser{float:left;width:50%}@media (min-width: 768px){.post-overview .post.teaser{width:33%}}@media (min-width: 1024px){.post-overview .post.teaser{width:25%}}.post.teaser{position:relative;padding-right:5px;padding-bottom:5px;overflow:hidden}.post.teaser>*{position:relative;display:block;overflow:hidden;max-width:100%}.post.teaser>*:before{content:"";position:absolute;display:block;z-index:10;top:100%;left:0;width:100%;height:200px;border-radius:50%;box-shadow:0 0 130px 0 rgba(0,0,0,0.3)}.post.teaser img{opacity:0.87;filter:alpha(opacity=0);-ms-filter:alpha(opacity=0);-webkit-filter:grayscale(20%);filter:grayscale(20%);transform:translateZ(0);transition:all 0.14s}.post.teaser:hover img{opacity:1;filter:alpha(opacity=100);-ms-filter:alpha(opacity=100);-webkit-filter:grayscale(0%);filter:grayscale(0%)}.post.teaser.link span{position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;color:#f9f9ff;font-weight:600;text-align:center;vertical-align:middle;height:40px;line-height:40px;margin:auto}.post.full header h2{margin-bottom:0}.post.full footer{margin-top:20px}.post.full footer a{float:left;clear:both;margin-top:20px}@media (min-width: 480px){.post.full footer a{float:none;display:inline-block;margin-right:15px}}.post.full .codepen-wrapper{position:relative;overflow:hidden;z-index:1}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #444;
    color: #e4e4e4;
    font-weight: 400;
  }
  body > header h1 a, body > header h1 a:hover {
    color: #e4e4e4;
  }
  body:after {
    background: linear-gradient(to bottom, rgba(68, 68, 68,0), #444)
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #e4e4e4;
    font-weight: 400;
  }
  a {
    color: #538fd4;
  }
  .button {
    background: #538fd4;
  }
  img {
    filter: grayscale(30%);
  }
}