SnowMan on CSS3

<!DOCTYPE html>
<html>
<head lang="ru">
    <meta charset="UTF-8">
    <title>Снеговик</title>

    <style type="text/css">
        .clear {
            clear: both;
        }

        .earth {
            width: auto;
            height: 105px;
            background-color: transparent;
            box-shadow: inset 0 10px 20px 0 #666666;
        }

        .ball {
            border: 1px solid #dadada;
            background-color: #e1e1e1;
            border-radius: 100%;
            margin: 0 auto -4px auto;
            box-shadow: inset 0 -10px 20px 0 #666666;
        }

        .eyes {
            width: 10px;
            height: 17px;
            border: 2px solid #333333;
            background-color: #333333;
            border-radius: 100%;
            transform: rotate(25deg);
        }

        .margin-eye1{
            margin: 17px;
            float: left;
        }

        .margin-eye2{
            margin: 20px 25px 0 0;
            float: right;
        }

        .nose {
            margin: -30px 0 0 8px;
            height: 50px;
            width: 10px;
            border-radius: 0 0 100% 0;
            border: 1px solid #dadada;
            background-color: #cb4b16;
            transform: rotate(90deg);
        }

        .mouth {
            margin: -20px 0 0 30px;
            height: 30px;
            width: 5px;
            border-radius: 0 100% 100% 0;
            border: 1px solid #dadada;
            background-color: #333333;
            transform: rotate(95deg);
        }

        .hand {
            height: 5px;
            border: 1px solid #dadada;
            background-color: #333333;
        }

        .left-hand-position {
            width: 160px;
            transform: rotate(13deg);
            margin: 30px 0 0 -80px;
        }

        .right-hand-position {
            width: 78px;
            transform: rotate(2deg);
            margin: 30px 0 0 -80px;
        }

        .fist-size {
            height: 100px;
            width: 100px;
        }

        .second-size {
            height: 150px;
            width: 150px;
        }

        .third-size {
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="ball fist-size">
        <div class="eyes margin-eye1"></div>
        <div class="eyes margin-eye2"></div>
        <div class="clear"></div>
        <div class="nose"></div>
        <div class="mouth"></div>
    </div>

    <div class="ball second-size">
        <div class="hand left-hand-position"></div>
        <div class="hand right-hand-position"></div>
    </div>
    <div class="ball third-size"></div>
    <div class="earth"></div>
</body>
</html>