SCSS
body {
padding: 0; margin: 0;
position: relative;
height: 100vh;
background: darksalmon;
background-image:
radial-gradient(circle at 10% -10%, rgba(255,255,255,0.5) 20%, rgba(255,255,255,0.1) 25%),
radial-gradient(farthest-corner at 40px 40px, rgba(247,206,165, 1) 20%, rgba(61,56,129,0.9) 80%);
// landscape
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 40%;
left: 0;
bottom: 10%;
background-image:
radial-gradient(60px 20px at 55% 330px, rgba(0,0,0,0.5) 10px, transparent 90px),
radial-gradient(150% 80% at 80% 75%, rgba(25,0,0,0.5) 30%, transparent 70%),
radial-gradient(400% 400% at 50% 400%, rgba(192,119,87, 1) 90%, rgba(192,119,87, 0.3) 98%, transparent 100%);
}
// body
&::after {
content: '';
width: 220px;
height: 270px;
position: absolute;
top: 39%;
left: 50%;
margin-left: -95px;
background: white;
border-left: solid 5px white;
background-image:
radial-gradient(120% 10% at 30% 3%, rgba(255,255,255, 1) 35%, rgba(245,245,245, 0.7) 50%, rgba(255,255,255, 0.1) 100%),
radial-gradient(100% 300% at 0 30%, rgba(250,240,230, 0.9) 30%, rgba(200,200,200, 0.7) 80%, rgba(203,174,164,0.1) 100%);
border-radius: 40px 40px 120px 120px / 25px 25px 200px 200px;
box-shadow: 0 -3px 15px rgba(255,255,255,0.8);
animation: hovering 3s alternate infinite;
}
}
.head {
z-index: 10;
position: absolute;
top: 39%;
left: 50%;
width: 200px;
height: 130px;
margin: -160px -100px -100px;
background-color: black;
background-image:
radial-gradient(10px 10px at 70% 10%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0)),
radial-gradient(40px 30px at 10% 10%, rgba(247,206,165, 1) 20%, rgba(247,206,165, 0)),
linear-gradient(0deg, rgba(85,55,29, 0.5) 40%, #000 50%);
border: solid 14px white;
border-right-color: rgba(255,255,255,0.9);
border-bottom-color:...