css.styl

base-color = #152131

body 
    font-size 20px

body,div
    margin 0
    padding 0
    background-color #ffef5e

.border
    border 1px solid base-color

.main
    position relative
    width 700px
    margin 50px auto

.wanzi
    position absolute
    top 250px
    left 100px
    z-index 10

    .hairs
        background-color base-color
        width 190px
        height 250px
        left -30px
        top -50px
        position absolute
        border-radius 50% 50% 0 0
        overflow hidden

        &:after
            content ''
            position absolute
            width 300px
            height 200px
            background #ffef5e
            top 120px

        .hair
            width 35px
            height 45px
            background-color base-color
            position absolute
            z-index 1
            transform rotate(65deg) skew(50deg) translate(8px)

            &.hairs1
                top 17px
                left 27px
            &.hairs2
                top 8px
                left 52px
            &.hairs3
                top 4px
                left 73px
            &.hairs4
                top 0px
                left 90px
            &.hairs5
                top 4px
                left 108px
            &.hairs6
                top 8px
                left 125px
            &.hairs7
                top 17px
                left 17px
    .face
        background-color #fbdac7
        width 130px
        height 100px
        position absolute
        top 0
        border-radius 20px 20px 50px 50px
        border 1px solid #000000
        &:after
            content ''
            width 20px
            height 10px
            position absolute
            left 50%
            top 100px
            margin-left -10px
            background-color #fbdac7
            border 1px solid #000000
            border-radius 3px


        .brow
            width 42px
            height 2px
            background-color base-color
            position absolute
            top 26px
            border-radius 50px 25px 25px 50px
            
            &.left-brow
                left 18px
                transform rotate(-10deg)
            &.right-brow
                right 14px
                transform rotate(10deg)
        
        .eye
            width 15px
            height 15px
            background-color base-color
            position absolute
            top 40px
            border-radius 50%
            z-index 2

            &.left-eye
                left 40px
            &.right-eye
                right 32px
        
        .blusher
            width 20px
            height 20px
            border-radius 50%
            background-color #f79c99
            position absolute
            &.left-blusher
                top 60%
                left 2px
            &.right-blusher
                top 60%
                right 2px

        .mouth
            width 30px
            height 40px
            background-color #d96b6e
            border-radius 40%
            position absolute
            top 50%
            left 50%
            margin-left -15px
            border-bottom 1px solid #000
            &:after
                content ''
                width 30px
                height 100px
                background-color #fbdac7
                position absolute
                bottom 14px

        .ear
            width 10px
            height 20px
            background-color #fbdac7
            position absolute
            top 30px
            border 1px solid #000000
            &.left-ear
                border-radius 5px 0 0 10px
                left -12px
            &.right-ear
                border-radius 0 5px 10px 0
                right -12px
        
    .clothes
        width 70px
        height 80px
        position absolute
        background-color #fff
        top 112px
        left 32px
        border-radius 30% 30% 10px 10px
        overflow hidden
        border 1px solid #000000
        z-index 2
        .collar
            width 20px
            height 10px
            border 1px solid #000000
            background-color #ffffff
            position absolute
            z-index 3
            &.left-collar
                left 12px
                transform rotate(50deg)
            &.right-collar
                right 12px
                transform rotate(-50deg)
        
        .straps
            z-index 2
            width 6px
            height 100px
            position absolute
            background-color #e9003a
            border 1px solid #000000
            &.left-straps
                left 12px
            &.right-straps
                right 12px

    .arm
        width 70px
        height 70px
        background-color #fff
        border-radius: 50%
        z-index 1
        position absolute
        border 1px solid #000000
        top 115px
        z-index 0
        
        &.left-arm
            left 10px
            &:after
                content ''
                width 60px
                height 60px
                background-color #ffef5e
                position absolute
                left 12px
                top 5px
                border-radius 50%
                border 1px solid #000000
        &.right-arm
            left 52px
            &:after
                content ''
                width 60px
                height 60px
                background-color #ffef5e
                position absolute
                left -4px
                top 5px
                border-radius 50%
                border 1px solid #000000

    .belt
        height 10px
        width 70px
        background-color #ed023a
        border 1px solid #152131
        position absolute
        top 182px
        left 31px
        z-index 3

    .skirt
        background #ed023a
        position absolute
        background  none
        border-color #e9003a transparent
        border-image none
        border-style solid
        border-width 0px 30px 50px
        height 0
        left 1px
        position absolute
        top 194px
        width 72px 
        z-index 3
        border-radius 0 0 50% 50%
        .line
            width 1px
            height 30px
            position absolute
            background-color #000000
            top 10px
            &.line1
                left 10px
                transform rotate(20deg)
            &.line2
                left 25px
                transform rotate(10deg)
            &.line3
                left 35px
            &.line4
                right 25px
                transform rotate(-10deg)
            &.line5
                right 10px
                transform rotate(-20deg)

    .leg
        width 12px
        height 40px
        background-color #fadbc7
        border 1px solid #000000
        position absolute
        top 220px
        z-index 2
        &.left-leg
            left 40px
        &.right-leg
            left 78px
        &:after
            content ''
            width 12px
            height 18px
            background-color #fff
            position absolute
            top 40px
            border 1px solid #000000
            border-bottom none 
            left -1px

    .stocking
        width 28px
        height 12px
        background-color #fff
        border 1px solid #000000
        position absolute
        top 275px
        z-index 1
        &.left-stocking
            left 25px
            border-radius: 50% 0 0 50%
            transform rotate(-20deg)
        &.right-stocking
            left 77px
            border-radius: 0 50% 50% 0
            transform rotate(20deg)
    
    .shoes
        width 40px
        height 17px
        position absolute
        background-color #a23030
        top 280px
        &.left-shoes
            left 17px
            border-radius: 50% 0 0 50%
            transform rotate(-20deg)
        &.right-shoes
            left 75px
            border-radius: 0 50% 50% 0
            transform rotate(20deg)




.grandfather
    position absolute
    top 50px
    left 280px
    width 126px
    z-index 10
    .hairs
        position absolute
        width 126px
        .hair
            background-color #152131
            width 1px
            height 5px
            position absolute
            &.hair1
                top 12px
                left 40px
            &.hair2
                top 8px
                left 50px
            &.hair3
                top 5px
                left 62px
            &.hair4
                top 8px
                right 50px
            &.hair5
                top 12px
                right 40px
        
    .face
        background-color #f8bb9f
        position absolute
        width 126px
        height 180px
        top 10px
        border-radius 50%
        border 1px solid #000000
        z-index 2
        &:after
            content ''
            width 25px
            height 10px
            position absolute
            top 178px
            left 50px
            border 1px solid #000000
            border-top none 
            border-bottom none 
            background-color #f8bb9f


        .bangs
            background-color #152131
            width 1px
            height 3px
            top 12px
            position absolute
            z-index 2
            &.bang1
                left 50px
                transform rotate(-20deg)
            &.bang2
                left 65px
            &.bang3
                left 80px
                transform rotate(20deg)
        
        .wrinkle
            height 1px
            position absolute
            background-color #152131
            &.wrinkle1
                width 30px
                top 25px
                left 50px
            &.wrinkle2
                width 15px
                top 36px
                left 58px
        .brow
            width 60px
            height 70px
            background-color #152131
            position absolute
            border-radius 50%
            top 50px
            &:after
                content ''
                background-color #f8bb9f
                width 70px
                height 80px
                position absolute
                top 0px
                left -1px
                border-radius 50%
            &.left-brow
                left 10px
                transform rotate(33deg)
            &.right-brow
                left 57px
                transform rotate(47deg)
        
        .eyes
            width 30px
            height 50px
            position absolute
            border-radius 50%
            top 70px
            background-color #000000
            &:after
                content ''
                width 34px
                height 55px
                background-color #f8bb9f
                position absolute
                top 1px
                left 0px
                border-radius 50%
            &.left-eye
                left 20px
                transform rotate(40deg)
            &.right-eye
                right 20px
                transform rotate(-40deg) rotateY(160deg)

        .nose
            width 8px
            height 20px
            background-color #f8bb9f
            border 1px solid #000000
            border-radius 50%
            position absolute
            top 100px
            left 56px
            z-index 2
            &:after
                content ''
                width 10px
                height 20px
                background-color #f8bb9f
                position absolute
                top -15px
                left -1px
                border-radius 50%
        
        .mouth
            width 30px
            height 30px
            position absolute
            top 130px
            left 45px
            background-color #d96b6e
            border-radius 50%
            border 1px solid #000000
            z-index 1
            &:after
                content ''
                width 50px
                height 40px
                position absolute
                top -25px
                left -15px
                background-color #f8bb9f
                border-radius 50%
                z-index 2

    .ears
        width 20px
        height 20px
        position absolute
        top 100px
        background-color #f8bb9f
        border-radius: 50%
        border 1px solid #000000
        &.left-ear
            left -10px
        &.right-ear
            right -10px

    .clothes
        width 100px
        height 130px
        background-color #a5d1d2
        position absolute
        top 197px
        left 14px
        border 1px solid #000000
        z-index 2
        border-radius 50% 50% 10% 10%
        .cover
            width 102px
            height 62px
            position absolute
            border-radius 50% 50% 10% 10%
            background-color #a5d1d2
            top 0
            z-index 3
        .collar
            width 100px
            height 130px
            position absolute
            border-radius 50% 50% 10% 10%
            background-color #a5d1d2
            z-index 4
            overflow hidden
            &:after
                content ''
                width 40px
                height 40px
                border-radius 50%
                background-color #a5d1d2
                left 30px
                top -20px
                border 1px solid #000000
                z-index 5
    .hands
        background-color #a5d1d2
        border 1px solid #152131
        border-radius 90% 90% 50% 50%
        width 150px
        height 110px
        position absolute
        top 200px
        left -13px
    
    .trousers
        width 96px
        height 140px
        background-color #6c8d6e
        position absolute
        top 326px
        left 16px
        border 1px solid #000000
        &:after
            content ''
            height 100px
            width 400px
            transform rotate(82deg) scale(0.825) skew(70deg) translate(0px)
            background-color #ffef5e
            position absolute
            top 250px
            left -152px
    
    .footer
        width 30px
        height 15px
        background-color #a18883
        position absolute
        top 468px
        &.left-footer
            width 25px
            left 16px
        &.right-footer
            left 84px

    .shoes
        width 45px
        height 18px
        position absolute
        top 483px
        background-color #555a6d
        &.left-shoes
            border-radius 50% 0 30% 50%
            left -4px
            transform rotate(-10deg)
        &.right-shoes
            border-radius 0 50% 50% 30%
            left 83px
            top 481px
            transform rotate(10deg)