<div class="portrait">
    <div class="head">
        <div class="ear left"></div>
        <div class="ear right"></div>
        <div class="whiskers left"></div>
        <div class="whiskers right"></div>
        <div class="face"></div>
        <div class="hair"></div>
        <div class="eyebrow left"></div>
        <div class="eyebrow right"></div>
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose"></div>
        <div class="mustache"></div>
        <div class="mouth"></div>
        <div class="beard"></div>
        <div class="glasses left"></div>
        <div class="glasses-center"></div>
        <div class="glasses right"></div>
    </div>
    <div class="hair-back"></div>
    <div class="jacket"></div>
</div>

@portrait-height: 60vh;
@portrait-width:  60vh * 2 / 3;

@background-color: #252025;
@white: #FFFFFF;
@black: #000000;
@base-color: #FFE58B;
@base-shadow-color: rgba(200, 160, 80, .5);
@hair-color: #261505;
@eye-color: #4E2C10;
@eyebrow-color: @hair-color;
@mouth-color: #943526;
@mustache-color: @hair-color;
@beard-color: @hair-color;
@jacket-color: #261511;
@glasses-color: #000000;
@glasses-bg: rgba(100, 100, 100, .3);
@glasses-thickness: 3px;


@keyframes blink-eyes {
    0%   { height: 7%; }
    5%   { height: 0%; margin-top: 5%; }
    10%  { height: 7%; margin-top: 0;  }
    100% { height: 7%; }
}


.hair-pattern(@deg, @color) {
    background-color: @color;
    background-image:
        linear-gradient(@deg, fade(@color, 50%) 50%, transparent 50%),
        linear-gradient(@deg, fade(darken(@color, 20%), 10%) 50%, transparent 50%),
        linear-gradient(@deg, transparent 50%, fade(lighten(@color, 10%), 5%) 50%),
        linear-gradient(@deg, transparent 50%, fade(darken(@color, 50%), 50%) 50%);
    background-size: 2%, 5%, 8%, 3%;
}

.cloth-pattern (@color) {
    background-color: @color;
    background-image:
        repeating-linear-gradient(
            transparent,
            transparent 2px,
            rgba(0,0,0,.4) 3px,
            rgba(0,0,0,.4) 4px,
            transparent 8px,
            transparent 10px,
            rgba(0,0,0,.4) 11px,
            rgba(0,0,0,.4) 12px,
            transparent 13px,
            transparent 14px,
            rgba(0,0,0,.5) 14px,
            rgba(0,0,0,.5) 16px,
            rgba(00,0,0,.2) 17px,
            rgba(50,0,0,.2) 18px,
            rgba(0,0,0,.5) 19px,
            rgba(0,0,0,.5) 20px,
            rgba(00,0,0,.2) 20px,
            rgba(0,50,0,.2) 21px,
            rgba(0,0,0,.5) 22px,
            rgba(0,0,0,.5) 24px,
            transparent 25px),
        repeating-linear-gradient(270deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,.4) 3px,
            rgba(0,0,0,.4) 4px,
            transparent 8px,
            transparent 10px,
            rgba(0,0,0,.4) 11px,
            rgba(0,0,0,.4) 12px,
            transparent 13px,
            transparent 14px,
            rgba(0,0,0,.5) 14px,
            rgba(0,0,0,.5) 16px,
            rgba(0,0,0,.2) 17px,
            rgba(50,0,0,.2) 18px,
            rgba(0,0,0,.5) 19px,
            rgba(0,0,0,.5) 20px,
            rgba(0,0,0,.2) 20px,
            rgba(0,50,0,.2) 21px,
            rgba(0,0,0,.5) 22px,
            rgba(0,0,0,.5) 24px,
            transparent 25px),
        repeating-linear-gradient(125deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,.2) 2px,
            rgba(0,0,0,.2) 3px,
            transparent 3px,
            transparent 5px,
            rgba(0,0,0,.2) 5px
    );
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: inherit;
}

*:before,
*:after {
    content: "";
}

body {
    background: @background-color;
}

.portrait {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: @portrait-height;
    width: @portrait-width;
}

.head {
    background: #FFE58B;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 100%;
    width: 100%;
    border-top-right-radius: 50% 50%;
    border-top-left-radius: 50% 50%;
    border-bottom-right-radius: 60% 80%;
    border-bottom-left-radius: 60% 80%;
    
    .face {
        background: #FFE58B;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 100%;
        width: 100%;
        border-top-right-radius: 50% 50%;
        border-top-left-radius: 50% 50%;
        border-bottom-right-radius: 60% 80%;
        border-bottom-left-radius: 60% 80%;
    }
    
    .hair {
        .hair-pattern(90deg, @hair-color);
        
        height: 50%;
        width: 105%;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-5%);
        border-top-right-radius: 45% 70%;
        border-top-left-radius: 45% 70%;
        box-shadow: inset 0 30px 30px fade(lighten(@hair-color, 3%), 50%);
        
        &:after {
            background: @base-color;
            height: 65%;
            left: 0;
            bottom: -2px;
            width: 100%;
            border-top-right-radius: 30% 100%;
            border-top-left-radius: 30% 100%;
        }
    }
    
    .whiskers {
        .hair-pattern(10deg, @beard-color);
        
        height: 40%;
        top: 50%;
        width: 30%;
        
        &.left {
            left: 0;
            transform: translateX(-50%) rotateZ(-10deg);
            border-radius: 100% 0 50% 0;
            
            &:before {
                background: @background-color;
                height: 90%;
                width: 100%;
                border-radius: 0 100% 100% 0;
                top: 10%;
                left: -50%;
                transform: rotateZ(15deg);
            }
        }
        
        &.right {
            right: 0;
            transform: translateX(50%) rotateZ(10deg);
            border-radius: 0 100% 0 50%;
            
            &:before {
                background: @background-color;
                height: 90%;
                width: 100%;
                border-radius: 100% 0 0 100%;
                top: 10%;
                right: -50%;
                transform: rotateZ(-15deg);
            }
        }
    }
    
    .ear {
        background: @base-color;
        height: 30%;
        width: 10%;
        top: 40%;
        
        &.left {
            left: 0;
            transform: translateX(-30%) rotateZ(-10deg);
            border-radius: 50% 80% 80% 30%;
        }
        
        &.right {
            right: 0;
            transform: translateX(30%) rotateZ(10deg);
            border-radius: 80% 50% 30% 80%;
        }
    }
    
    .eyebrow {
        .hair-pattern(90deg, @eyebrow-color);
        
        height: 5%;
        width: 30%;
        top: 38%;
        border-radius: 60% 30% 60% 10%;
        
        &:after {
            background: @base-color;
            height: 50%;
            border-radius: 50% 50% 0 0;
            left: 0;
            bottom: -1px;
            width: 100%;
        }
        
        &.left  {
            left: 10%; 
            border-radius: 60% 30% 60% 10%;
            transform: rotateZ(-5deg);
        }
        
        &.right {
            right: 10%;
            border-radius: 30% 60% 10% 60%;
            transform: rotateZ(5deg);
        }
    }
    
    .eye {
        background: @white;
        height: 7%;
        animation: 4s blink-eyes infinite;
        width: 22%;
        top: 44%;
        border-radius: 60%;
        overflow: hidden;
        border-top: solid 3px darken(@base-color, 50%);
        background-image: radial-gradient(circle at center,
            @black 0%,
            @black 14%,
            lighten(@eye-color, 10%) 15%,
            darken(@eye-color, 10%) 49%,
            @white 50%,
            @white 100%);
        
        &.left  { left:  15%; }
        &.right { right: 15%; }
    }
    
    .nose {
        background: @base-color;
        height: 5%;
        width: 20%;
        left: 50%;
        transform: translateX(-50%);
        top: 63%;
        border-radius: 0 0 100% 100%;
        border-bottom: solid 2px @mustache-color;
        box-shadow: 0 1em 1em @base-shadow-color;
    }
    
    .mustache {
        .hair-pattern(90deg, @mustache-color);
        
        height: 17%;
        width: 50%;
        left: 50%;
        transform: translateX(-50%);
        top: 69%;
        border-radius: 50% 50% 30% 30%;
        
        &:after {
            background: @base-color;
            height: 50%;
            border-radius: 50% 50% 0 0;
            left: 0;
            bottom: -1px;
            width: 100%;
        }
    }
    
    .mouth {
        background: @mouth-color;
        height: 4%;
        width: 40%;
        left: 50%;
        top: 79%;
        border-radius: 100% 100% 50% 50%;
        transform: translateX(-50%);
        
        &:before {
            background: @base-color;
            height: 50%;
            width: 10%;
            border-radius: 50%;
            left: 50%;
            top: -30%;
            transform: translateX(-50%);
        }
        
        &:after {
            background: @mouth-color;
            height: 100%;
            left: 50%;
            transform: translateX(-50%);
            top: 40%;
            border-radius: 0 0 80% 80%;
            width: 80%;
        }
    }
    
    .beard {
        .hair-pattern(90deg, @beard-color);
        
        height: 30%;
        width: 40%;
        top: 88%;
        left: 50%;
        transform: translateX(-50%);
        border-top-left-radius: 50% 50%;
        border-top-right-radius: 50% 50%;
        border-bottom-right-radius: 70% 100%;
        border-bottom-left-radius: 70% 100%;
        box-shadow: 0 30px 50px rgba(0, 0, 0, .5), inset 0 -30px 30px rgba(0, 0, 0, .4);
    }
    
    .glasses {
        background: @glasses-bg;
        border: solid @glasses-thickness @glasses-color;
        height: 15%;
        border-radius: 30%;
        width: 35%;
        top: 43%;
        z-index: 2;
        box-shadow: 0 1em 1em @base-shadow-color;
        
        &.left {
            left: 7%;
            
            &:before {
                background: @glasses-color;
                height: @glasses-thickness;
                width: 32%;
                left: -32%;
                top: 30%;
                border-radius: 2px 0 0 2px;
                box-shadow: 3px 5px 3px @base-shadow-color;
            }
        }
        
        &.right {
            right: 7%;
            
            &:after {
                background: @glasses-color;
                height: @glasses-thickness;
                width: 32%;
                right: -32%;
                top: 30%;
                border-radius: 0 2px 2px 0;
                box-shadow: -3px 5px 3px @base-shadow-color;
            }
        }
    }
    
    .glasses-center {
        background: @glasses-color;
        height: 5%;
        left: 50%;
        transform: translateX(-50%);
        top: 45%;
        width: 18%;
        border-radius: 50% 50% 0 0;
        z-index: 1;
        
        
        &:after {
            background: @base-color;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            bottom: -30%;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: inset 0 5px 3px @base-shadow-color;
        }
    }
}

.hair-back {
    .hair-pattern(90deg, darken(@hair-color, 5%));
    
    position: absolute;
    left: 50%;
    top: 70%;
    height: 60%;
    width: 150%;
    transform: translateX(-50%);
    z-index: -2;
    border-top-left-radius: 50% 80%;
    border-top-right-radius: 50% 80%;
    
    &:before {
        background: @background-color;
        height: 80%;
        width: 30%;
        border-radius: 0 50% 50% 0;
        top: -10%;
        left: -17%;
        transform: rotateZ(45deg);
    }
    
    &:after {
        background: @background-color;
        height: 80%;
        width: 30%;
        border-radius: 50% 0 0 50%;
        top: -10%;
        right: -17%;
        transform: rotateZ(-45deg);
    }
}
    
.jacket {
    .cloth-pattern (@jacket-color);
    position: absolute;
    height: 32%;
    width: 240%;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-left-radius: 30% 80%;
    border-top-right-radius: 30% 80%;
    z-index: -1;
    box-shadow: inset 0 30px 30px fade(@jacket-color, 40%);
    
    
    &:before {
        .cloth-pattern (@jacket-color);
        height: 70%;
        width: 34%;
        border-top-left-radius: 50% 20%;
        border-top-right-radius: 50% 20%;
        border-bottom-left-radius: 50% 20%;
        border-bottom-right-radius: 50% 20%;
        left: 50%;
        top: -50%;
        transform: translateX(-50%);
    }
}