:root{
--main: white;
--wp: 100px;
--hp: 450px;
--steel: linear-gradient(0.25turn, white, grey, black, grey);
--patte: 10% 10% 90% 10%;
--patte2 : 10% 90% 10% 90%;
}
.background {
background: black;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -9999;
}
.ventre {
background: radial-gradient(white, grey, black, grey);
width: 650px;
height: 250px;
position: absolute;
display: flex;
margin: auto auto auto auto;
top:-200px;
left:-150px;
bottom:0;
right:0;
border-radius: 50% 100% 50% 100%;
}
.patte-ar {
width: var(--wp);
height: var(--hp);
position: absolute;
background: var(--steel);
top:0;
left:0;
bottom:0;
right:0;
margin: 100px auto auto 90px;
border-radius: var(--patte2);
transform: rotate(20deg);
z-index:-1;
filter: opacity(0.5);
}
.patte-ar2 {
width: var(--wp);
height: var(--hp);
position: absolute;
background: var(--steel);
top:0;
left:0;
bottom:0;
right:0;
margin: 100px auto auto 100px;
transform: rotate(-5deg);
border-radius: var(--patte2);
z-index:1;
}
.patte-av {
width: var(--wp);
height: var(--hp);
position: absolute;
background: var(--steel);
top:0;
left:0;
bottom:0;
right:0;
margin: 100px auto auto 350px;
border-radius: var(--patte);
z-index:-1;
filter:opacity(0.5);
}
.patte-av2 {
width: var(--wp);
height: var(--hp);
position: absolute;
background: var(--steel);
top:0;
left:0;
bottom:0;
right:0;
margin: 100px auto auto 450px;
transform: rotate(-30deg);
border-radius: var(--patte);
z-index:1;
}
.queue {
width: 50px;
height: 400px;
position: absolute;
background: linear-gradient(0.25turn, white, grey, black, grey);
top:200px;
left:-100px;
bottom:0;
right:0;
margin: auto auto auto 0px;
transform: rotate(30deg);
border-radius: 90% 90% 90% 90%;
z-index: -1;
}
.cou {
width: 100px;
height: 150px;
position: absolute;
background: linear-gradient(0.40turn, white, grey, black, grey, white);
top:35px;
left:0;
bottom:0;
right:0;
margin: -50px auto auto 530px;
transform: rotate(60deg);
border-radius: 50% 100% 50% 25%;
}
.tete {
width: 100px;
height: 300px;
position: absolute;
background: var(--steel);
top:0;
left:0;
bottom:0;
right:0;
margin: -50px auto auto 670px;
transform: rotate(-40deg);
border-radius: 50% 100% 50% 25%;
}
.museau {
width: 100px;
height: 200px;
position: absolute;
background: var(--steel);
top:0;
left:0;
bottom:0;
right:0;
margin: 120px auto auto 750px;
transform: rotate(-10deg);
border-radius: 50% 100% 50% 25%;
}
.oreille {
width: 100px;
height: 200px;
position: absolute;
background: linear-gradient(0.5turn, white, grey, black, grey);
top:0;
left:0;
bottom:0;
right:0;
margin: 110px auto auto 740px;
transform: rotate(-100deg);
border-radius: 50% 100% 50% 25%;
}