@import "fonts.less";
@import "githubPages.less";
@import (less) "../node_modules/normalize.css/normalize.css";
@header: #4B5B6E;
@background: #CCCCCC;
@darkgrey: #343444;
@main: #E77171;

body {
    overflow-x: hidden;
    background: @background;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    box-sizing: border-box;
    /* https://github.com/ariya/phantomjs/issues/12685 */
    page {
        background: white;
        position: relative;
        width: 21cm;
        height: 29.7cm;
        display: block;
        page-break-after: auto;
        overflow: hidden;

        .resume {
            display: inline-block;
            width: 100%;
        }
    }

    #forkme {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 10%;
        z-index: 10;
        padding: 10px;
        color: #fff;
        background: @main;
        font-weight: 700;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
    }

    .index-page {
        p {}

        header {
            background: @header;
            color: white;
            padding-top: 10px;
            padding-bottom: 10px;

            .content {
                width: 80%;
                margin-right: auto;
                margin-left: auto;

                .logo {
                    display: inline-block;
                    position: relative;

                    .fa {
                        color: white;
                        margin-bottom: 10px;
                        font-size: 70px;
                        float: left;
                        margin-right: 10px;
                        margin-top: 15px;
                    }

                    h1 {
                        float: left;
                        margin-top: 27px;
                    }
                }
            }
        }

        main {
            padding-left: 5%;
            padding-right: 5%;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            padding-top: 50px;

            p {
                font-size: 20px;
            }

            .resume-collection {
                h3 {
                    font-size: 30px;
                }

                .resume {
                    display: inline-block;
                    text-decoration: none;
                    margin-right: 10px;
                    margin-bottom: 10px;

                    img {
                        height: 300px;
                        width: auto;
                        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                        transition: all 0.3s cubic-bezier(.25,.8,.25,1);

                        &:hover {
                            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
                        }
                    }

                    .resume-title {
                        text-align: center;
                        display: block;
                        text-decoration: none;
                        margin-top: 10px;
                        color: black;
                    }
                }
            }
        }
    }
}
@media print {
    body,
    page {
        margin: 0;
        box-shadow: 0;
        width: 100%;
        height: 100%;
    }
}