@charset "utf-8";
/* CSS Document */

.container{
	position: relative;
	margin: 10% auto;
	text-align: center;
	width: 200px;
	transform: scale(.6);
}
.hoofd,
.hoofd::before, .hoofd::after,
.romp,
.poot,
.voet{
	position: relative;
	background-color: brown;
	border-radius: 50%;
}

.poot, .voet{background-color:#8c0e0e;}
.hoofd{
	width:100px;
	height:125px;	
	margin: 0 auto;
	box-shadow: inset 0px -10px 0 10px #8c0e0e;
}
.romp{
	width:200px;
	height:350px;		
	box-shadow: inset 0px -45px 2px 10px #8c0e0e; 
	margin-top: -20px;
	z-index: -1;
}


.hoofd::before{
	transform: rotate(-15deg);
}
.hoofd::after{
	transform: rotate(15deg);
}
.ogen{
	width: 0;
    height: 0;
    position: absolute;
}
.ogen::before,
.ogen::after{
    content: '';
    border-radius: 50%;
    display: block;
    position: absolute;
    width: 20px;
    height: 10px;
    background-color: #330606;
    box-shadow: inset 0px 1px 0 3px #fff;
    margin-top: 20px;
}
.ogen::before{
	margin-left:20px
}
.ogen::after{
	margin-left:60px
}

/*********************************************************************************/
.hoofd .snor{
 	position: absolute;
    width: 0;
	height: 1px;
	border-style: solid;
	border-width: 1px 30px 1px 0;
	border-color: transparent #ffffff transparent transparent;
    margin-left: 50%;
    margin-top: 60px;
	transform-origin: left center;
}
.hoofd .snor:nth-of-type(2){ transform: rotate(0deg) translate(10px, 0px);}
.hoofd .snor:nth-of-type(3){ transform: rotate(-8deg) translate(10px, -1px);}
.hoofd .snor:nth-of-type(4){ transform: rotate(8deg) translate(10px, 1px);}
.hoofd .snor:nth-of-type(5){ transform: rotate(-180deg) translate(10px, 0px);}
.hoofd .snor:nth-of-type(6){ transform: rotate(-188deg) translate(10px, -1px);}
.hoofd .snor:nth-of-type(7){ transform: rotate(-172deg) translate(10px, 1px);}

.neus{
	position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: black;
    margin: 50px 0 0 calc(50% - 9px);

}

/*********************************************************************************/
.achterpoten .poot{
    width: 70px;
    height: 110px;
    margin-top: -50px;
    display: inline-block;
}

.achterpoten .linkerpoot{
    margin-left: 0;
    transform: rotate(-25deg);
}
.achterpoten .rechterpoot{
	margin-left: 50px;
	transform: rotate(25deg);
}

.achterpoten .voet{
	width:200px;
	height:50px;	
 	
	transform: rotate(-175deg);
	margin-left: -143px;
	margin-top: 63px;
}
.achterpoten .rechterpoot .voet{
    transform: translate(160px, 10px);
}
/*tenen*/
.achterpoten .voet::before{
	content: '';
	display:block;
	width:15px;
	height:3px;
	border-radius: 50%;
	box-shadow: 
		176px 9px 0 9px #8c0e0e, 
		185px 25px 0 8px #8c0e0e, 
		179px 38px 0 6px #8c0e0e;
}
.achterpoten .rechterpoot .voet::before {
    transform: scaleY(-1);
    margin-top: 50px;
    display: block;
    position: absolute;
}
/*nagels*/
.achterpoten .voet::after{
	content: '';
	display:block;
	width:15px;
	height:3px;
	border-radius: 50%;
	box-shadow: 
		179px 9px 0 5px #FFFFFF80, 
		185px 28px 0 4px #FFFFFF80, 
		179px 42px 0 2px #FFFFFF80;
}
.achterpoten .rechterpoot .voet::after {
    transform: scaleY(-1);
    margin-top: 50px;
    display: block;
    position: absolute;
}
/*OREN*/
.hoofd::before,
.hoofd::after{
    content: '';
    display: inline-block;
    width: 35px;
    height: 200px;
    margin: -200px 0 0 0;
    transform-origin: 50% 110%;
	box-shadow: inset 0px 34px 0px 8px rgb(140, 14, 14);
    background-color: #d44747;
	z-index: -1;
}

/*********************************************************************************/
.voorpoten .poot{
    width: 50px;
    height: 170px;
    display: inline-block;
    top: -321px;
    position: relative;
}

.voorpoten .linkerpoot{
    margin-left: 0;
    transform: rotate(-25deg);
}
.voorpoten .rechterpoot{
	margin-left: 50px;
	transform: rotate(25deg);
}

.voorpoten .tenen{
    width: 10px;
    height: 30px;
    display: inline-block;
    border-radius: 50%;
    background: #FFFFFF80;
    top: 80%;
    position: relative;
    box-shadow: -12px -9px 0px 0px #FFFFFF80, 12px -7px 0px 0px #FFFFFF80;
}