@import "./resert.css";

.box {
    display: block;
    margin-top: 25px;
    width: 200px;
    height: 200px;
    background: none;
}

.pos {
    position: absolute;
}

.begin {  
    position: absolute;
    width: 0;
    height: 0;
}

.triangular-head {
    border-top: 20px solid transparent;
    border-right: 70px solid rgb(181, 91, 26);
    border-bottom: 45px solid transparent;
    transform: rotate(35deg);
    z-index: 6;
}

.nose {
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: black;
    border-radius: 50%;
}

.eye {
    width: 15px;
    height: 15px;
    margin-top: -10px;
    margin-left: 45px;
    background: white;
    border-radius: 50%;
}

.inner-eye {
    width: 12px;
    height: 12px;
    margin-top: 2.8px;
    background: black;
    border-radius: 50%;
}

.ear-left {
    margin-top: 3px;
    margin-left: 15px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 15px solid rgb(132, 69, 24);
    transform: rotate(26deg);
}

.ear-right {
    margin-left: 61px;
    margin-top: -26px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 15px solid rgb(132, 69, 24);
    transform: rotate(5deg);
}

.white-circle {
    width: 17px;
    height: 37px;
    margin-top: -3.5px;
    margin-left: 30px;
    background: white;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    transform: rotate(-57deg);
}

.oval-body {
    width: 200px;
    height: 100px;
    margin-top: 24px;
    margin-left: 36px;
    background: rgb(205, 195, 180);
    background: radial-gradient(circle, rgba(205, 195, 180, 1) 0%, rgba(181, 91, 26, 1) 69%);
    border-radius: 100px/50px;
    transform: rotate(12deg);
    z-index: 5;
}

.leg1 {
    margin-top: 85px;
    margin-left: 40px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 40px solid rgb(132, 69, 24);
    transform: rotate(25deg);
    z-index: 4;
}

.leg2 {
    margin-top: 96px;
    margin-left: 62px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 40px solid rgb(132, 69, 24);
    transform: rotate(10deg);
    z-index: 3;
}

.leg3 {
    margin-top: 76px;
    margin-left: 160px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 40px solid rgb(132, 69, 24);
    transform: rotate(-19deg);
}

.leg4 {
    margin-top: 118px;
    margin-left: 157px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 40px solid rgb(132, 69, 24);
    transform: rotate(10deg);
    z-index: 2;
}

.tail {
    width: 80px;
    height: 20px;
    margin-top: 45px;
    margin-left: 205px;
    border-radius: 46% 54% 50% 50% / 50% 50% 50% 50%;
    background: rgb(181, 91, 26);
    transform: rotate(-50deg);
}

.tail-tip {
    margin-top: 2px;
    margin-left: 66px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 15px solid white;
    transform: rotate(90deg);
}