<h2>CSS Draw</h2>
<p>Mario Brother's Blue Koopa Shell</p>
<div class="shell-container">
    <div class="shell shell-top"></div>
    <div class="shell shell-bottom">
        <div class="shell-bottom__hole"></div>
        <div class="shell-bottom__deco deco-1"></div>
        <div class="shell-bottom__deco deco-2"></div>
        <div class="shell-bottom__deco deco-3"></div>
        <div class="shell-bottom__deco deco-4"></div>
    </div>
    <div class="shell-middle-border">
        
    </div>
</div>

*{
    margin: 0;
    box-sizing: border-box;
}

body{
    background: #f6f6f6;
    background-image: radial-gradient(100% 100% at 50% 50%, #eaeaea, #cacaca);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
    height: 100vh;
    font-family: Helvetica, sans-serif;
    color: #1a1a1a;
}

p{
    margin-bottom: 2.5rem;
}

.shell-container{
    display: flex;
    position: relative;
    width: 200px;
    height: 190px;
}

.shell{
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    width: 100%;
    height: 100%;
    border-top-left-radius: 49% 60%;
    border-top-right-radius: 49% 60%;
    border-bottom-left-radius: 50% 40%;
    border-bottom-right-radius: 50% 40%;
    overflow: hidden;
}

.shell-top{
    background: #0777fe;
    background-image: radial-gradient(70% 90% at 33% 38%, #cceeff 0%, #3399ff 20%, #0777fe 55% 100%);
    box-shadow:
        -10px -20px 120px #0c3e44ee inset,
        -60px -90px 80px #114d5533 inset,
        10px 10px 30px #11334466 inset
        ;
}

.shell-top::before{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #060612bb;
    mix-blend-mode: multiply;
    clip-path: polygon(11% 0%, 22% 16%, 34% 11%, 46% 11%, 57% 6%, 68% 5%, 66% 0%, 70% 0%, 70% 5%, 81% 14%, 91% 31%, 100% 46%, 100% 52%, 92% 37%, 91% 58%, 100% 92%, 96% 93%, 89% 57%, 81% 58%, 77% 62%, 80% 95%, 74% 94%, 74% 62%, 66% 51%, 57% 44%, 36% 79%, 30% 76%, 54% 40%, 47% 14%, 34% 13%, 22% 19%, 12% 36%, 7% 64%, 4% 64%, 10% 36%, 20% 19%, 13% 7%);
}

.shell-top::after{
    content:"";
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0777fe;
    background-image: radial-gradient(55% 65% at 33% 38%, #cceeff 0%, #3399ff 15%, #0777fe 50% 100%);
    box-shadow:
        -30px -60px 120px #0c3e44ee inset,
        -80px -120px 80px #114d5533 inset,
        50px 50px 20px #11334466 inset
        ;
    clip-path: polygon(50% 12%, 60% 7%, 71% 7%, 81% 17%, 90% 32%, 89% 55%, 83% 55%, 76% 58%, 67% 47%, 57% 39%, 55% 25%);
}

.shell-bottom{
    /* background-image: linear-gradient(190deg, transparent 0 60%, beige 60% 100%); */
    background: beige;
    clip-path: polygon(0% 42%, 100% 80%, 100% 100%, 0% 100%);
    box-shadow: -10px -5px 50px rgba(158, 144, 65, 0.80) inset,
    -80px -30px 40px rgba(59, 54, 21, 0.7) inset;
}

.shell-bottom__hole{
    background: #06060a;
    width: 18%;
    height: 30%;
    bottom: 30%;
    left: 7%;
    position: absolute;
    border-bottom-left-radius: 55% 50%;
    border-bottom-right-radius: 45% 80%;
    box-shadow: -3px 3px 8px rgba(59, 54, 21, 0.7),
    2px 1px 3px rgba(158, 144, 65, 0.80);
}

.shell-bottom__deco{
    position: absolute;
    border-right: solid 8px #665526;
    border-bottom: solid 4px #665526;
}

.shell-bottom__deco.deco-1{
    width: 50%;
    height: 60%;
    bottom: 10%;
    left: -5%;
    border-bottom-right-radius: 35% 50%;
    border-bottom-left-radius: 60% 70%;
}

.shell-bottom__deco.deco-2{
    width: 65%;
    height: 60%;
    bottom: 3%;
    left: -3%;
    border-bottom-right-radius: 35% 50%;
    border-bottom-left-radius: 50% 60%;
}

.shell-bottom__deco.deco-3{
    width: 80%;
    height: 60%;
    bottom: -3%;
    left: -2%;
    border-bottom-right-radius: 40% 55%;
    border-bottom-left-radius: 50% 60%;
    border-right: solid 6px #665526;
    border-bottom: solid 2px #665526;
}

.shell-bottom__deco.deco-4{
    width: 95%;
    height: 60%;
    bottom: -5%;
    left: -1%;
    border-bottom-right-radius: 40% 75%;
    border-bottom-left-radius: 50% 60%;
    border-right: solid 5px #665526;
    border-bottom: solid 2px #665526;
}

.shell-middle-border{
    position: absolute;
    width:100%;
    height:100%;
}

.shell-middle-border::before{
    content:"";
    width: 70%;
    height: 0;
    position: absolute;
    top: 38%;
    left: -13%;
    border-top-left-radius: 25% 50%;
    border-top-right-radius: 60% 100%;
    border-bottom-left-radius: 35% 35%;
    border-bottom-left-radius: 20% 45%;
    transform: rotateZ(15deg);
    border-top: solid 56px transparent;
    border-left: solid 30px white;
}

.shell-middle-border::after{
    content:"";
    width: 70%;
    height: 0;
    position: absolute;
    top: 52%;
    right: -13%;
    border-top-left-radius: 25% 50%;
    border-top-right-radius: 60% 100%;
    border-bottom-left-radius: 35% 35%;
    border-bottom-left-radius: 20% 45%;
    transform: rotateZ(-165deg);
    border-top: solid 56px transparent;
    border-left: solid 30px white;
}