.pic{
    position: relative;
    height: 300px;
}
@media (max-width: 570px)  {
    .bodyPic {
        position: absolute;
        top: 100px;
        left: 100px;
        height: 100px;
        width: 180px;
        background: radial-gradient(ellipse farthest-corner at 40% 70%,rgb(243,198,134), rgb(155,79,1) 50%);
        border-radius: 85px/50px;
        transform: rotate(9deg);
        z-index: 2;
    }
    
    .headPic{
        position: absolute;
        top: 58px;
        left: 62px;
        width: 0; 
        height: 0;
        border-left: 50px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 90px solid rgb(155,79,1);
        transform: rotate(-49deg);
        z-index: 1;
    }
    .paw1Pic {
        position: absolute;
        top: 168px;
        left: 100px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(-140deg);
    }
    .paw2Pic {
        position: absolute;
        top: 178px;
        left: 120px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(-165deg);
    }
    .paw3Pic {
        position: absolute;
        top: 185px;
        left: 245px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(170deg);
        z-index: 2;
    }
    .paw4Pic {
        position: absolute;
        top: 193px;
        left: 225px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(180deg);
    }
    .paw5Pic {
        position: absolute;
        top: 193px;
        left: 240px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(180deg);
    }
    .ear1Pic {
        position: absolute;
        top: 90px;
        left: 150px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 17px solid rgb(128,63,0);
        transform: rotate(35deg);
        z-index: 2;
    }
    .ear2Pic {
        position: absolute;
        top: 80px;
        left: 135px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 17px solid rgb(128,63,0);
        transform: rotate(35deg);
    }
    .nosePic {
        position: absolute;
        width: 10px;
        height: 10px;
        top: 64px;
        left: 73px;
        background: black;
        border-radius: 50px;
        z-index: 2;
    }
    .mouthPic {
        position: absolute;
        width: 37px;
        height: 37px;
        top: 95px;
        left: 75px;
        background: white;
        border-radius: 50px;
        z-index: 2;
    }
    .eye1Pic {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 87px;
        left: 112px;
        background: white;
        border-radius: 50px;
        z-index: 2;
    }
    .eye2Pic {
        position: absolute;
        width: 10px;
        height: 10px;
        top: 90px;
        left: 112px;
        background: black;
        border-radius: 50px;
        z-index: 2;
    }
    .tail1Pic {
        position: absolute;
        top: 110px;
        left: 250px;
        height: 15px;
        width: 70px;
        background-color: rgb(155,79,1); 
        border-radius: 70px/20px;
        transform: rotate(-55deg);
    }
    .tail2Pic {
        position: absolute;
        top: 82px;
        left: 297px;
        width: 0; 
        height: 0;
        border-left: 9px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 15px solid rgb(155,79,1);
        transform: rotate(35deg);
        z-index: 1;
    }
    .tail3Pic:after {
        position: absolute;
        content: '';
        top: 84px;
        left: 299.5px;
        width: 0; 
        height: 0;
        border-left: 6px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 12px solid white;
        transform: rotate(35deg);
        z-index: 2;
    }
}
@media (min-width: 571px)  {
    .bodyPic {
        position: absolute;
        top: 100px;
        left: 300px;
        height: 100px;
        width: 180px;
        background: radial-gradient(ellipse farthest-corner at 40% 70%,rgb(243,198,134), rgb(155,79,1) 50%);
        border-radius: 85px/50px;
        transform: rotate(9deg);
        z-index: 2;
    }

    .headPic{
        position: absolute;
        top: 58px;
        left: 262px;
        width: 0; 
        height: 0;
        border-left: 50px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 90px solid rgb(155,79,1);
        transform: rotate(-49deg);
        z-index: 1;
    }
    .paw1Pic {
        position: absolute;
        top: 168px;
        left: 300px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(-140deg);
    }
    .paw2Pic {
        position: absolute;
        top: 178px;
        left: 320px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(-165deg);
    }
    .paw3Pic {
        position: absolute;
        top: 185px;
        left: 445px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(170deg);
        z-index: 2;
    }
    .paw4Pic {
        position: absolute;
        top: 193px;
        left: 425px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(180deg);
    }
    .paw5Pic {
        position: absolute;
        top: 193px;
        left: 390px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 22px solid rgb(128,63,0);
        transform: rotate(180deg);
    }
    .ear1Pic {
        position: absolute;
        top: 90px;
        left: 350px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 17px solid rgb(128,63,0);
        transform: rotate(35deg);
        z-index: 2;
    }
    .ear2Pic {
        position: absolute;
        top: 80px;
        left: 335px;
        width: 0; 
        height: 0;
        border-left: 8px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 17px solid rgb(128,63,0);
        transform: rotate(35deg);
    }
    .nosePic {
        position: absolute;
        width: 10px;
        height: 10px;
        top: 64px;
        left: 273px;
        background: black;
        border-radius: 50px;
        z-index: 2;
    }
    .mouthPic {
        position: absolute;
        width: 37px;
        height: 37px;
        top: 95px;
        left: 275px;
        background: white;
        border-radius: 50px;
        z-index: 2;
    }
    .eye1Pic {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 87px;
        left: 312px;
        background: white;
        border-radius: 50px;
        z-index: 2;
    }
    .eye2Pic {
        position: absolute;
        width: 10px;
        height: 10px;
        top: 90px;
        left: 312px;
        background: black;
        border-radius: 50px;
        z-index: 2;
    }
    .tail1Pic {
        position: absolute;
        top: 110px;
        left: 450px;
        height: 15px;
        width: 70px;
        background-color: rgb(155,79,1); 
        border-radius: 70px/20px;
        transform: rotate(-55deg);
    }
    .tail2Pic {
        position: absolute;
        top: 82px;
        left: 497px;
        width: 0; 
        height: 0;
        border-left: 9px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 15px solid rgb(155,79,1);
        transform: rotate(35deg);
        z-index: 1;
    }
    .tail3Pic:after {
        position: absolute;
        content: '';
        top: 84px;
        left: 499.5px;
        width: 0; 
        height: 0;
        border-left: 6px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 12px solid white;
        transform: rotate(35deg);
        z-index: 2;
    }
}