body.projects
    background #323759
    color #fff

    ::-moz-selection
        background #f1eff9
    ::selection
        background #f1eff9

    .gradient-backgroud
        position absolute
        top 0
        left 0
        width 100%
        height 920px
        background linear-gradient( 0deg, #323759, #5e50c3 33%, #c9b2cd )

    p
    ul
        font-size 14px
        line-height 18px
        margin-bottom 1em

    code
        display block
        font-family 'Ubuntu Mono'
        outline none

    section.landing
        position relative
        margin-bottom 60px

        .logo
            position absolute
            top 315px
            left 50%

            .disks
                .disk
                    position absolute
                    border-radius 50%
                    background #fff
                    transform translateX(-50%) translateY(-50%)
                    opacity 0.2

                    &.index-0
                        width 100px
                        height 100px
                        opacity 0.7
                    &.index-1
                        width 200px
                        height 200px
                    &.index-2
                        width 300px
                        height 300px
                    &.index-3
                        width 400px
                        height 400px
                    &.index-4
                        width 500px
                        height 500px
            .title
                font-size 45px
                font-family 'Stellar'

                .letter
                    position absolute
                    top 0
                    left 0
                    line-height 8px

                    &.index-0
                        left 100px - 10px
                    &.index-1
                        left 150px - 10px
                    &.index-2
                        left 200px - 10px
                    &.index-3
                        left 250px - 10px
                    &.index-4
                        left 300px - 10px
                    &.index-5
                        left 350px - 10px
                    &.index-6
                        left 400px - 10px
                        
            .version
                position absolute
                top 5px
                left 420px
                opacity 0.2
                font-size 14px

        .punch-line
            padding-top 600px
            text-align center

            .text
                text-transform uppercase
                font-size 18px
                margin 0 0 8px 0

            .links
                a.link
                    display inline-block
                    padding 5px 10px
                    margin 0 5px
                    background rgba(255,255,255,0.2)
                    text-decoration none
                    transition background 0.15s
                    will-change transform
                    &:hover
                        background rgba(255,255,255,0.30)

    section.projects
        position relative
        width 640px
        margin 0 auto 90px auto

        .head
            height 45px
            line-height 45px
            background #333759
            text-align center
            font-size 14px

        .content
            width 100%

            span.no-project
                display block
                padding 17px 0
                background #eef0fa
                text-align center
                color #6c6e7c
                font-size 16px
                font-weight bold

                .title
                    opacity 0.4

            a.project
                display block
                background #eef0fa
                color #6c6e7c
                border-bottom 1px solid #dadada
                transition background 0.15s
                will-change background

                .title
                    display inline-block
                    vertical-align top
                    width 400px
                    font-size 16px
                    font-weight bold
                    padding 17px

                .details
                    display inline-block
                    vertical-align top
                    width 240px
                    text-align right

                    .detail
                        display inline-block
                        padding 11px 10px
                        text-align right

                        .label
                            font-size 10px
                            opacity 0.5
                            margin-bottom 2px

                        .value
                            font-weight bold

                &:last-child
                    border-bottom none

                &:hover
                    background #f6f7fc

    section.text
        position relative
        width 640px
        margin 0 auto 90px auto
        text-align center

        .title
            margin-bottom 18px
            font-family 'Stellar'
            font-size 32px

        ul
            display inline-block
            text-align left

        pre
            width 400px
            margin 0 auto 2em auto
            background #282c47
            padding 12px 18px
            text-align left

            span.line
                &:before
                    display inline-block
                    content '$'
                    padding 0 8px 0 0
            .opacity-20
                opacity 0.2
                pointer-events none