/*
 Stylesheet for `templates/about.html`
 */

@import mixins
@import variables

$centered-section-min-width: 500px

div.bg
    $img-height: 650px

    position: fixed
    width: 100%
    left: 0
    z-index: -1

    &#img-1
        background: url(../img/about/bg1.png) no-repeat
        background-size: cover
        height: 600px
        top: -300px

    &#img-2
        background: url(../img/about/bg2.png) no-repeat
        background-size: cover
        height: $img-height + 300
        top: 1800px

    &#img-3
        background: url(../img/about/bg3.png) no-repeat
        background-size: cover
        height: $img-height + 300
        top: 2850px

    &#img-4
        background: url(../img/about/bg4.png) no-repeat
        background-size: cover
        height: $img-height + 400
        top: 4000px

div.section
    background-color: white
    border: 1px solid $baseColor2
    margin-bottom: 200px
    margin-top: 300px
    padding-bottom: 80px
    padding-top: 20px
    overflow: hidden

    &#top
        margin-top: 0px

        h2
            color: $baseColor1
            margin-top: 40px

        div.video
            width: 100%
            position: relative
            padding-top: 56.782% // aspect ration, 9 / 16

            iframe#vimeo
                border: 1px solid $baseColor3

                position: absolute
                top: 0
                left: 0
                height: none
                width: none

    div.centered
        font-size: 110%
        line-height: 150%
        margin-left: auto
        margin-right: auto
        min-width: 500px
        width: 65%

        &#how
            b
                font-family: monospace
                font-size: 110%

            ul
                list-style: none

                span
                    color: $baseColor1
                    font-weight: bold

        h1
            color: $baseColor1

            span
                color: $baseColor2

        a
            color: #727070
            font-style: italic
            text-decoration: none

            &:hover
                @extend .t3

                color: #575757

        span#title
            color: $baseColor1
            font-weight: bold

div.person
    font-size: 80%
    overflow: hidden

    &#top
        margin-top: 40px

    >div
        $image-min-width: 100px

        display: inline-block
        height: 100%
        margin-bottom: 40px
        vertical-align: top

        &.photo
            margin-right: 40px
            width: $image-min-width

            img
                display: block
                height: $image-min-width
                width: $image-min-width

        &.bio
            min-width: $centered-section-min-width - $image-min-width - 50px
            width: 70%

            h1
                font-size: 130%
                margin: 0