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

html,
body {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.man-on-moon {
    background-color: #2e2926;
    width: 100vmin;
    height: 100vmin;
    position: relative;
}

.sky {
    background: rgba(46, 45, 45, 0.377);
    width: 100vmin;
    height: 100vmin;
    position: relative;
    /* z-index: -2; */
}

.moon {
    height: 50vmin;
    width: 100vmin;
    border-radius: 50%;
    position: relative;
    background: #e9e8d2;
    bottom: -85%;
    clip-path: inset(0 0 70% 0);
}
.man {
    /* background: red; */
    width: 9vmin;
    height: 15vmin;
    position: absolute;
    bottom: 16vmin;
    left: 45vmin;
}
.foot {
    position: absolute;
    bottom: -1.5vmin;
    left: 24%;
    transform: translate(-50%, -50%);
    height: 2.2vmin;
    width: 4.4vmin;
    border-radius: 150px 150px 0 0;
    background-color: #b8b49b;
    box-shadow: 4.5vmin 0 0 0 #b8b49b;
}

.leg1 {
    width: 4.4vmin;
    height: 4.4vmin;
    background: #b8b49b;
    background: radial-gradient(
            circle 20px at -20% 50%,
            transparent,
            transparent 2.2vmin,
            #b8b49b 2.2vmin
        ),
        radial-gradient(
            circle 20px at 120% 50%,
            transparent,
            transparent 2.2vmin,
            #b8b49b 2.2vmin
        );
    background-size: 2.2vmin 4.4vmin, 2.2vmin 4.4vmin;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    position: absolute;
    bottom: 0.5vmin;
}

.leg2 {
    width: 4.4vmin;
    height: 4.4vmin;
    background: #b8b49b;
    background: radial-gradient(
            circle 20px at -20% 50%,
            transparent,
            transparent 2.2vmin,
            #b8b49b 2.2vmin
        ),
        radial-gradient(
            circle 20px at 120% 50%,
            transparent,
            transparent 2.2vmin,
            #b8b49b 2.2vmin
        );
    background-size: 2.2vmin 4.4vmin, 2.2vmin 4.4vmin;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    transform: rotate(90deg);
    position: absolute;
    bottom: 0.5vmin;
    left: 4.5vmin;
}

.leg1-upper {
    position: absolute;
    background: #b8b49b;
    width: 4.4vmin;
    left: 0vmin;
    height: 8vmin;
    bottom: 2.6vmin;
}

.leg2-upper {
    position: absolute;
    background: #b8b49b;
    width: 4.4vmin;
    left: 4.5vmin;
    height: 8vmin;
    bottom: 2.6vmin;
}

.stmock {
    background: #b8b49b;
    width: 100%;
    height: 7vmin;
    position: absolute;
    top: 4vmin;
}

.chest {
    background: #b8b49b;
    width: 120%;
    height: 8vmin;
    position: absolute;
    border-radius: 50% 50% 0 0;
    left: -1vmin;
    z-index: 1;
}

.head {
    position: absolute;
    height: 11vmin;
    width: 11vmin;
    border-radius: 50%;
    background: #2e2b29;
    top: -8vmin;
    left: -1vmin;
    border: 0.5vmin solid #2e2b29;
    box-shadow:inset 0 1.2vmin 0 0 #b8b49b,
    inset 0 -1vmin 0 0 #b8b49b;
    z-index: 1;
}

.hand1{
    background: #b8b49b;
    position:absolute;
    height:8vmin;
    width: 2.6vmin;
    border-radius: 0 2vmin 2vmin 2vmin;
    transform: rotate(30deg);
    left:-2.7vmin;
    top: 2.5vmin;
}
.hand2{
    background: #b8b49b;
    position:absolute;
    height:8vmin;
    width: 2.6vmin;
    border-radius: 2vmin 0 2vmin 2vmin;
    left:8.8vmin;
    top: 2.5vmin;
    transform: rotate(-30deg);
}
.back{
    background: rgb(240, 240, 240);
    position:absolute;
    height:8vmin;
    width: 10vmin;
    /* border-radius: 2vmin 0 2vmin 2vmin; */
    top: -4vmin;
    left:-0.5vmin;
    z-index: 0;
}
.front{
    background: rgb(240, 240, 240);
    position:absolute;
    height:5vmin;
    width: 4vmin;
    border:0.1vmin solid rgb(59, 59, 59);
    /* border-radius: 2vmin 0 2vmin 2vmin; */
    top: 4vmin;
    left:2.2vmin;
    z-index: 2;
}

.front::after{
    content:"";
    position: absolute;
    background : rgb(59, 59, 59);
    width: 2vmin;
    height: 0.1vmin;
    z-index: 3;
    top: 1vmin;
    left: 0.8vmin;
    box-shadow: 0 0.5vmin 0 0 rgb(59, 59, 59),
                0 1vmin 0 0 rgb(59, 59, 59);
}

.front::before{
    content:"";
    position: absolute;
    background : rgb(59, 59, 59);
    width: 0.5vmin;
    height: 0.5vmin;
    border-radius:50%;
    z-index: 3;
    top: 3vmin;
    left: 1.5vmin;
    
}

.flag{
    /* background: red; */
    width: 13vmin;
    height: 15vmin;
    position: absolute;
    bottom: 14vmin;
    left: 29.2vmin;
    transform: rotate(-8deg);
}

.stick{
    background: #b8b49b;
    width: 0.7vmin;
    height: 18vmin;
    position: relative;
    right: -12vmin;
    bottom:2.5vmin;
    border-radius: 0.5vmin
    
}

.main-flag{
    background: #b8b49b;
    width: 8vmin;
    height: 6vmin;
    position: absolute;
    top: -2vmin;
    right: 1vmin;
    border-radius: 0.2vmin 0.2vmin 0.2vmin 0.2vmin;
}

.stars{
    position: absolute;
    background : white;
    width: 0.5vmin;
    height: 0.5vmin;
    border-radius:50%;
    top: 1;
    z-index: 3;
    box-shadow: 32vmin 8vmin 0 0 white,
    -39vmin 12vmin 0 0 white,
    27vmin -20vmin 0 0 white,
    2vmin -38vmin 0 0 white,
    -30vmin -15vmin 0 0 white,
    -38vmin -47vmin 0 0 white,
    -8vmin -14vmin 0 0 white
    ;
}