* {
    box-sizing : border-box;
}

body {
    padding     : 0;
    margin      : 0;
    font-family : "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size   : 16px;
    line-height : 1.5;
    color       : #606C71;
}

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

a:hover {
    text-decoration : underline;
}

.btn {
    display          : inline-block;
    margin-bottom    : 1rem;
    color            : #29B6F6;
    background-color : #FFFFFF;
    border-radius    : 0.3rem;
    transition       : all 0.2s;
    box-shadow       : 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn + .btn {
    margin-left : 1rem;
}

.btn:hover {
    text-decoration : none;
    box-shadow      : 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

@media screen and (min-width : 64em) {
    .btn {
        padding : 0.75rem 1rem;
    }
}

@media screen and (min-width : 42em) and (max-width : 64em) {
    .btn {
        padding   : 0.6rem 0.9rem;
        font-size : 0.9rem;
    }
}

@media screen and (max-width : 42em) {
    .btn {
        display   : block;
        width     : 100%;
        padding   : 0.75rem;
        font-size : 0.9rem;
    }

    .btn + .btn {
        margin-top  : 1rem;
        margin-left : 0;
    }
}

.page-header {
    color            : #FFFFFF;
    text-align       : center;
    background-color : #29B6F6;
}

@media screen and (min-width : 64em) {
    .page-header {
        padding : 5rem 6rem;
    }
}

@media screen and (min-width : 42em) and (max-width : 64em) {
    .page-header {
        padding : 3rem 4rem;
    }
}

@media screen and (max-width : 42em) {
    .page-header {
        padding : 2rem 1rem;
    }
}

.project-name {
    margin-top    : 0;
    margin-bottom : 0.1rem;
}

@media screen and (min-width : 64em) {
    .project-name {
        font-size : 3.25rem;
    }
}

@media screen and (min-width : 42em) and (max-width : 64em) {
    .project-name {
        font-size : 2.25rem;
    }
}

@media screen and (max-width : 42em) {
    .project-name {
        font-size : 1.75rem;
    }
}

.project-tagline {
    margin-bottom : 2rem;
    font-weight   : normal;
    opacity       : 0.7;
}

@media screen and (min-width : 64em) {
    .project-tagline {
        font-size : 1.25rem;
    }
}

@media screen and (min-width : 42em) and (max-width : 64em) {
    .project-tagline {
        font-size : 1.15rem;
    }
}

@media screen and (max-width : 42em) {
    .project-tagline {
        font-size : 1rem;
    }
}

.main-content :first-child {
    margin-top : 0;
}

.main-content img {
    max-width : 100%;
}

.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
    margin-top    : 2rem;
    margin-bottom : 1rem;
    font-weight   : normal;
    color         : #29B6F6;
}

.main-content p {
    margin-bottom : 1em;
}

.main-content code {
    padding          : 2px 4px;
    font-family      : Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size        : 0.9rem;
    color            : #383E41;
    background-color : #F3F6FA;
    border-radius    : 0.3rem;
}

.main-content pre {
    padding          : 0.8rem;
    margin-top       : 0;
    margin-bottom    : 1rem;
    font             : 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
    color            : #567482;
    word-wrap        : normal;
    background-color : #F3F6FA;
    border-radius    : 0.3rem;
    box-shadow       : 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.main-content pre > code {
    padding     : 0;
    margin      : 0;
    font-size   : 0.9rem;
    color       : #567482;
    word-break  : normal;
    white-space : pre;
    background  : transparent;
    border      : 0;
}

.main-content .highlight {
    margin-bottom : 1rem;
}

.main-content .highlight pre {
    margin-bottom : 0;
    word-break    : normal;
}

.main-content .highlight pre, .main-content pre {
    padding       : 0.8rem;
    overflow      : auto;
    font-size     : 0.9rem;
    line-height   : 1.45;
    border-radius : 0.3rem;
}

.main-content pre code, .main-content pre tt {
    display          : inline;
    max-width        : initial;
    padding          : 0;
    margin           : 0;
    overflow         : initial;
    line-height      : inherit;
    word-wrap        : normal;
    background-color : transparent;
    border           : 0;
}

.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
    content : normal;
}

.main-content ul, .main-content ol {
    margin-top : 0;
}

.main-content blockquote {
    padding     : 0 1rem;
    margin-left : 0;
    color       : #819198;
    border-left : 0.3rem solid #DCE6F0;
}

.main-content blockquote > :first-child {
    margin-top : 0;
}

.main-content blockquote > :last-child {
    margin-bottom : 0;
}

.main-content table {
    display    : block;
    width      : 100%;
    overflow   : auto;
    word-break : normal;
    word-break : keep-all;
}

.main-content table th {
    font-weight : bold;
}

.main-content table th, .main-content table td {
    padding : 0.5rem 1rem;
    border  : 1px solid #E9EBEC;
}

.main-content dl {
    padding : 0;
}

.main-content dl dt {
    padding     : 0;
    margin-top  : 1rem;
    font-size   : 1rem;
    font-weight : bold;
}

.main-content dl dd {
    padding       : 0;
    margin-bottom : 1rem;
}

.main-content hr {
    height           : 2px;
    padding          : 0;
    margin           : 1rem 0;
    background-color : #EFF0F1;
    border           : 0;
}

@media screen and (min-width : 64em) {
    .main-content {
        max-width : 64rem;
        padding   : 2rem 6rem;
        margin    : 0 auto;
        font-size : 1.1rem;
    }
}

@media screen and (min-width : 42em) and (max-width : 64em) {
    .main-content {
        padding   : 2rem 4rem;
        font-size : 1.1rem;
    }
}

@media screen and (max-width : 42em) {
    .main-content {
        padding   : 2rem 1rem;
        font-size : 1rem;
    }
}

.site-footer {
    padding-top : 2rem;
    margin-top  : 2rem;
    border-top  : solid 1px #EFF0F1;
}

.site-footer-owner {
    display     : block;
    font-weight : bold;
}

.site-footer-credits {
    color : #819198;
}

::selection {
    background : rgba(179, 229, 252, 0.6);
}

::-moz-selection {
    background : rgba(179, 229, 252, 0.6);
}

@media screen and (min-width : 64em) {
    .site-footer {
        font-size : 1rem;
    }
}

@media screen and (min-width : 42em) and (max-width : 64em) {
    .site-footer {
        font-size : 1rem;
    }
}

@media screen and (max-width : 42em) {
    .site-footer {
        font-size : 0.9rem;
    }
}