/* ============ ><><><><><><><><>< Stater ><><><><><><><><>< ============ */
/* ===========  Web Template Development is just like a Beer  =========== */
/* ============ ><><><><><><><><><><><><><><><><><><><><><>< ============ */

/* Stater Default Styles */
.center {
    @include container(1024px);
    @include align-center;

    padding       : 20px;
    padding-top   : 60px;
    margin-bottom : 30px;

    h1 {
        @include font("Roboto" 58px 68px #00b679 400);

        margin-bottom : 30px;
    }

    h2 {
        font        : 18px 'Roboto';
        font-weight : 400;
        line-height : 26px;
        color       : #999999;
    }

    .logo {
        @include block(320px none);

        margin        : 0 auto;
        margin-bottom : 30px;

        img {
            width : 100%;
        }
    }

    .mascot {
        @extend .logo;

        width : 256px;
    }
}

.footer {
    @include container(1024px);
    @include align-center;

    &.rel {
        @include relative-top-left;
        @include align-left;
        @include translate(0);
    }

    padding : 20px;

    @media only screen and (min-height : 700px) {
        @include absolute-bottom-center;

        margin-bottom  : 20px;
        padding-bottom : 20px;
    }

    p {
        font-size     : 12px;
        color         : #999999;
        line-height   : 16px;
        margin-bottom : 0;
    }

    #copyright {
        margin-bottom : 6px;
        color         : #777777;
    }

    .link {
        margin-top : 10px;
    }

    a.current {
        color : #004444;
    }

    ul {
        display       : inline-block;
        font-size     : 12px;
        font-weight   : 600;
        color         : #999999;
        line-height   : 16px;
        margin-bottom : 0;

        & > li {
            display : inline-block;
            margin  : 0 5px;

            & > ul {
                margin-left : 10px;
                font-weight : 400;

                & > li {
                    display : inline-block;
                }
            }
        }
    }
}

.gh-link {
    @include font('Roboto' 16px 24px none 500);
    @include uppercase;

    padding-top : 40px;
}

/* Markdown Styles */
.markdown {
    @include align-left;

    .hljs {
        background-color : transparent;
    }

    code,
    kbd,
    pre,
    samp {
        font-family : Menlo, Monaco, Consolas, "Courier New", monospace;
    }
    code {
        padding          : 2px 4px;
        font-size        : 90%;
        color            : #c7254e;
        background-color : #f9f2f4;
        border-radius    : 4px;

        span {
            @include inline;
        }
    }
    kbd {
        padding            : 2px 4px;
        font-size          : 90%;
        color              : #ffffff;
        background-color   : #333333;
        border-radius      : 3px;
        -webkit-box-shadow : inset 0 -1px 0 rgba(0, 0, 0, .25);
        box-shadow         : inset 0 -1px 0 rgba(0, 0, 0, .25);
    }
    kbd kbd {
        padding            : 0;
        font-size          : 100%;
        -webkit-box-shadow : none;
        box-shadow         : none;
    }
    pre {
        display          : block;
        padding          : 9.5px;
        margin           : 0 0 10px;
        font-size        : 13px;
        line-height      : 1.42857143;
        color            : #333333;
        word-break       : break-all;
        word-wrap        : break-word;
        background-color : #f5f5f5;
        border           : 1px solid #cccccc;
        border-radius    : 4px;
    }
    pre code {
        padding          : 0;
        font-size        : inherit;
        color            : inherit;
        white-space      : pre-wrap;
        background-color : transparent;
        border-radius    : 0;
    }
    .pre-scrollable {
        max-height : 340px;
        overflow-y : scroll;
    }
}